typescript PDF不显示图像：html2pdf库

y1aodyip 于 2023-06-24 发布在 TypeScript

关注(0)|答案(3)|浏览(170)

我使用Angular 5和html2pdf库来帮助创建pdf文件。https://github.com/eKoopmans/html2pdf
这是我的Angular方法。

var element = document.getElementById('document');
var opt = {
    margin:       [10, 0, 10, 0],
    filename:     `document.pdf`,
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2, useCORS: true },
    jsPDF:        { unit: 'mm', format: 'letter', orientation: 'portrait' }
};
html2pdf().from(element).set(opt).save();

导出pdf后，我无法从网上看到任何图像，但它显示本地存储的图像。这是一个在线图像的例子。https://s3.amazonaws.com/images.anterasoftware.com/5b6c5886622d5Screen_Shot_2018-06-27_at_10.37.03_AM.png
请帮忙，问候。

typescript

来源：https://stackoverflow.com/questions/51791583/pdf-does-not-show-images-html2pdf-library

3条答案

按热度按时间

zzlelutf1#

我看到你在他们的github上开了一期。我梳理了其他问题，看到有人和你有类似问题。这里有3或4个建议的解决方案，但我认为最有希望的是将jpeg改为jpg，因为html canvas不支持。下面是Github的相关问题。https://github.com/eKoopmans/html2pdf/issues/105

赞(0）回复(0）举报 2023-06-24

dm7nw8vv2#

在Angular中，它在这样做之后为我工作...

1.add crossorigin="*" in img tag
2.add {useCORS: true} in html2canvas like 
html2canvas(document.querySelector('#pdf'), {useCORS: true})

赞(0）回复(0）举报 2023-06-24

b4lqfgs43#

我通过CORS设置解决了这个问题

exportToPDF() {
        var opt = {
            margin: 0,
            filename: 'time_sheet_report.pdf',
            image: { type: 'jpeg', quality: 0.20 },
            html2canvas: { scale: 2,useCORS: true },
            jsPDF: { unit: 'in', format: 'a4', orientation: 'p' }
        };

        html2pdf().set(opt).from(this.$refs.document).save();
}

赞(0）回复(0）举报 2023-06-24

我来回答

typescript PDF不显示图像：html2pdf库

3条答案

相关问题

热门标签

最新问答