如何解决网络渲染尺寸与打印尺寸不符
首先,我进行了搜索和研究,并尝试了大约一周的时间,并且没有任何线索。.所以我以为我已经提出了一些简单的要求,哈哈!
由于某种原因,width: 210mm;
似乎无法正常工作。以下屏幕截图通过chrome上的F12工具呈现为打印模式。
这是CSS。.
@media screen {
body {
background-color: #eeeeee;
counter-reset: page-number;
}
}
@media print {
@page {
size: A4 portrait;
margin: 0mm;
}
html,body,.page-frame { max-width: 210mm; }
.page-frame {
margin: 0;
}
}
.page-frame
{
overflow: hidden;
position: relative;
page-break-after: always;
background-color: white;
width: 210mm;
height: 297mm;
padding: 30mm 20mm 20mm 20mm;
border: 1px solid #dddddd;
column-count: 2;
column-gap: 5mm;
column-rule-width: 2px;
column-rule-color: var(--secondary);
column-rule-style: solid;
counter-increment: page-number;
margin-top: 1em;
}
/* page layouts */
.page-header { position: relative; column-span: all; margin-top: -17mm; margin-bottom: 2mm; height: 15mm; border-bottom: 2px solid var(--secondary); }
.page-footer { position: relative; column-span: all; height: 10mm; padding-top: 2mm; border-top: 2px solid var(--secondary); text-align: center; margin-top: 2mm; }
.page-header > div,.page-footer > div { position: absolute; width: 100%; height: 100%; }
.page-footer .page-number:before { content: counter(page-number); }
.column-frame { height: 100%; width: 100%; }
在其他尝试中,包括上载图像,仍然保留了灰色区域(body
元素并包围了预期的纸张区域,我无法摆脱这个周围的灰色区域。
此外,.paper-frame
div本身看起来小于实际的a4尺寸。.我不知道此时发生了什么。
我想要的只是将.page-frame
元素正确地在屏幕和打印上呈现为A4大小。这很难!
我正在laravel 7.x和最新版本的Chrome浏览器上使用bootstrap 4。
编辑1 --- Chrome问题#273306 https://bugs.chromium.org/p/chromium/issues/detail?id=273306
问题可能与上面的链接中的问题相同吗? .. 也许??还是不?..我仍然无法解决这个问题。在我以前的工作中,我使用https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css进行A4渲染,并且可以正常工作,但是我发现根本不同的地方会导致问题。
解决方法
我过去一直使用chromes打印功能,而我发现解决此类渲染问题的最佳方法是对其进行强行使用。
基本上更改.page框架的大小,直到适合为止。
尽管我不得不说您的问题对我来说很奇怪,因为如果我没记错的话,.page-frame的像素大小与我使用的一致。
从我可以从图片中收集的信息来看,chrome可能会将.page-frame的边距包含在渲染中。因此,请在CSS中将其强行归零。
您还可以尝试将打印选项中的“比例”设置为更高,以查看是否可以解决问题。
,首先,我想介绍一个新手问题,即!important
模块内有bootstrap.print
值。
打印时,浏览器使用@media print
脚本,是吗?
由于我使用laravel
,因此也使用webpack
,因此我生成了包含app.css
的{{1}}文件。
在该阶段,bootstrap
的末尾有两个变量$print-page-size
和$print-body-min-width
node_modules\bootstrap\scss\_variables.css
这会导致问题。这不是错误或任何错误。好吧,如果您比较实际的a4纸和屏幕上的渲染纸的尺寸,两者之间可能会有一些差异,但这不是问题。大小不同,但结果相似。
当您查看/* ..(inside node_modules >> bootstrap folder)/_variables.css */
..
// Printing
$print-page-size: a3 !default;
$print-body-min-width: map-get($grid-breakpoints,"lg") !default;
文件的内部时,引导程序会在resource\sass\app.scss
或custom
之类的自定义scss文件之后导入。
您可以在导入默认引导程序variables
模块之前指定$print-page-size
和$print-body-min-width
参数。执行此操作时,指定的参数将覆盖这些值,从而解决问题。我只是像下面那样设置这两个值。
_print
..嘿。我哭了!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。