html2canvas+jspdf导出PDF 2个版本

jsPDF+html2canvas实现html导出PDF和打印

html版本

• 引入html2canvas.min.js和html2canvas.min.js

  <script src="path/html2canvas.min.js"></script>
  <script src="path/jspdf.debug.js"></script>
  

• 导出核心代码

  /**
   * 导出/下载方法
   *
   * @param fileName 文件名称
   * @param target 导出的dom元素
   * @param isDownloadOrPrint true下载/false打印
   */
  function download_html_pdf(fileName,target,isDownloadOrPrint){
      let paddingLR = 20;//左右边距
      let paddingTop = 20;//第一页上边距
      const index = layer.msg('开始生成PDF中...请稍后！', {
          icon: 16
          , shade: 0.01
          , time: false
      });
      fileName +=".pdf"
  
      // 解决背景黑色问题，根据业务需要处理要导出的dom元素样式
      $(target).css({'background':'#FFFFFF'})
      //  转PDF
      html2canvas(target, {
          onrendered: function(canvas) {
              var contentWidth = canvas.width;
              var contentHeight = canvas.height;
              //  一页pdf显示html页面生成的canvas高度;
              var pageHeight = contentWidth / 592.28 * 841.89;
              //  未生成pdf的html页面高度
              var leftHeight = contentHeight;
              //  页面偏移
              var position = 0;
              //  a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
              var imgWidth = 595.28-paddingLR;
              var imgHeight = (592.28-paddingLR)/contentWidth * contentHeight;
              var pageData = canvas.toDataURL('image/jpeg', 1.0);
              //  l表示横版，p：纵向 （默认纵向）
              var pdf = new jsPDF('', 'pt', 'a4');
              //  有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
              //  当内容未超过pdf一页显示的范围，无需分页
              if (leftHeight < pageHeight) {
                pdf.addImage(pageData,'JPEG',paddingLR,paddingTop,imgWidth,imgHeight);
              } else {
                  while (leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', paddingLR, position+paddingTop, imgWidth, imgHeight);
                      leftHeight -= pageHeight;
                      position -= 841.89;
                      //避免添加空白页
                      if (leftHeight > 0) {
                          pdf.addPage();
                      }
                  }
              }
              // 1.本地下载
            	// 由于业务需要 保存成功需要跳转页面
              new Promise(function (resolve, reject){
                  if (isDownloadOrPrint == 'true'){
                      pdf.save(fileName)
                      resolve()
                  }else {
                      const link = window.URL.createObjectURL(pdf.output('blob'));
                      let myWindow = window.open(link);
                      myWindow.print();
                      resolve()
                  }
              }).then(function (){
                  window.history.go(-1)
              })
  
          }
      })
      layer.close(index)
  }
  
  

VUe版本

• 安装依赖

  npm install html2canvas
  npm install jspdf
  

• 创建文件exportPdf.js，内容如下

  // 导出页面为PDF格式
  import html2Canvas from 'html2canvas'
  import JsPDF from 'jspdf'
  export default {
      install(Vue, options) {
          Vue.prototype.getPdf = function (name, id) {
              let title = name || 'index'
              html2Canvas(document.querySelector(`#${id}`), {
                  allowTaint: true,
                  taintTest: false,
                  useCORS: true,
                  dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍
                  scale:4 //按比例增加分辨率
              }).then(function (canvas) {
                  let contentWidth = canvas.width
                  let contentHeight = canvas.height
                  let pageHeight = contentWidth / 592.28 * 841.89
                  let leftHeight = contentHeight
                  let position = 0
                  let imgWidth = 595.28
                  let imgHeight = 592.28 / contentWidth * contentHeight
                  let pageData = canvas.toDataURL('image/jpeg', 1.0)
                  let PDF = new JsPDF('', '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()
                          }
                      }
                  }
                  PDF.save(title + '.pdf')
              }
              )
          }
      }
  }
  

• main.js全局引入，也可以按需局部引入

  import htmlToPdf from '@/utils/exportPdf' // 创建的exportPdf.js路径 按需修改
  Vue.use(htmlToPdf)
  

• 使用

  // arg1 导出的文件名称  arg2 dom节点id
  this.getPdf('filename', "pdfDom");
  

  参考：地址