Html2canvas jspdf剪掉图片

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

这就是我想要的

My destination

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

My current status

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

我已经尝试了以下方法。

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: 1html2Canvas 将与你在第一时间设置的宽度和高度。

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

给TA打赏
共{{data.count}}人
人已打赏
解决方案

AWS SG自我参考解析不同环境

2022-4-20 21:00:13

解决方案

Apps Script

2022-4-20 21:00:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索