Zab*_*bba 362 html css printing
是否可以使HTML页面表现得像,例如,像MS Word中的A4大小的页面？
基本上,我希望能够在浏览器中显示HTML页面,并在A4尺寸页面的尺寸中概述内容.
为了简单起见,我假设HTML页面只包含文本(没有图像等),<br>例如没有标签.
此外,当打印HTML页面时,它将显示为A4大小的纸页.
e-s*_*shi 293
在2005年11月,AlistApart.com发表了一篇关于他们如何使用HTML和CSS发表一本书的文章.请参阅:http://alistapart.com/article/boom
这是该文章的摘录:
CSS2有一个分页媒体的概念(想想纸张),而不是连续媒体(想想滚动条).样式表可以设置页面大小及其边距.页面模板可以给出名称,元素可以说明要打印的页面.此外,源文档中的元素可以强制分页.这是我们使用的样式表的片段:
Run Code Online (Sandbox Code Playgroud)@page { size: 7in 9.25in; margin: 27mm 16mm 27mm 16mm; }有了一个美国的出版商,我们得到了以英寸为单位的页面大小.作为欧洲人,我们继续进行公制测量.CSS接受两者.
设置页面大小和页边距后,我们需要确保在正确的位置有分页符.以下摘录显示了如何在章节和附录之后生成分页符:
Run Code Online (Sandbox Code Playgroud)div.chapter, div.appendix { page-break-after: always; }另外,我们使用CSS2来声明命名页面:
Run Code Online (Sandbox Code Playgroud)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显示网站.
现在,您将希望使Web显示看起来有点不同,并使整个设计适应大多数浏览器(包括2005年之前的旧版本).为此,您必须创建一个Web CSS文件或覆盖打印CSS的某些部分.在为Web显示创建CSS时,请记住浏览器可以具有任何大小(想想:"移动"到"大屏幕电视").含义:对于Web CSS,您的页面宽度和图像宽度最好使用可变宽度(%)设置,以支持尽可能多的显示设备和Web浏览客户端.
编辑(26-02-2015)
今天,我碰巧偶然发现SmashingMagazine上的另一篇近期文章,该文章也用HTML和CSS进行打印设计......以防万一你可以使用另一个教程.
编辑(30-10-2018)
它引起了我的注意,因为size它不是有效的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进行打印:
然而,我会避免麻烦,只需使用cm(厘米)或mm(毫米)进行大小调整,因为这可以避免根据您使用的客户端出现可能出现的故障.
Tim*_*ara 65
强制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>
zur*_*fyx 35
A4尺寸为210x297mm
因此,您可以使用CSS设置HTML页面以适合这些大小:
html,body{
height:297mm;
width:210mm;
}
Pir*_*dul 24
使用每个页面创建部分,并使用以下代码调整边距,高度和宽度.
如果您要打印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>
要么
@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;
}
Wil*_*ean 16
我已经使用HTML生成报告,这些报告可以在真实纸张上以实际尺寸正确打印出来.
如果你在CSS文件中小心地使用mm作为你的单位,你应该没问题,至少对于单个页面.但是,人们可以通过改变浏览器中的打印缩放来搞砸你.
我似乎记得所有的事情我做了一个网页,所以我没有担心分页 - 这可能是更难.
小智 12
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">
在你的正常style.css:
table.tableclassname {
width: 400px;
}
在你的print.css:
table.tableclassname {
width: 16 cm;
}
Cas*_*ook 11
我在谷歌搜索后看到了这个解决方案,搜索"A4 CSS页面模板"(codepen.io).它使用<page>标签在浏览器中显示A4(A3,A5,也是肖像)大小的区域.在此标记内部显示内容,但绝对位置仍然相对于浏览器区域.
body {
background: rgb(204,204,204);
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
@media print {
body, page {
margin: 0;
box-shadow: 0;
}
}<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>这适用于我,不包括任何其他css/js库.适用于当前浏览器(IE,FF,Chrome).
小智 10
PPI和DPI对文档打印机的打印方式完全没有区别.如果您打印的图像打印的图像尺寸与屏幕上显示的大小相似,则打印机不会获取有关屏幕点距或图像的DPI等信息.浏览器的打印处理器会将图像的DPI从72dpi等较低的值增加到文档其余部分的DPI.假设图像显示为半页宽,则其物理宽度约为4英寸.图像的像素宽度约为300像素,可在浏览器中正确显示.当它以标称300DPI打印时,处理器已添加像素并且图像将增长到大约1200px,在300 DPI时为4".
当涉及到矢量或非基于像素的元素,例如文本,打印机从该犯规驾驶员选择其自己的DPI涉及筛选点距或如果浏览器是3000px宽浏览器的宽度等,打印处理器将换行文本适当.
这就是创建打印显示的难点:每个浏览器和打印机都会以自己的方式解释文本大小(pt,em,px)和间距.根据您使用的打印机,浏览器甚至OS,您将获得每页不同数量的行和字符.所以,即使你测试使用浏览器和打印机的计算机上,并找出你可以在640x900px及其对打印完美的显示在框中的文字,谁试图打印下一个家伙很可能会得到它打印不同.实际上没有办法强制每台打印机和浏览器每次都让它相同.
忘记像素,更忘记DPI,唯一可以使用像素的是设置一个表格宽度,模拟打印机上可打印区域的宽度.在那种情况下,我发现640px宽是接近的.
Woj*_*ski 10
寻找类似的问题我找到了这个 - http://www.indigorose.com/forums/archive/index.php/t-13334.html
A4是一种文档格式,作为依赖于图像分辨率的屏幕图像,例如A4文档的大小调整为:
我知道这个主题很老,但我想分享一下我对这个主题的经验.实际上,我正在搜索一个可以帮助我完成日常报告的模块.我正在用HTML + CSS(而不是Word,Latex,OO,......)编写一些文档和一些报告.目标是将它们打印在A4纸上与朋友分享,...我决定有一个小的有趣的编码会话来实现一个简单的lib,可以处理"页面",页码,摘要,标题,页脚,....最后,我做了~~ 2h,我知道这不是最好的工具,但它几乎可以达到我的目的.您可以在我的回购中查看此项目,并毫不犹豫地分享您的想法.它可能不是你在100%搜索的东西,但我认为这个模块可以帮助你.
基本上我创建了一个页面"宽度:200mm;" 和容器高度:290毫米(小于A4).然后我使用了page-break-after:always; 所以浏览器的"打印"选项知道何时拆分页面.
repo:https://github.com/kursion/jsprint
从技术上讲,你可以,但要让所有浏览器完全按照屏幕上显示的方式打印出页面需要花费很多工作.此外,大多数浏览器强制打印输出上的URL,打印日期和页码,这并不总是需要.这不能更改或禁用.
相反,我建议根据屏幕上的内容创建PDF并提供PDF下载和/或打印.虽然大多数可用的PDF库都是付费的,但是有一些免费的替代方法可用于创建基本PDF.
方法很多：
html,body{
height: 297mm;
width: 210mm;
}
html,body{
height: 29.7cm;
width: 21cm;
}
html,body{
height: 842px;
width: 595px;
}
小智 5
自1998年以来,我已经在商业报告中使用680像素在A4页面上打印.700px无法正确地取决于边距的大小.现代浏览器可以缩小页面以适合打印机上的页面,但如果使用680像素,则几乎可以在任何浏览器中正确打印.
这是你的HTML 运行代码片段并查看结果:
window.print();<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>的jsfiddle:
https://jsfiddle.net/ajofmm7r/