js页面实现打印 iframe + window.print()

前言

最近做了一个打印功能 里面各种操蛋的需求 导致纠结了两天 功能完成之后记录一下

---

一、实现打印功能代码实现

openPrint(path) {
	let newIframe = document.createElement('iframe');
	newIframe.id = 'myIframe';
	newIframe.style.display='none'
	document.getElementById('box').appendChild(newIframe)
	// 这个地方可能出现跨域操作  '/print' 这个是配置的代理
	newIframe.src = '/print'+path+'#scrollbars=0&toolbar=0&statusbar=0';
	newIframe.onload = ()=> {
	   if (newIframe.contentWindow.matchMedia) {
	       let mediaQueryList = newIframe.contentWindow.matchMedia('print');
	       mediaQueryList.addListener( (mql)=> {
	           console.log(mql)
	           if (mql.matches) {
	               // console.log('打印之前', mql.matches)
	               this.beforePrint()
	           } else {
	               // console.log('打印之后', mql.matches)
	               this.afterPrint()
	           }
	       });
	   }
	
	   newIframe.contentWindow.onbeforeprint = this.beforePrint;
	   // newIframe.contentWindow.onafterprint = this.afterPrint;
	   newIframe.contentWindow.print();
	}
}
  beforePrint(e) {
    console.log(e)
    this.loading = false
    //开始打印
},
afterPrint(e) {
    console.log(e)
    //结束打印
},

二、使用步骤

1.获取到创建动态的iframe标签
2.设置id和样式
3.将创建的iframe 插入到body中
4.给ifrmae设置src
5.给iframe 中设置一个onload 时间 所有的操作都在这个地方监听

---

三、遇到问题记录

1.这边使用iframe 来加载pdf文件 主要是加载后使用iframe 窗口弹出打印界面用户可以少做一步操作
2.本来以为afterPrint 可以再这个方法里面获取用户点击是确定操作还是取消操作 （实际浏览器中是获取不到 打印弹框中 点击的是确认还是取消的 无法准确的统计打印次数）

3.其次是 beforePrint， afterPrint 刚开始直接再window窗口中可以监听 没啥问题 但是放到 iframe 中就不行了 这个可能是写法错了吧 。。。。 后面再用相同的写法就可以了

4.网上的一些资料中 beforePrint 是打开之前调用的 主要将其中的一些不需要打印的元素隐藏