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

可能是上面链接中的问题是同一个问题吗？ .. 可能是？？还是不？..我仍然无法解决这个问题。在我之前的工作中，我使用https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css 进行 A4 渲染，它可以工作，但我找不到关键的不同之处，因此导致了问题。

Answer 1

首先，我想介绍一个菜鸟问题，bootstrap.print 模块内部有 !important 值。

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

由于我使用laravel，因此使用webpack，因此我生成了包含bootstrap 的app.css 文件。

在该阶段，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 文件的内部时，在custom 或variables 等自定义scss 文件之后导入引导程序。

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

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

..嘿。我解决了！

Answer 2

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

基本上改变 .page-frame 的大小，直到合适为止。

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

根据我从图片中收集到的信息，chrome 可能会将 .page-frame 的边距包含在渲染中。所以在 css 中将它们强制归零。

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