vue+iframe实现打印效果

当第一次项目需要用到打印的时候，内心慌的一批，赶紧百度看有没有好的办法，结果不尽人意。比如：有的需要转PDF再进行打印，有的需要引用插件，而且也没有明确的文档，有的用js代码实现，但是页面点击的功能会失效等等....
无意之中发现了一个可以满足需求的解决方法用：
vue+iframe
在vue的html部分中我们先使用一个iframe标签引入需要打印的页面，如：

<iframe id="frame" src="./static/html/preview.html" frameborder="0" ref="iframe" style="display: none;"></iframe>

我们先将vue中需要准备什么
vue文件要将处理的数据传给preview.html中，要监听数据的变动：

window.addEventListener('message', this.handleMessage);//mounted钩子函数中
this.iframeWin = this.$refs.iframe.contentWindow; //获取iframe

handleMessage (event) {
            // 根据上面制定的结构来解析iframe内部发回来的数据
            const data = event.data;
            console.log('vue文件接收的数据',data);
            if(data.cmd=='success'){//自己定义一个判断是否正常
              this.state='ok';
            }
          }

printing(item){//点击打印
         let iframe = document.getElementById('frame');//获取iframe标签相当于获取了打印的区域了
            this.iframeWin.postMessage({
              cmd:'getFormJson',
              info:{//做一下数据处理 然后存到自定义的info字段里方便获取,
                      fontsize:this.font_size,
                   },
            },'*');
            setTimeout((res)=>{
              if(this.state=='ok'){
                iframe.contentWindow.print();//打印iframe的html页面
              }
            },500)
          },

截止到上面的都是在vue中给iframe传的数据以及监听当前页面的信息，将最新的数据传给html文件

下面说iframe中引用的html文件如何处理：

window.onload =function(){
    window.addEventListener("message", function(event){//自己定义的一个监听的message
      let data = event.data;//event  是vue文件中把已经处理好的数据传过来的
      if(data.cmd=='getFormJson'){//数据类型，对应的字段都可以自己定义
        let meetname = document.getElementById('meetname');//获取html页面中容器
        let con='';
        let fontsize=data.info.fontsize;//获取自己在info定义的数据
          data.params.map((item)=>{
           con+='<div style="font-size:'+fontsize+'px; class="pages" ></div>'
          });
          meetname.innerHTML = con;
        window.parent.postMessage({
          cmd: 'success',//收到数据以后给vue传的成功标志
          params: {
            success: true,
          }
        }, '*');
      }
    });
  }

好了，这样就完成了。希望能有帮助~ ~ ~

最后编辑于：2019.01.08 18:44:18