HTML打印方法总结

来源：互联网发布：淘宝店运营计划书编辑：程序博客网时间：2024/04/30 08:24

如何打印网页置顶部分内容

方法一

var html;//可以使用模版引擎进行渲染//如html = template.render("today-task-list-print-template",data); //或使用Jquery或原生Js选取想要打印的部分//如html = $("#print-content").html();var newWin = window.open('', '_self', ''); //在当前页打开新的窗口newWin.document.write("<head><style>#print-content{font-size:14px}</style></head>"); //向新窗口添加css样式newWin.document.write(html);newWin.print();newWin.location.reload(); //重新加载使窗口恢复到打印前状态

优缺点：

不会产生新的标签页或弹出窗口
reload时，页面会重新刷新，用户之前对页面的操作会被重置

方法二

var html;//do something to htmlvar newWin = window.open('', '', '');newWin.document.write("<head><style>#print-content{font-size:14px}</style></head>");newWin.document.write(html);newWin.print();newWin.close(); //关闭新产生的标签页

优缺点

会产生一个新的标签页，当用户在未选择打印或取消时直接关闭标签页会导致原页面无法刷新
当用户完成打印操作后，新页面关闭，回到打印前页面，不会有页面加载时间的等待。

方法三

@media print { .no-print{display:none;}}

使用css的媒体查询功能@media。将不需要的在打印页面中显示的隐藏，达到打印指定区域的效果。

优缺点

不需要额外的JS代码
当需要隐藏的部分较多时，比较繁琐。

打印中常用的css

设置打印纸张大小和边距

@page {    margin: 14mm 18mm 10mm;     size: 20.1cm 29.7cm;//也可以直接写国际标准尺寸  size: A4;}

防止元素被纸张割裂

page-break-inside: avoid;

保持元素在页面最顶端

page-break-before: always;

FAQ

Q: 对于使用bootstrap的页面，打印时为什么部分样式无法正常显示或变为了较为朴素的样式？
A：bootstrap中默认设置了针对打印的样式。对于bootstrap 3来说，可以到官网定制板块，将Print media styles取消，得到定制的bootstrap文件。当需要改动的地方较少时，也可以直接在自己的css文件中添加print样式，以覆盖默认样式。

Q:待添加。。

0 0