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

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

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

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


当前回答

有很多方法:

使用毫米:

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

我从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/

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

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

我在谷歌上搜索“A4 CSS页面模板”(codepend .io)后看到了这个解决方案。它使用<page>标记在浏览器中显示A4 (A3,A5,也是纵向)大小的区域。在这个标记中显示内容,但绝对位置仍然相对于浏览器区域。

身体{ 背景:rgb (204204204); } 页面{ 背景:白色; 显示:块; 保证金:0自动; margin-bottom: 0.5厘米; 箱影:0 0 0.5cm rgba(0,0,0,0.5); } 页面(=“A4大小){ 宽度:21厘米; 高度:29.7厘米; } 布局页面(大小= " A4 "][=“肖像”]{ 宽度:29.7厘米; 高度:21厘米; } @media print { 正文,页{ 保证金:0; 不必:0; } } <页面大小= >“A4 A4页面< / > <page size="A4" layout="portrait">A4 portrait</page>

这适用于我没有任何其他css/js库包括在内。适用于当前的浏览器(IE, FF, Chrome)。

有很多方法:

使用毫米:

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

使用公分cm:

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

使用点pt:

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