前端 打印

 项目里要用到打印二维码（图片） 这个是网上搜到简单易懂打印功能

原文地址 前端打印功能实现（原生实现，无需导任何包）_y∩__∩y 归来的博客-CSDN博客_前端打印功能实现

原文js代码 

    printFee () {

      const printContent = document.getElementById("exportableTable");

      // window.open() 弹出窗口
      const WindowPrt = window.open('', '', 'left=500px,top=500px,width=900,height=900,toolbar=0,scrollbars=0,status=0');//弹出一个空的窗口（设置好宽高）

      // write()方法用于写入文档内容，可以传多个参数，写入的字符串会按HTML解析
      WindowPrt.document.write(printContent.innerHTML);

      // 运行document.write()，运行完后，最好手动关闭文档写入document.close()
      WindowPrt.document.close();

      //方法将焦点设置到当前窗口，也就是将窗口显示在前（靠近屏幕）
      WindowPrt.focus();

      // 调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。
      WindowPrt.print();

      // window.close()关闭浏览器窗口
      WindowPrt.close();
    }

打印功能解决了；但是打印图片时，他不能正常渲染出图片；解决方法：.write(`<img src=${}`>) 通过修改图片地址方式去渲染；----再之后，用到vue项目里；遇到新的情况；窗口打开后，打印预览窗内容为空；猜测原因是因为数据和dom不同步。类似于this.$nextTick解决的问题；解决方法窗口.onload属性(或者说是方法) 等窗口加载完成后，再显示打印预览窗口就解决了打印内容显示为空的问题

vue项目里完整代码

<el-button @click="btn"> 打印 <el-button>

methods:{
    btn(){
         let imgsrc = xxx
         const WindowPrt = window.open('', '', 'left=500px,top=500px,width=900,height=900,toolbar=0,scrollbars=0,status=0');//弹出一个空的窗口（设置好宽高）
      
          // write()方法用于写入文档内容，可以传多个参数，写入的字符串会按HTML解析
          WindowPrt.document.write(`<img src=${imgsrc}>`)

          // 运行document.write()，运行完后，最好手动关闭文档写入document.close()
          WindowPrt.document.close();

          //方法将焦点设置到当前窗口，也就是将窗口显示在前（靠近屏幕）
          WindowPrt.focus();
          WindowPrt.onload = function() {
            WindowPrt.print()
          }
    }
}