HTML打印方法总结

最新推荐文章于 2025-05-28 08:15:00 发布

转载最新推荐文章于 2025-05-28 08:15:00 发布 · 2.2w 阅读

文章标签：

#网页 #html #打印

WEB前端专栏收录该内容

1 篇文章

订阅专栏

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

方法一

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 html

var 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:待添加。。