canvas2html和jsPDF-文件在导出时缩放太大

Question

我正在使用html2canvas和jsPDF将页面导出为PDF文档。由于页面内容长，我正在使用此代码来创建它：

const onExportClick = (e) => {
   e.preventDefault();
   const quotes = document.body;
   html2canvas(quotes).then(
      (canvas) => {
         //! MAKE YOUR PDF
         const pdf = new jsPDF("p", "pt", "A4");

         for (let i = 0; i <= quotes.clientHeight / 980; i++) {
            //! This is all just html2canvas stuff
            const srcImg = canvas;
            const sX = 0;
            const sY = 980 * i; // start 980 pixels down for every new page
            const sWidth = 900;
            const sHeight = 980;
            const dX = 0;
            const dY = 0;
            const dWidth = 900;
            const dHeight = 980;

            const onePageCanvas = document.createElement("canvas");
            onePageCanvas.setAttribute("width", 900);
            onePageCanvas.setAttribute("height", 980);
            const ctx = onePageCanvas.getContext("2d");
            // details on this usage of this function:
            // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
            ctx.drawImage(
               srcImg,
               sX,
               sY,
               sWidth,
               sHeight,
               dX,
               dY,
               dWidth,
               dHeight
            );

            // document.body.appendChild(canvas);
            const canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

            const width = onePageCanvas.width;
            const height = onePageCanvas.clientHeight;

            //! If we're on anything other than the first page,
            // add another page
            if (i > 0) {
               pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
            }
            //! now we declare that we're working on that page
            pdf.setPage(i + 1);
            //! now we add content to that page!
            pdf.addImage(canvasDataURL, "PNG", 0, 0, width, height);
         }
         //! after the for loop is finished running, we save the pdf.
         pdf.save("Test.pdf");
      }
   );
};

问题是文档看起来像这样（例如PDF的前两页）：

在网站上就是这样（来自PDF的前两页中的内容：

所以基本上它放大得太多了。如何使其适合PDF页面？

Answer 1

您已初始化jsPDF以将'pt'作为默认值

const pdf = new jsPDF("p", "pt", "A4");

但是您得到的图像以像素为单位。下面的代码行将宽度和高度视为pt（points]

pdf.addImage（canvasDataURL，“ PNG”，0，0，宽度，高度）;

1点= 1.333333像素1 px = 0.75点

希望这可以解决问题：

pdf.addImage(canvasDataURL, "PNG", 0, 0, width * 0.75, height * 0.75);

所以您的图像越来越大。您要做的只是将宽度/高度（以像素为单位）乘以0.75，即可得到以磅为单位的尺寸。

API参考：https://artskydj.github.io/jsPDF/docs/module-addImage.html#~addImage

参数：

width   number  
width of the image (in units declared at inception of PDF document)

height  number  
height of the Image (in units declared at inception of PDF document)

这就是我所认为的问题。也许您可以尝试一下。希望对您有所帮助！