html2canvas / jspdf剪切图像

时间:2019-12-03 14:42:34

标签: javascript image pdf jspdf html2canvas

我想在项目中制作一个pdf格式的图片,但是图像在右侧一直被截断。 我使用jspdf和html2canvas

这就是我想要的

My destination

这就是我从pdf中获得的信息:

My current status

如您所见,图像尺寸不合适。

我尝试了以下方法:

Html2Canvas image is getting cut https://tutel.me/c/programming/questions/44796908/jspdf+html2canvas++html++images+cut+off+capture https://www.reddit.com/r/learnjavascript/comments/cnn7q4/anyone_experience_with_jspdf_my_image_is_cut_off/ html2canvas offscreen

但是这些都不起作用。

这是我的代码:

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

希望有人可以提供帮助

3 个答案:

答案 0 :(得分:2)

我今天遇到了类似的问题。我绕过它的方式是因为你在官方 github 上提出的一个问题:https://github.com/eKoopmans/html2pdf.js/issues/39

通过在将页面呈现为 PDF 之前将 html 和 body 标签的宽度设置为 794px,页面可以很好地适应宽度。它对我有用,所以对我来说已经足够了,尽管它可能不是正确的答案。

答案 1 :(得分:1)

当 html2canvas 渲染图像时,它会将捕获限制在屏幕的可见区域。然后,唯一对我有用的是将以下代码添加到我的 css 中。

.html2canvas-container { 
    width: 3000px; 
    height: 3000px; 
}

此样式代码用于防止 html2canvas 将渲染限制在可视区域。

答案 2 :(得分:0)

每次html2canvas都会更改元素的宽度和高度,在这种情况下,请更改'card'元素。

您应该使用scale: 1html2Canvas的宽度和高度将是您最初设置的宽度。

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