vue项目前端页面导出PDF（开箱即用解决方案）

一、首先为考虑为啥用前端导出PDF？

个人看法：当客户想要页面上得内容导出PDF文件时，并且想要页面得样式。

其他情况：导出这个功能后端做更合适一些 ~

二、网上很多人用html2Canvas+jsPDF去做前端截图导出（个人发现有不少坑）

1. html2canvas不能导出文本域textarea多行内容（只能导出一行）

2. 还有黑背景等问题（网上很多）

三、直接上代码（CV试一试）

因为发现了上面html2Canvas得问题，所以我采用了dom-to-image,jsPDF 这个组合（平替方案）

yarn add dom-to-image jspdf

import domtoimage from 'dom-to-image'

import jsPDF from 'jspdf'

  // 导出
  async takeScreenshot() {
        //获取你想要导出得页面元素
    const element = this.$refs.formWrap as HTMLElement

    const options = {
      quality: 1,
      width: element.offsetWidth,
      height: element.offsetHeight
    }

    const imgData = await domtoimage.toPng(element, options)

    const pdf = new jsPDF({
      orientation: 'portrait', // 纵向
      unit: 'mm', // 单位为毫米
      format: 'a4' // A4纸张大小
    })

    // 计算需要多少页A4纸
    const pageHeight = pdf.internal.pageSize.getHeight()
    let imgHeight = (options.height * 210) / options.width
    let heightLeft = imgHeight

    let position = 0
    pdf.addImage(imgData, 'PNG', 0, position, 210, imgHeight)
    heightLeft -= pageHeight

    // 分页
    while (heightLeft >= 0) {
      position = heightLeft - imgHeight
      pdf.addPage()
      pdf.addImage(imgData, 'PNG', 0, position, 210, imgHeight)
      heightLeft -= pageHeight
    }

    pdf.save('导出得文件名字.pdf')
  }