html2canvas+pdfjs 打印html

项目中需要将页面中的某个功能块进行打印。

思路：使用html2canvas将html转化成图片，打印这个图片

遇到的问题： 打印图片的时候，出现模糊的问题，进行scale放大,导致打印的整体变大

解决办法：

出现模糊的问题： 设置scale值，

导致打印的整体变大：对imageStyle进行设置

     const printArea = document.getElementById("print-area");
        const canvas = await html2canvas(printArea, {
          useCORS: true,
          allowTaint: true,
          scale: 8,
        });
        const imgSrc = canvas.toDataURL("image/png");
        printJS({
          printable: imgSrc,
          type: "image",
          documentTitle: "--",
          base64: "true",
          imageStyle: `width:${printArea.offsetWidth}px;height:${printArea.offsetHeight}px;`
        });

效果图：

实际打印：