是否有可能使一个HTML页面的行为,例如,像一个a4大小的页面在MS Word?

实际上,我希望能够在浏览器中显示HTML页面,并以A4大小页面的尺寸概述内容。

为了简单起见,我假设HTML页面只包含文本(没有图像等),例如,不会有<br>标记。

另外,当HTML页面被打印出来时,它将显示为a4大小的纸质页面。


当前回答

PPI and DPI make absolutely no difference to how a document will print off a browser. the printer takes no information on screen dot pitch or the DPI of the images etc. if you are printing images they would print at a size similar in proportion to how they are displayed on screen. the print processor of the browser would increase the DPI of the images from something rather low like 72dpi to whatever DPI the rest of the document is. say the image displays as half a page wide, then its about 4" wide physically. the pixel width of the image would be approx 300px to display correctly in the browser. by the time it prints at a nominal 300DPI, the processor has added pixels and the image will grow to around 1200px which at 300 DPI is 4".

当涉及到矢量或非基于像素的元素,如文本,打印机从驱动程序中选择自己的DPI,这与屏幕点间距或浏览器宽度无关。如果浏览器宽度为3000px,打印处理器将适当地换行文本。

heres what makes it hard about creating print displays: each browser and printer will interpret text sizes (pt, em, px) and spacing in its own way. depending on what printer, browser and maybe even OS you use, you will get a different amount of lines and characters per page. so even if you test on your computer using your browser and printer and figure out that you can display the text in a box at 640x900px and its perfect on print, the next guy who tries to print will possibly get it printing differently. there really is no way to force each printer and browser to get it identical each time.

忘记像素,更忘记DPI,你唯一可以使用像素的事情是设置一个表宽度,模拟打印机上可打印区域的宽度。在这种情况下,我发现640px宽是接近的。

其他回答

寻找类似的问题,我发现这个- http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4是一种文档格式,作为屏幕图像,这取决于图像的分辨率,例如A4文档调整为:

72 dpi (web) = 595 X 842像素 300 dpi(打印)= 2480 X 3508像素 (这是我所知道的“A4”。210mm X 297mm @ 300 dpi) 600 dpi (打印)= 4960 X 7016像素

<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

在你的normal style.css中:

table.tableclassname {
  width: 400px;
}

在你的print.css中:

table.tableclassname {
  width: 16 cm;
}

我从1998年开始在商业报告中使用680px打印A4页。700px不能正确地拟合取决于边缘的大小。现代浏览器可以缩小页面以适应打印机上的页面,但如果您使用680像素,几乎在任何浏览器中都可以正确打印。

运行代码片段并查看结果:

window.print (); <table width=680 border=1 cellpadding=20 cellspacing=0> < tr > < th > # < / th > < th >名称< / th > < / tr > < tr对齐=中心> < td > 1 < / td > < td >唐纳德·特朗普< / td > < / tr > 2 < tr对齐=中心> < td > < / td > < td >巴拉克•奥巴马(BARACK OBAMA) < / td > < / tr > 表> < /

JSFiddle:

https://jsfiddle.net/ajofmm7r/

PPI and DPI make absolutely no difference to how a document will print off a browser. the printer takes no information on screen dot pitch or the DPI of the images etc. if you are printing images they would print at a size similar in proportion to how they are displayed on screen. the print processor of the browser would increase the DPI of the images from something rather low like 72dpi to whatever DPI the rest of the document is. say the image displays as half a page wide, then its about 4" wide physically. the pixel width of the image would be approx 300px to display correctly in the browser. by the time it prints at a nominal 300DPI, the processor has added pixels and the image will grow to around 1200px which at 300 DPI is 4".

当涉及到矢量或非基于像素的元素,如文本,打印机从驱动程序中选择自己的DPI,这与屏幕点间距或浏览器宽度无关。如果浏览器宽度为3000px,打印处理器将适当地换行文本。

heres what makes it hard about creating print displays: each browser and printer will interpret text sizes (pt, em, px) and spacing in its own way. depending on what printer, browser and maybe even OS you use, you will get a different amount of lines and characters per page. so even if you test on your computer using your browser and printer and figure out that you can display the text in a box at 640x900px and its perfect on print, the next guy who tries to print will possibly get it printing differently. there really is no way to force each printer and browser to get it identical each time.

忘记像素,更忘记DPI,你唯一可以使用像素的事情是设置一个表宽度,模拟打印机上可打印区域的宽度。在这种情况下,我发现640px宽是接近的。

从技术上讲,您可以这样做,但是要让所有浏览器打印出与屏幕上显示的一模一样的页面,需要做很多工作。而且,大多数浏览器强制在打印结果上输入URL、打印日期和页码,这并不总是理想的。这不能被改变或禁用。

相反,我建议根据屏幕上的内容创建一个PDF,并将PDF提供给下载和/或打印。虽然大多数可用的PDF库都是付费的,但也有一些免费的替代方案可用于创建基本的PDF。