jsPDF 和 html2canvas 图像被压扁了？答案

【问题标题】：jsPDF and html2canvas image squished?jsPDF 和 html2canvas 图像被压扁了？
【发布时间】：2023-08-04 17:29:01
【问题描述】：

我目前正在尝试在我的网站上生成一个 div 的 PDF。我已经完成了基本功能；但是，当我下载 PDF 时，我的 div 的内容会被挤压和拉伸，而不是与我的网站完全匹配。附件是我正在使用的代码以及 PDF 和网站的屏幕截图：

<link rel="stylesheet" href="/stylesheets/style.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans&display=swap" rel="stylesheet">

<div class="header" id="nodeToRenderAsPDF" style="padding: 150px 0 150px 0">
    <h2><%=companyName%>, your PDF will begin downloading!</h2>
    <p>Thanks for submitting your information. We hope you enjoy!</p>
    <button id="pdfDownloadButton">Download PDF</button>
    <a href="javascript:print()">Download PDF</a>
</div>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="/javascripts/js.js"></script>
<script src="/javascripts/jspdf.min.js"></script>
<script src="/javascripts/html2canvas.min.js"></script>

...和 JS：

function print(quality = 2) {
    const filename  = 'ThisIsYourPDFFilename.pdf';

    html2canvas(document.querySelector('#nodeToRenderAsPDF'), 
                            {scale: quality}
                     ).then(canvas => {
        let pdf = new jsPDF('p', 'mm');
        pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298);
        pdf.save(filename);
    });
}

$("#pdfDownloadButton").on("click", print);

还有一些截图：

https://imgur.com/a/h1a8sKl

非常感谢我如何解决此问题的任何想法。谢谢！

【问题讨论】：

标签： javascript html jspdf html2canvas

【解决方案1】：

我没有对此进行测试，但您可以尝试指定宽度和高度。因为似乎 div 不适合 pdf 页面。 div 的宽度比 pdf 文档的标准大小要高。让我知道这是否有帮助。

html2canvas(document.querySelector('#nodeToRenderAsPDF', {
  width: 1200,
  height: 400
}).then(function(canvas) {
  let pdf = new jsPDF('p', 'mm');
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298);
  pdf.save(filename);
});

【讨论】：