Angular 5 addImage() 方法中的 JsPDF

Question

我正在使用 jspdf 库将我的 html 转换为 pdf

html：

 <div *ngFor="let person of people"
             {{person.name}}
            <button (click) = "generatePdf()"></button>
         </div>

         <div id="contentForPdf" style="display:none">
            <div *ngFor="let person of people">
                {{person.address}}
            </div>
     </div>

在组件中：

public generatePdf():void{
              const data = document.getElementById('contentForPDF');
                 html2canvas(data).then(canvas => {
                   const imgWidth = 300;
                   const pageHeight = 295;
                   const imgHeight = (canvas.height * imgWidth) / canvas.width;
                   const heightLeft = imgHeight;
                   const contentDataURL = canvas.toDataURL('image/png');
                   const pdf = new jsPDF('p', 'mm', 'a4');
                   const position = 0;
                   pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth,imgHeight);
                   pdf.save(name);
                   }

并且由于显示没有 addImage 方法给我错误：

1. 错误：未捕获（承诺中）：错误：addImage 不支持文件 'UNKNOWN' 类型的，请确保支持 'UNKNOWN' 的插件 被添加。错误：addImage 不支持“未知”类型的文件， 请确保添加了支持“未知”的插件。

Answer 1

你可以这样做：

 <script type="text/javascript" src="libs/png_support/zlib.js"></script>
    <script type="text/javascript" src="libs/png_support/png.js"></script>
    <script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
    <script type="text/javascript" src="jspdf.plugin.png_support.js"></script>
    <script type="text/javascript" src="jspdf.js"></script>

TS

   const doc = new jsPDF();
   const imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABy...
    doc.addImage(imgData, 'PNG', 50, 50, 50, 50);
    doc.output('pdf-img');