Web 渲染尺寸与打印尺寸不匹配

Question

首先，我进行了搜索和研究，并尝试了大约一个星期，但毫无头绪..所以我认为我已经获得了提出简单问题的权利，哈哈！

出于某种原因，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

会不会是上面link的问题？ .. 可能是？？还是不？..我仍然无法解决这个问题。在我以前的工作中，我使用 https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css 进行 A4 渲染并且它有效，但我找不到关键的不同所以导致问题。

Answer 1

我过去曾使用过 chrome 的打印功能，我发现解决此类渲染问题的最佳方法是暴力破解。

基本上改变 .page-frame 尺寸直到它适合。

虽然我不得不说你的问题对我来说似乎很奇怪，因为如果我没记错的话那么你的 .page-frame 的像素大小与我使用的一致。

根据我从图片中收集到的信息，chrome 可能在渲染中包含了 .page-frame 的边距。因此，在 css.

中将它们强制归零

您也可以尝试将打印选项中的“比例”设置得更高，看看是否能解决问题。

Answer 2

首先，我想介绍一下 bootstrap.print 模块中有 !important 值的可能是菜鸟问题。

当你打印出来时，浏览器使用@media print脚本，是吗？

因为我使用 laravel，因此使用 webpack，所以我生成 app.css 包含 bootstrap.

的文件

在那个阶段，在node_modules\bootstrap\scss\_variables.css

的末尾有两个名为$print-page-size和$print-body-min-width的变量

/* ..(inside node_modules >> bootstrap folder)/_variables.css */
..
// Printing
$print-page-size:                   a3 !default;
$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

这导致了问题。这不是错误或任何错误。好吧，如果您在屏幕上比较实际 a4 纸和渲染纸的尺寸，两者之间可能会有一些差异，但这不是问题。尺寸不同但结果相似

当您查看 resource\sass\app.scss 文件内部时，bootstrap 在自定义 scss 文件（如 custom 或 variables.

之后导入

您可以在导入默认 bootstrap _print 模块之前指定 $print-page-size 和 $print-body-min-width 参数。当你这样做时，指定的参数会覆盖那些值，这样问题就解决了。我只是像下面这样设置这两个值。

/* resources/sass/_variables.scss file */
// print
$print-page-size: a4;
$print-body-min-width: auto;

..嘿嘿。我解决了！

Web 渲染尺寸与打印尺寸不匹配

Web rendered size doesn't match print size

html

css

printing

screen

render