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

Question

i have a web page that encoded in html and css. the size of the web page is of A4 Page (300dpi) = 2480 X 3508 (PX).

the problem is that when i print my web page it's printing in 72/96dpi resolution and print 7 pages instead of 1, and i want that the printer will print my web page in 300dpi resolution.

some code in CSS, HTML, JAVASCRIPT or something that can help me?

thanks.

Answer 1

HTML/CSS are vector graphics. You have the css measurement unit "px" (which is always 72ppi and might therefore be a bit misleading) but it's not actually raster graphics - and it should hopefully be treated like vectors by the printer software. If you find lines, text and such printed in 72dpi you can be pretty sure the problem is your printer/renderer software. Try another browser or save it to PDF first (I know Chrome can do that natively).

However since the CSS measurement unit "px" is 72ppi, raster graphics (=png, jpg and gif images) are always treated as 72ppi - even if they are saved in another resolution. But you can force images to the desired resolution by resizing them. If I have an image that's 5x5 centimeters ( =2x2 inches ) I need to save it as 600x600px , but set its CSS width property to 144px (which is width*(72/300) ) to make it look like 5 centimeters on the website.

If the images are resized to the proper resolution you should be able to print it at 300dpi without any problems - especially if you save it to a pdf first. Otherwise it's most likely the printer/printer software.

Keep in mind that web is not print and a webpage can't be expected to look exactly alike on screen and print - and that's the whole point.If that's what you're looking for you should just go with PDF instead.

Answer 2

You can use CSS just like:

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

or with px:

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

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

Answer 3

Sorry for late response to print a ID card on 300 DPI in web page you need to convert your web page to PDF on 300 DPI.

For example in case of PHP and 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

I made something similar using pdfkit but i think it has to be used with python or more specific i used it with django and it worked fine for me and created a 300dpi pdf Try this

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

Unfortunately, web resolution is 72 dpi. I believe this is an inherent setting in the browsers. If you adjust the browser's setting, or the printer's setting to "fit to page" when printing you might have some success.