Html2canvas jspdf剪掉图片

Posted 2021-03-19

我想在我的项目中制作一个元素的pdf，但图像一直在右边被切掉，我使用jspdf和html2canvas。

这就是我想要的

这是我在pdf中得到的东西。

正如你所看到的，图像不适合正确的宽度。

我已经尝试了以下方法。

Html2Canvas图像被切割https:/tutel.mecprogrammingquestions44796908jspdf+html2canvas++html++images+cut-off+capture。https:/www.reddit.comrlearnjavascriptcommentscnn7q4anyone_experience_with_jspdf_my_image_is_cut_offhtml2canvas离屏

但是这些都不行。

这是我的代码。

const offerteId = $(e).data("id"),
              card = document.querySelector('.body-pdf-' + offerteId + ''),
              filename  = offerteId + '.pdf';

        html2canvas(card).then(function(canvas) {
            const img = canvas.toDataURL("image/png"),

            pdf = new jsPDF({
                orientation: 'p',
                unit: 'mm',
                format: 'a4',
            });

            // Optional - set properties on the document
            pdf.setProperties({
                title: offerteId.toString(),
                subject: 'Offerte: ' + offerteId.toString(),
            });

            const imgProps = pdf.getImageProperties(img);
            const pdfWidth = pdf.internal.pageSize.getWidth();
            const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

            pdf.addImage(img, 'JPEG', 0, 0, pdfWidth, pdfHeight);
            pdf.save(filename);
        });

希望有人能帮忙

答案

每次 html2canvas 改变你的元素的宽度和高度，在你的例子中，改变了 'card' 元素。

你应该使用 scale: 1和 html2Canvas 将与你在第一时间设置的宽度和高度。

const options = { scale: 1 }
html2canvas(card, options).then(function(canvas) { /*your code*/ }