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

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

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

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


当前回答

<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;
}

其他回答

有很多方法:

使用毫米:

html, body {
    width:  210mm;
    height: 297mm;
}

使用公分cm:

html, body {
    width:  21.0cm;
    height: 29.7cm;
}

使用点pt:

html, body {
    width:  595pt;
    height: 842pt;
}

A4尺寸为210x297mm

所以你可以用CSS设置HTML页面来适应这些大小:

html,body{
    height:297mm;
    width:210mm;
}

I know that this subject is quite old but I want to share my experience about that topic. Actually, I was searching a module that can help me with my daily reports. I'm writting some documentations and some reports in HTML + CSS (instead of Word, Latex, OO, ...). The objectif would be to print them on A4 paper to share it with friends, ... Instead of searching, I decided to have a small funny coding session to implement a simple lib that can handle "pages", page number, summary, header, footer, .... Finally, I did it in ~~2h and I know that's not the best tool ever but it's almost ok for my purpose. You can take a look at this project on my repo and don't hesitate to share your ideas. It's maybe not what you are searching for at 100% but I think that this module can help you.

基本上我创建了一个页面的主体“宽度:200mm;”和容器的高度:290mm(小于A4)。然后我使用了page-break-after: always;因此,浏览器的“打印”选项知道何时拆分页面。

回购:https://github.com/kursion/jsprint

我使用HTML生成报告,在真实的纸张上正确地打印出真实大小。

如果你小心地使用mm作为CSS文件中的单位,你应该是OK的,至少对于单页。不过,人们可以通过改变浏览器中的打印缩放来搞砸你。

我似乎记得我所做的每一件事都是单页的,所以我不必担心分页——那可能要困难得多。

寻找类似的问题,我发现这个- 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像素