页面局部打印的两种方法

需求为打印页面的部分内容 常规方式 如下 但是class的样式不会被赋值 除非连style也写入html

      var page = window.open("", "_blank"); // 打开一个新窗口，用于打印
      console.log(page);
      page.document.write(printHTML); // 写入打印页面的内容
      page.print(); // 打印
      var userAgent = navigator.userAgent;
      if (
        (userAgent.indexOf("compatible") > -1 &&
          userAgent.indexOf("MSIE") > -1) ||
        userAgent.indexOf("Edge") > -1 ||
        (userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1)
      ) {
        // IE浏览器
        page.document.execCommand("print");
      } else {
        console.log("not IE");
      }
      page.close(); // 关闭打印窗口

所以需要打印比较复杂的内容时先将网页转换为canvas

npm install --save html2canvas 安装 import html2canvas from 'html2canvas' 在需要的页面 引入

          let dataURL = canvas.toDataURL("image/png");
           //var page = window.open(dataURL, "_blank");// 打开一个新窗口，用于打印
           var html = `<img src='${dataURL}'/>`
           var page = window.open("", "_blank"); // 打开一个新窗口，用于打印
           page.document.write(html);
           page.print(); // 打印
      var userAgent = navigator.userAgent;
      if (
        (userAgent.indexOf("compatible") > -1 &&
          userAgent.indexOf("MSIE") > -1) ||
        userAgent.indexOf("Edge") > -1 ||
        (userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1)
      ) {
        // IE浏览器
        page.document.execCommand("print");
      } else {
        console.log("not IE");
      }
      page.close(); // 关闭打印窗口
           
        });
    },

如上先将需要的部分转换为canvas再作为图片插入打印页面内即可