jsPDF и html2canvas изображение сжаты? - PullRequest
Новая
       83

jsPDF и html2canvas изображение сжаты?

0 голосов
/ 24 февраля 2020

В настоящее время я пытаюсь создать PDF-файл div на моем веб-сайте. У меня есть базовая функциональность c; однако, когда я загружаю 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

Любые идеи о том, как я могу это исправить, очень ценятся. Спасибо!

1 Ответ

0 голосов
/ 24 февраля 2020

Я не проверял это, но вы можете попробовать указать ширину и высоту. Потому что просто кажется, что 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);
});
...