是否有可能使一个HTML页面的行为,例如,像一个a4大小的页面在MS Word?
实际上,我希望能够在浏览器中显示HTML页面,并以A4大小页面的尺寸概述内容。
为了简单起见,我假设HTML页面只包含文本(没有图像等),例如,不会有<br>标记。
另外,当HTML页面被打印出来时,它将显示为a4大小的纸质页面。
是否有可能使一个HTML页面的行为,例如,像一个a4大小的页面在MS Word?
实际上,我希望能够在浏览器中显示HTML页面,并以A4大小页面的尺寸概述内容。
为了简单起见,我假设HTML页面只包含文本(没有图像等),例如,不会有<br>标记。
另外,当HTML页面被打印出来时,它将显示为a4大小的纸质页面。
当前回答
我使用HTML生成报告,在真实的纸张上正确地打印出真实大小。
如果你小心地使用mm作为CSS文件中的单位,你应该是OK的,至少对于单页。不过,人们可以通过改变浏览器中的打印缩放来搞砸你。
我似乎记得我所做的每一件事都是单页的,所以我不必担心分页——那可能要困难得多。
其他回答
为每一页创建节,并使用下面的代码来调整页边距、高度和宽度。
如果你打印的是A4尺寸。
然后用户
Size : 8.27in and 11.69 inches
@page Section1 {
size: 8.27in 11.69in;
margin: .5in .5in .5in .5in;
mso-header-margin: .5in;
mso-footer-margin: .5in;
mso-paper-source: 0;
}
div.Section1 {
page: Section1;
}
然后创建一个包含所有内容的div。
<div class="Section1">
type your content here...
</div>
or
@media print {
.page-break {
height: 0;
page-break-before: always;
margin: 0;
border-top: none;
}
}
body, p, a,
span, td {
font-size: 9pt;
font-family: Arial, Helvetica, sans-serif;
}
body {
margin-left: 2em;
margin-right: 2em;
}
.page {
height: 947px;
padding-top: 5px;
page-break-after: always;
font-family: Arial, Helvetica, sans-serif;
position: relative;
border-bottom: 1px solid #000;
}
<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;
}
很久以前,在2005年11月,AlistApart.com发表了一篇文章,讲述他们如何只用HTML和CSS就出版了一本书。参见:http://alistapart.com/article/boom
以下是那篇文章的节选:
CSS2有一个分页媒体(如纸张)的概念,而不是连续媒体(如滚动条)。样式表可以设置页面大小和页边距。页面模板可以指定名称,元素可以声明它们希望在哪个命名的页面上打印。此外,源文档中的元素可以强制换页。下面是我们使用的样式表的一个片段:
@page {
size: 7in 9.25in;
margin: 27mm 16mm 27mm 16mm;
}
由于是一家美国出版商,我们的页面大小以英寸为单位。我们,作为欧洲人,继续使用公制测量。CSS两者都接受。
设置好页面大小和页边距后,我们需要确保在正确的位置有换页符。下面的摘录显示了如何在章节和附录之后生成分页符:
div.chapter, div.appendix {
page-break-after: always;
}
此外,我们使用CSS2来声明命名页面:
div.titlepage {
page: blank;
}
也就是说,扉页要印在标有“空白”的页上。CSS2描述了命名页面的概念,但只有当页眉和页脚可用时,它们的价值才会显现出来。
无论如何……
既然你想打印A4,你当然需要不同的尺寸:
@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
这篇文章深入探讨了设置换页等问题,所以你可能想要完整地阅读它。
在您的例子中,诀窍是首先创建打印CSS。大多数现代浏览器(>2005)支持缩放,并且已经能够显示基于打印CSS的网站。
Now, you'll want to make the web display look a bit different and adapt the whole design to fit most browsers too (including the old, pre 2005 ones). For that, you'll have to create a web CSS file or override some parts of your print CSS. When creating CSS for web display, remember that a browser can have ANY size (think: “mobile” up to “big-screen TVs”). Meaning: for the web CSS your page-width and image-width is best set using a variable width (%) to support as many display devices and web-browsing clients as possible.
编辑(26-02-2015)
今天,我碰巧在SmashingMagazine上看到了另一篇最近的文章,这篇文章也探讨了如何使用HTML和CSS进行打印设计……
编辑(30-10-2018)
这引起了我的注意,因为它的大小不是有效的CSS3,这确实是正确的-我只是重复了文章中引用的代码,(如上所述)是旧的CSS2(当您查看文章和这个答案首次发表的年份时,这是有意义的)。不管怎样,这里是有效的CSS3代码,方便您的复制和粘贴:
@media print {
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
}
如果你认为你真的需要像素(你应该避免使用像素),你必须注意选择正确的打印DPI:
72 dpi (web) = 595 X 842像素 300 dpi(打印)= 2480 X 3508像素 600 dpi(高质量打印)= 4960 X 7016像素
但是,我会避免这种麻烦,简单地使用cm(厘米)或mm(毫米)来确定大小,因为这样可以避免根据您使用的客户机而产生的渲染故障。
我使用HTML生成报告,在真实的纸张上正确地打印出真实大小。
如果你小心地使用mm作为CSS文件中的单位,你应该是OK的,至少对于单页。不过,人们可以通过改变浏览器中的打印缩放来搞砸你。
我似乎记得我所做的每一件事都是单页的,所以我不必担心分页——那可能要困难得多。
从技术上讲,您可以这样做,但是要让所有浏览器打印出与屏幕上显示的一模一样的页面,需要做很多工作。而且,大多数浏览器强制在打印结果上输入URL、打印日期和页码,这并不总是理想的。这不能被改变或禁用。
相反,我建议根据屏幕上的内容创建一个PDF,并将PDF提供给下载和/或打印。虽然大多数可用的PDF库都是付费的,但也有一些免费的替代方案可用于创建基本的PDF。