jsPDF fromHTML на Angular: addImage не поддерживает файлы типа «НЕИЗВЕСТНО» - PullRequest
Новая
       122

jsPDF fromHTML на Angular: addImage не поддерживает файлы типа «НЕИЗВЕСТНО»

0 голосов
/ 16 января 2019

Я знаю, что есть другие проблемы с ошибкой «addImage не поддерживает файлы типа« НЕИЗВЕСТНО », но разница в том, что я не использую addImage напрямую, а из HTML для преобразования HTML-кода, содержащего изображения в Angular 5+ приложение.

Любопытно, что сами по себе изображения не являются проблемой, потому что они успешно конвертируются в PDF в этой скрипке , которая использует простой jQUery вместо Angular. Таким образом, проблема заключается в версии кода 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>
...