jsPDF 和 html2canvas 圖像被壓扁了？

Question

我目前正在嘗試在我的網站上生成一個 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

非常感謝我如何解決這個問題的任何想法。 謝謝！

Answer 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);
});