ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

使用window.print进行前端打印,批量打印,设置分页,ie、火狐下设置页眉页脚

2021-09-13 15:35:42  阅读:355  来源: 互联网

标签:设置 打印 页眉 iframe print document ie 页面


window.print()

print() 方法用于打印当前窗口的内容。谷歌调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印请求。

但谷歌貌似不能自定义设置页眉页脚的文字;ie和火狐可以,如下所示

火狐:菜单-->打印

ie:文件-->打印预览,样子和上面差不多

使用或编辑打印样式的几种方式:

引入样式表

<link href="/path/print.css" media="print" rel="stylesheet" />
@import url("/path/print.css") print;

媒体查询:

@media print {
  h1 {
    font-size: 20px;
    color: red;
  }
}
<style type="text/css" media="print">
   // 打印样式
</style>

 

设置打印纸张的外边距(去掉页眉页脚):

@page{margin:2cm 3cm;}  margin若设为0,页眉页脚默认去掉了;

  设置分页:在外层盒子上加上css:page-break-after:always;  

 

打印方案:

方案一:打印指定页面区域,将指定区域dom赋值给全局innerHTML,简单粗暴;但由于打印后回到页面,页面元素卡主,无法操作,需要刷新;

function printpage(id){    
    var newstr = document.getElementById(id).innerHTML;
    var oldstr = document.body.innerHTML; 
    document.body.innerHTML = newstr; 
    window.print(); 
    document.body.innerHTML = oldstr; 
    window.location.reload()  //  若不刷新,打印后页面无法操作
}

 

方案二:新开一个窗口,不会有刷新后返回页面无法操作问题,但不方便设置调试分页,布局样式之类的

const printWindow = window.open()
printWindow.document.write(document.getElementById('printDiv')).innerHTML
printWindow.print()
printWindow.close()

 

方案三:在本页面新建iframe,不会有刷新后返回页面无法操作问题;目前用的这种;

代码中打印的css 需要将之前所有是px 的单位改为 pt ,包括border;我之前设置border:1px 打印时火狐下表格的边框有的显示了,有的显示很浅;

代码中注释地方也需要注意一下

let printHtml = document.getElementById('printDiv').innerHTML
let iframe = document.createElement('iframe')

// ie下打印时,iframe会在页面中闪一下,所以设置推出屏幕外
iframe.setAttribute('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;')

let ieStr = '' // 设置ie下的样式,同样设置的字体大小为18pt,ie下打印出来显示的更大,行高也是;ie下需要设置小一点
if('ActiveXObject' in window){
    ieStr = 'HTML,body,div{font-size:13pt;}'+
                    '.lineHeight{line-height:28pt;}'
}else{
    ieStr = 'HTML,body,div{font-size:18pt;}'+
                    '.lineHeight{line-height:40pt;}'
}

// 设置样式
// 注意点:设置了浮动元素一定要清除浮动;不然打印元素排版异常;浮动元素清除了浮动还异常则不用浮动;试试display:inline-block;
let style = '<style>'+
                        ieStr+
                        '@page{margin:2cm 3cm;}'+
                        // ···
                        // ···
                        // ···
                        '</style>'

document.body.appendChild(iframe)
iframe.contentDocument.write(style+printHtml)
iframe.contentDocument.close()

// 加延时是为了解决火狐下,打印按钮点击一次没反应,需要连续点击好多下才出个弹框提示是否阻止弹框的内容出现;
iframe.contentWindow.onload = setTimeout(() =>{
    iframe.contentWindow.focus() // 兼容ie,不加这句ie默认打印还是全部的网页,不是局部创建的iframe
    iframe.contentWindow.print()
    document.body.removeChild(iframe)
},0)

下面两张图分别是 样式没完全用pt  和 完全用pt 且浏览器做兼容的对比

 批量打印

  我这里处理的比较简单粗暴,一般批量打印的数据不会太多,几十条左右,表格的一页;将要打印的几十条数据提前展示并display:none;

  然后 let printHtml = document.getElementById('批量打印的盒子').innerHTML,执行上面的打印方法;

方案四:设计复杂的打印页面建议用插件;比如打印票据,包含图片,二维码的页面;可以使用hiprint;

参考 https://github.com/alexwjj/vue-iframe-print

标签:设置,打印,页眉,iframe,print,document,ie,页面
来源: https://www.cnblogs.com/zsxblog/p/15248066.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有