如何为 jsPDF 调整画布大小答案

【问题标题】：How to size a canvas for jsPDF如何为 jsPDF 调整画布大小
【发布时间】：2020-05-27 09:36:27
【问题描述】：

我在 chrome 中使用 jsPDF 在 react 中工作。我正在制作一个画布，然后尝试将我的网站的 png 图像放在该画布上并将其下载为 pdf。该过程有效，但图像显得拉伸。我尝试手动更改画布的大小并更改放置在画布上的图像的尺寸，但这似乎对最终的 pdf 没有影响。

在谁能提供一些指导之前，有没有人处理过这个烦人的问题？谢谢:)

创建 pdf 的代码：

downloadPdf = (quality = 2) => {
        const filename  = 'ThisIsYourPDFFilename.pdf';

        html2canvas(document.querySelector('#nodeToRenderAsPDF'), 
                                {scale: quality}
                         ).then(canvas => {
            let pdf = new jsPDF('p', 'px', 'a4'); 
            pdf.height="600"
            pdf.width= "800" //this is the canvas resolution
            pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 450, 500); //this is the image resolution
            pdf.save(filename);
        });
    }

我还将包含我获得的最终 PDF 以供参考

【问题讨论】：

标签： javascript reactjs png jspdf

【解决方案1】：

您的图片尺寸为 450 x 500，但您的 pdf 尺寸为 600 x 800。 450 / 500 = .9 = 90% 和 600 / 800 = .75 = 75%，因此您的图像在从一种纵横比转换为另一种纵横比时会显得拉伸。如果我是你，我会选择一套尺码并坚持下去。 600 x 800 似乎是合理的，所以尝试将最后一行更改为：

pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 600, 800); //this is the image resolution

并声明您的画布大小相同（即，无论在何处声明该 canvas html 元素，都将其设置为 <canvas id="myCanvas" width="600" height="800"></canvas>）。

【讨论】：