jsPDF fromHTML in Angular: addImage does not support files of type 'UNKNOWN'

user_4275425 0
Viewed 1376

I know there are other issues with the error "addImage does not support files of type 'UNKNOWN'", but the difference is that I'm not using addImage directly, but fromHTML to convert an HTML that contains images in an Angular 5+ app.

Curiosly, the images by themselves are not the problem, because they are successfully converted to PDF in this fiddle which uses simple jQUery instead of Angular. So the problem lays in the NPM version of the jsPDF code. Maybe that version of the code does not support images in formats other than PNG?

In this particular case, I don't have control over the images, I only need grab the HTML section and convert it to PDF.

The error message is:

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)

The TS code is:

    @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>
jspdf
0 Answers
Related