网络渲染尺寸与打印尺寸不符

编程问答 2022-08-13

问题描述

首先，我进行了搜索和研究，并尝试了大约一周的时间，并且没有任何线索。.所以我以为我已经提出了一些简单的要求，哈哈！

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

enter image description here

编辑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

..嘿。我哭了！

htmlprintingrenderscreen