AngularHTML中的jsPDF fromHTML:addImage不支持'UNKNOWN'类型的文件

时间:2019-01-16 07:53:53

标签: jspdf

我知道错误“ addImage不支持'UNKNOWN'类型的文件”还有其他问题,但是区别是我不是直接使用addImage,而是fromHTML来转换包含Angular图像的HTML 5个以上的应用。

通常,图像本身不是问题,因为在使用简单jQUery而不是Angular的fiddle 中已将图像成功转换为PDF。因此,问题出在jsPDF代码的NPM版本。也许该版本的代码不支持PNG以外的其他格式的图片?

在这种情况下,我无法控制图像,只需要抓取HTML部分并将其转换为PDF。

错误消息是:

ERROR Error: addImage does not support files of type 'UNKNOWN', please ensure that a plugin for 'UNKNOWN' support is added.
    at Object.x.addImage (jspdf.min.js:50)
    at k (jspdf.min.js:202)
    at jspdf.min.js:202
    at l (jspdf.min.js:202)
    at Image.i.onerror.i.onload (jspdf.min.js:202)
    at Image.wrapFn (zone.js:1188)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:16147)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) 

TS代码为:

    @ViewChild('content') recipeView: ElementRef;

    downloadPDF() {
        const doc = new jsPDF();

        const specialElementHandlers = {
            '#editor': function (element, renderer) {
                return true;
            }
        };

        const content = this.recipeView.nativeElement;

        doc.fromHTML(content, 15, 15, {
            'width': 190,
            'elementHandlers': specialElementHandlers
        }, (dispose) => {
            doc.save('test.pdf');
        });
    }
<div class="row" #content>

    <h1>The Title</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos, modi dolores? Aliquam cum fuga vero velit! Vel
        temporibus natus quasi accusantium! Recusandae quaerat qui exercitationem, debitis omnis deserunt dolorem non.</p>
    <br />
    <img src="http://a5.mzstatic.com/eu/r30/Purple3/v4/3d/57/31/3d573127-31d5-e4a9-9f8e-986c4616d467/icon175x175.png"
        alt="" width="175" height="175">
    <img src="https://http2.mlstatic.com/corte-para-hallacas-produccion-nacional-60-unidades-para-60-D_NQ_NP_869908-MLA25589543992_052017-F.webp"
        alt="" width="175" height="175">
    <img src="https://4.bp.blogspot.com/-C-PxcAwhHXo/WlWDzAmHB7I/AAAAAAAAG8k/hblgAA_HrIIYW_VPzVNuXb7ZjFnxKpduwCLcBGAs/s1600/como-hacer-empanadas-venezolanas.jpg"
        alt="" width="175" height="175">
    <br />
</div>

<button class="btn" (click)="downloadPDF()">PDF</button>

0 个答案:

没有答案