方法一
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;
如何打印网页置顶部分内容
猜你喜欢
转载自xxllg.iteye.com/blog/2381254
今日推荐
周排行