纯前端导出pdf

纯前端逻辑导出pdf文件

方法有很多，这里引用下面两个依赖完成转换：

// 页面转图片
import Html2canvas from 'html2canvas'
// 图片转pdf
import JsPDF from 'jspdf'

html页面转canvas图片：

exportResport () {
  document.documentElement.scrollTop = 0
  // 生成canvas上下文
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  const domHtml = document.getElementById('id')
  // 获取需要导出pdf区域的宽度和高度
  const domW = domHtml.offsetWidth
  let domH = domHtml.offsetHeight
  const scale = 3

  if (domW > domH) {
    domH = domW
  }

  canvas.width = domW * scale + 120
  canvas.height = domH * scale + 120
  context.scale(scale, scale)

  const opts = {
    scale: 1,
    width: domW + 120, // dom 原始宽度
    height: domH + 120,
    x: -20,
    y: -20,
    canvas: canvas,
    useCORS: true, // 允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
  }

  // 以上部分都是为了强化清晰度的，放大canvas画布
  Html2canvas(domHtml, opts).then(canvas => {
    this.savePdf(canvas, scale)
  })
}

图片转pdf保存导出：

/**
* @description 自定义宽高导出
* @param canvas 导出内容转换后的图片
* @param scale 图片缩放大小
*/
savePdf (canvas, scale) {
 const contentWidth = canvas.width / scale
 const contentHeight = canvas.height / scale

 // 自定义宽高
 const pdf = new JsPDF('', 'pt', [contentWidth, contentHeight])
 // 转换图片为dataURL
 const pageData = canvas.toDataURL('image/jpeg', 1.0)

 // 添加图像到页面
 pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight)
 pdf.save('文件名称.pdf')
}