插件-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下载,还能定制不同的样式