我知道错误“ 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>