将HTML页面转换为PDF时的视觉错误

Question

在PDF渲染网站时，我有一个视觉错误。正如您在屏幕截图上看到的那样，图像发生了变化。但是在HTML上渲染这种转变并不存在。

要转换的网站的链接： https://betterhost-3fadc.web.web.app/

<article>
<div class="container"><img
        src="https://www.electrodepot.fr/fstrz/r/s/www.electrodepot.fr/media/catalog/product/cache/1a40d1f945549a9ec18309b0a600e55c/P939881.jpg?frz-v=2690"><img
        src="https://www.electrodepot.fr/media/catalog/product/cache/1a40d1f945549a9ec18309b0a600e55c/P959338.jpg"><img
        src="https://www.alinea.com/fstrz/r/s/www.alinea.com/dw/image/v2/BCKM_PRD/on/demandware.static/-/Sites-ali_master/default/dwb3523209/images/27339299/POUBELLE-DAYA-27339299-F-1.jpg?sw=982&amp;sh=982&amp;sm=fit&amp;sfrm=png&amp;bgcolor=eef1eb&amp;frz-v=103"><img
        src="https://cdn.sklum.com/fr/1172047/distributeur-de-savon-en-verre-ovie.jpg"><img
        src="https://www.alinea.com/fstrz/r/s/www.alinea.com/dw/image/v2/BCKM_PRD/on/demandware.static/-/Sites-ali_master/default/dw32eea630/images/27258507/BROSSE-WC-SPINA-27258507-F-1.jpg?sw=982&amp;sh=982&amp;sm=fit&amp;sfrm=png&amp;bgcolor=eef1eb&amp;frz-v=103"><img
        src="https://www.electrodepot.fr/fstrz/r/s/www.electrodepot.fr/media/catalog/product/cache/1a40d1f945549a9ec18309b0a600e55c/P963865.jpg?frz-v=2690"><img
        src="https://cdn.sklum.com/fr/1172188/gobelet-en-verre-ovie.jpg"></div>
<cactus>

每个页面都在一个称为文章的块中。

article {
    position: relative;
    display: flex;
    width: 827px;
    height: 1170px;
    overflow: hidden;
    margin: 0px;
}

图像通过此CSS代码在2列中排列在2列中：

.container {columns: 2;width: 50%;column-gap: 0px;height: auto;}

web：

​

​href =“ https://i.sstatic.net/8adkc.png” rel =“ nofollow noreferrer”>

Answer 1

您需要专用的打印样式表来制作可靠的PDF。使用媒体查询制作样式表进行打印。在您的标记中，在一个称为.page的容器中，将所有a4的所有内容都包含在一张a4中。然后在您的打印样式表中，使用@page探索以格式化PDF。

在print.css中

.page {
   page-break-inside: avoid;
}

，应该在类=“ page”容器中停止布局的布局在两个页面上破裂。尝试在打印样式表中使用真实尺寸，以使所有内容都适合您所需的一页。您可以通过执行CTRL+P来查看打印预览，或者实际上从Chrome中保存到PDF来查看PDF的外观。

那应该从正确的方向开始。

编辑：其他一些指针

将其删除默认利润率，当打印

@page 
{
    size: auto;   /* auto is the current printer page size */
    margin: 0mm;  /* this affects the margin in the printer settings */
}

将页面容器设置为几乎与要打印的页面大小

.page {
width:209mm;height:296mm;background-color:#fffffe;position:relative;border:1px solid transparent
}