Как определить размер холста для jsPDF - PullRequest
Новая
       10

Как определить размер холста для jsPDF

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

Я работаю в chrome с JSPDF в реакции. Я делаю холст, а затем пытаюсь разместить 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, который я получу для справки enter image description here

1 Ответ

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

Размеры вашего изображения - 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

и объявить размер холста одинаковым (ie, где бы ни объявлен элемент canvas html, установите его как <canvas id="myCanvas" width="600" height="800"></canvas>).

...