vue pc使用htmlCanvas Jspdf 实现点击将页面生成图片并转成pdf下载

<template>
  <div id="main" ref="workbench" v-loading="loading" class="echartsPdf">
　　  需要的内容
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import Jspdf from 'jspdf'
export default {
  name: 'ReportDetail',
  directives: {},
  data() {
    return {
    }
  },
  watch: {
  },
  mounted() {
  },
  created() {
    this.$nextTick(async() => {
      await this.initAxis()
    })
  },
  beforeDestroy() {
    // cleartimeout(this.timer)
  },
  methods: {
    // 避免分页被截断
    outPutPdfFn() {
      const vm = this
      const A4_WIDTH = 592.28
      const A4_HEIGHT = 841.89
      // $myLoading 自定义等待动画组件，实现导出事件的异步等待交互
      vm.$nextTick(() => {
        // dom的id。
        const target = document.getElementById('main')
        const pageHeight = target.scrollWidth / A4_WIDTH * A4_HEIGHT
        // 获取分割dom，此处为class类名为item的dom
        const lableListID = document.getElementsByClassName('echartsSection')
        // 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割
        for (let i = 0; i < lableListID.length; i++) {
          const multiple = Math.ceil((lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight)
          if (this.isSplit1(lableListID, i, multiple * pageHeight)) {
            const divParent = lableListID[i].parentNode // 获取该div的父节点
            const newNode = document.createElement('div')
            newNode.className = 'emptyDiv'
            newNode.style.background = '#01195e'
            const _H = multiple * pageHeight - (lableListID[i].offsetTop + lableListID[i].offsetHeight)
            newNode.style.height = _H + 30 + 'px'
            newNode.style.width = '100%'
            const next = lableListID[i].nextSibling // 获取div的下一个兄弟节点
            // 判断兄弟节点是否存在
            console.log(next)
            if (next) {
              // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
              divParent.insertBefore(newNode, next)
            } else {
              // 不存在则直接添加到最后,appendChild默认添加到divParent的最后
              divParent.appendChild(newNode)
            }
          }
        }
　　　　　　// 页面转换下载
        this.pdf1()
      })
    },
    // 判断是否需要添加空白div
    isSplit1(nodes, index, pageHeight) {
      // 计算当前这块dom是否跨越了a4大小，以此分割
      if (nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight) {
        return true
      }
      return false
    },
    pdf1() {
      // 避免出现浏览器滚动条导致的内容不全处理
      document.body.scrollTop = 0
      // div内部滚动导致内容不全处理
      const that = this
      document.getElementById('app').style.height = 'auto'
      setTimeout(() => {
        html2canvas(document.getElementById('main'), {
          background: '#01195e',
          allowTaint: true
          // height: document.getElementById('upload').scrollHeight,
          // windowHeight: document.getElementById('upload').scrollHeight
        }).then(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
          var imgHeight = 592.28 / contentWidth * contentHeight

          var pageData = canvas.toDataURL('image/jpeg', 1.0)

          var pdf = new Jspdf('', 'pt', 'a4')

          // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          // 当内容未超过pdf一页显示的范围，无需分页
          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(`${that.rowInfo.reportName}.pdf`)
        })
      }, 300)
    },

    handleChange() {},
    async initAxis() {
      this.loading = true
      const that = this
      this.timer = setTimeout(() => {
        that.outPutPdfFn()
      }, 8 * 1000)
    }
  }
}
</script>
<style scoped></style>