是否有可能使一个HTML页面的行为，例如，像一个a4大小的页面在MS Word?
实际上，我希望能够在浏览器中显示HTML页面，并以A4大小页面的尺寸概述内容。
为了简单起见，我假设HTML页面只包含文本(没有图像等)，例如，不会有<br>标记。
另外，当HTML页面被打印出来时，它将显示为a4大小的纸质页面。
从技术上讲，您可以这样做，但是要让所有浏览器打印出与屏幕上显示的一模一样的页面，需要做很多工作。而且，大多数浏览器强制在打印结果上输入URL、打印日期和页码，这并不总是理想的。这不能被改变或禁用。
相反，我建议根据屏幕上的内容创建一个PDF，并将PDF提供给下载和/或打印。虽然大多数可用的PDF库都是付费的，但也有一些免费的替代方案可用于创建基本的PDF。
强制web浏览器以与A4相同的像素尺寸显示页面是相当容易的。然而，在渲染时可能会有一些怪癖。
假设你的显示器显示72 dpi，你可以添加如下内容:
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 842px;
width: 595px;
/* to centre page on screen*/
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
</body>
</html>
我使用HTML生成报告，在真实的纸张上正确地打印出真实大小。
如果你小心地使用mm作为CSS文件中的单位，你应该是OK的，至少对于单页。不过，人们可以通过改变浏览器中的打印缩放来搞砸你。
我似乎记得我所做的每一件事都是单页的，所以我不必担心分页——那可能要困难得多。
完全可以将布局设置为a4页面的比例。你只需要设置相应的宽度和高度(可能检查窗口。innerHeight和window。虽然我不确定这是否可靠)。
The tricky part is with printing A4. Javascript for example only supports printing pages rudimentarily with the window.print method. As @Prutswonder suggested creating a PDF from the webpage probably is the most sophisticated way of doing this (other than supplying PDF documentation in the first place). However, this is not as trivial as one might think. Here's a link that has a description of an all open source Java class to create PDFs from HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .
显然，一旦你创建了一个A4比例的PDF打印，它将导致一个干净的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宽是接近的。
<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;
}
寻找类似的问题，我发现这个- 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像素
为每一页创建节，并使用下面的代码来调整页边距、高度和宽度。
如果你打印的是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;
}
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
很久以前，在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(毫米)来确定大小，因为这样可以避免根据您使用的客户机而产生的渲染故障。
A4尺寸为210x297mm
所以你可以用CSS设置HTML页面来适应这些大小:
html,body{
height:297mm;
width:210mm;
}
我在谷歌上搜索“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)。
我从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/
有很多方法:
使用毫米:
html, body {
width: 210mm;
height: 297mm;
}
使用公分cm:
html, body {
width: 21.0cm;
height: 29.7cm;
}
使用点pt:
html, body {
width: 595pt;
height: 842pt;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"/>
<title>DIN A4 Page</title>
<style type="text/css">
@page { size: 21cm 29.7cm; margin: 2cm }
p { line-height: 120%; text-align: justify; background: transparent }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</body>
</html>
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
