插件-jsPDF
本节内容介绍:
JsPDF:将html内容转换成PDF格式进行下载 可以参照
重点:解决图片转换成pdf之后 图片变形 缩放有问题
js语言环境:angular
代码实现:
html:
js:
exportPDF(){ this.spinner.show() html2canvas(document.querySelector("#mainContentData"),{ allowTaint:true }).then(canvas => { var contentWidth = canvas.width; var contentHeight = canvas.height; var pageHeight = contentWidth / 592.28 * 841.89; var leftHeight = contentHeight; var position = 0; var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('p', 'pt', 'a4'); if(leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth,imgHeight); } else { while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position,imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; if(leftHeight > 0) { pdf.addPage(); } } } let pdfName = this.pateintPK + "-detail-"+moment().format("YYYYMMDDHHmmss") +".pdf" pdf.save(pdfName); }) }
2、npm:
jspdf-autotable 将html数据转换成pdf下载,还能定制不同的样式