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方法给我的错误是：

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

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');

Angular 5中的JsPDF addImage（）方法

1 个答案: