通过html2canvas + jspdf实现导出成pdf （支持分页）

1. 安装html2canvas jspdf不多说         

npm install --save html2canvas

npm install html2canvas --save

2. 引入
   

import html2Canvas from "html2canvas"

import JsPDF from "jspdf"

3.封装方法

        

//导出成pdf
export async function exportPdf(ele,option,callBack){
  store.dispatch('setLoading', true)
  //通过接口图片转换为base64
  await imgToBase64(ele)
  html2Canvas(ele, {
    allowTaint: true,
    useCORS:true,
    ...option
  }).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')
    console.log(leftHeight)
    console.log(pageHeight)
    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(option.name || '导出pdf' + '.pdf')
    if(option.isRemove){
      ele.remove()
    }
    store.dispatch('setLoading', false)
    callBack && callBack()
  })
}

4.建议求后端给个图片转base64的接口来解决图片跨域

       

//img转成base64
export function imgToBase64(ele){
  //由于网络图片设置到图片跨域问题，通过接口转换成base64
  return new Promise((resolve) => {
    let imgs = ele.getElementsByTagName('img')
    if(imgs.length <= 0){
      resolve(true)
    } else {
      let index = 0
      imgs.forEach(item => {
        encodeImageToBase64({file:item.src}).then(res=>{
          if(res.code == 200 && res.data){
            item.src = res.data
            index ++ 
            if(index >= imgs.length){
              resolve(true)
            }
          }
        })
      });
    }
  })
}

5.效果