Question

我安装了jsPDF，html2canvas并将这些库导入到一个组件中。

单击按钮时，它会触发一个功能，该功能应该将html文件导出为PDF文件。但这不起作用。

此外，如何使用jsPDF加载从API获取的动态数据的html文件并将其下载为PDF文件？

以下是代码： -jspdf.component.html

<div id="content" #content>

<div class="alert alert-info">
<strong>Html To PDF Conversion - Angular 7.2</strong>
</div>
<div>
<input type="button" value="CPTURE" (click)="captureScreen()"/> 
</div>
</div>
<div class="text-danger" id="contentToConvert">hi everyone</div>

jspdf.component.ts

import * as jspdf from 'jspdf'; 
import html2canvas from 'html2canvas';  


public captureScreen() {
  var data = document.getElementById('contentToConvert');
  html2canvas(data).then(canvas => {
  // Few necessary setting options  
    var imgWidth = 208;
    var pageHeight = 295;
    var imgHeight = canvas.height * imgWidth / canvas.width;
    var heightLeft = imgHeight;


  const contentDataURL = canvas.toDataURL('image/png')
  let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
  var position = 0;
  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
  pdf.save('MYPdf.pdf'); // Generated PDF   
});
}

在单击“捕获屏幕”按钮时，控制台显示错误core.js:15724 ERROR Error: Uncaught (in promise): TypeError: Cannot assign to read only property 'className' of object '[object SVGSVGElement]' TypeError: Cannot assign to read only property 'className' of object '[object SVGSVGElement]'

Answer 1

尝试这样：

new SliverFixedExtentList(
       itemExtent: 80.0,

delegate: new SliverChildBuilderDelegate(

(context, index ,{childCount:5}) => StreamBuilder<QuerySnapshot>(

stream: Firestore.instance.collection('books').orderBy('open_date')
.snapshots(),

builder: (context, snapshot) {

                        print("\n\n\n\n "+snapshot.data.documents.length.toString());
                        print("\n\n\n\n\n\n");
                      if (!snapshot.hasData) return CircularProgressIndicator();
                      else if(index<snapshot.data.documents.length){
                      return Card(
                        child: ListTile(

                          leading: child1,
                          title: Text(snapshot.data.documents[index]['title']),
                          subtitle:
                              Text(snapshot.data.documents[index]['result']),
                        ),
                      );
                      }else{
                      return Text("data");}
                    },
                  ),
            ),
          ),

如何在Angular 7.2中使用jsPDF将动态数据的html组件导出为PDF文件？

1 个答案: