如何以 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。 我相信這是瀏覽器的固有設置。 如果您在打印時將瀏覽器的設置或打印機的設置調整為“適合頁面”，您可能會取得一些成功。