js实现浏览器的打印功能——路径打印

或多或少在前端页面开发的过程中会遇到一些网页需要这样的功能——打印页面，没错，就是页面打印，那个window.print的功能，但是怎么才能写一个又好用又不会有太多问题和性能的打印用能的，那个他来了（引用了element-ui的消息提示组件$message做消息提示）

printReport () {
      if (!this.reportUrl) { // 用来判断打印的地址是否存在，你们随意,我的是业务需要
        this.$message.error('等待报告加载完成，请稍后重试')
      }
      this.$message.warning('正在唤起打印服务请稍等'); // 自己的提示语，你们随便
      if (this.reportStart) return;
      this.reportStart = true;
      var iframe = window.document.createElement('iframe');
      try {
        iframe.id = 'print_iframe';
        iframe.style = "position: absolute;top: 0;left: 0;z-index:-1;display:none";
        document.body.appendChild(iframe);
        let ifr = window.frames["print_iframe"].contentDocument;
        let ifrImage = window.document.createElement('img');
        ifrImage.src = this.reportUrl;
        ifr.body.style = "margin:0px"
        ifr.body.append(ifrImage);
        let ifrImageObj = new Image();
        ifrImageObj.src = this.reportUrl;
        ifrImageObj.onload = () => {
          window.frames["print_iframe"].contentWindow.print();
          document.body.removeChild(window.frames["print_iframe"]);  //打印之后记得移除dom,避免内存溢出
          this.reportStart = false;
        }
      } catch (error) {
        iframe.setAttribute("id", "print_iframe");
        iframe.setAttribute("style", "position: absolute;top: 0;left: 0;z-index:9999;display:none");
        window.document.body.appendChild(iframe);
        let ifr = window.frames["print_iframe"].contentWindow || window.frames["print_iframe"];
        let ifrImage = window.document.createElement('img');
        ifrImage.src = this.reportUrl;
        ifr.document.body.setAttribute("style", "margin:0px;size: portrait;");
        ifr.document.body.appendChild(ifrImage);
        let ifrImageObj = new Image();
        ifrImageObj.src = this.reportUrl;
        ifrImageObj.onload = () => {
          ifr.window.focus();
          ifr.window.print();
          window.document.body.removeChild(document.getElementById('print_iframe'));
          this.reportStart = false;
        }
      }
    }

结束语：关注我，少走弯路!