如何以 300 dpi 的分辨率打印 html 页面

Question

我有一个用 html 和 css 编码的网页。 网页尺寸为 A4 Page (300dpi) = 2480 X 3508 (PX)。

问题是，当我打印网页时，它以 72/96dpi 分辨率打印并打印 7 页而不是 1 页，我希望打印机以 300dpi 分辨率打印我的网页。

CSS、HTML、JAVASCRIPT 中的一些代码或可以帮助我的东西？

谢谢。

Answer 1

HTML/CSS 是矢量图形。 你有 css 测量单位“px”（它总是 72ppi，因此可能有点误导）但它实际上不是光栅图形 - 希望它应该被打印机软件视为矢量。 如果您发现以 72dpi 打印的线条、文本等，您可以确定问题出在您的打印机/渲染器软件上。 尝试使用其他浏览器或先将其保存为 PDF（我知道 Chrome 本身可以做到这一点）。

然而，由于 CSS 测量单位“px”是 72ppi，光栅图形（=png、jpg 和 gif 图像）总是被视为 72ppi - 即使它们以其他分辨率保存。 但是您可以通过调整图像大小来强制图像达到所需的分辨率。 如果我有一张5x5 centimeters （ =2x2 inches ）的图像，我需要将它保存为600x600px ，但将其 CSS 宽度属性设置为144px （即width*(72/300) 144px width*(72/300) ）以使其在网站上看起来像 5 厘米.

如果将图像调整为适当的分辨率，您应该能够以 300dpi 的分辨率打印而不会出现任何问题 - 特别是如果您先将其保存为 pdf。 否则很可能是打印机/打印机软件。

请记住，Web不是印刷品，并且不能期望网页在屏幕上和印刷品上看起来完全相同 - 这就是重点。如果这就是您要寻找的内容，您应该改用 PDF。

Answer 2

你可以像这样使用 CSS：

@media print {
    @page {
        size: 210mm 297mm;
    }
}

或使用 px：

@media print {
    @page {
        size: 2480px 3508px;
    }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types

Answer 3

很抱歉在网页中以 300 DPI 打印身份证的迟到响应，您需要在 300 DPI 上将您的网页转换为 PDF。

例如在 PHP 和 dompdf 的情况下

    $dompdf = new Dompdf(array('enable_remote' => true));
    $dompdf->set_option('dpi', 300);
    $dompdf->loadHtml($html);
    $dompdf->render();
    $dompdf->stream($filename.'.pdf',array('Attachment'=>0));

Answer 4

我使用 pdfkit 制作了类似的东西，但我认为它必须与 python 一起使用或更具体我将它与 django 一起使用，它对我来说很好用并创建了一个 300dpi pdf 试试这个

options = { 'page-size': 'Letter', 'margin-top': '0.75in', 'margin-right': '0.75in', 'margin-bottom': '0.75in', 'margin-left ': '0.75in', 'encoding': "UTF-8", 'dpi': '300', 'custom-header' : [ ('Accept-Encoding', 'gzip') ] 'cookie': [ ( 'cookie-name1', 'cookie-value1'), ('cookie-name2', 'cookie-value2'), ], 'no-outline': None }

pdfkit.from_url(' http://google.com ', 'out.pdf', options=options)

https://github.com/JazzCore/python-pdfkit/blob/master/README.rst

Answer 5

不幸的是，网页分辨率为 72 dpi。 我相信这是浏览器的固有设置。 如果您在打印时将浏览器的设置或打印机的设置调整为“适合页面”，您可能会取得一些成功。