Vue导出当前页面内容为图片/PDF

1、vue页面导出为pdf文件

        step1：安装依赖

npm install jspdf --save

        step2：创建工具类vueToPdf.js

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default {
  install(Vue, options) {
    Vue.prototype.getPdf = function () {
      const title = '事故报告'
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true,
        useCORS: true
      }).then(canvas => {
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        const pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        const imgWidth = 595.28
        const imgHeight = 592.28 / contentWidth * contentHeight
        const pageData = canvas.toDataURL('image/jpeg', 1.0)
        console.log('pageData', pageData)
        const 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`)
      })
    }
  }
}

        step3：全局引入操作方法

在main.js中引入工具类的getPdf方法

import vueToPdf from '@/utils/vueToPdf.js'         // 页面导出pdf

 Vue.use(vueToPdf)

        step4：使用工具类

 <div id="pdfDom">

        <div>xxxx</div>

</div>

<button @click="getPdf()">

        导出pdf

  </button>

2、vue页面导出为IMG图片

        step1：引入依赖

npm install html2canvas --save

        step2：编写工具类

// 导出页面为img
import html2Canvas from 'html2canvas'

export default {
  install(Vue, options) {
    Vue.prototype.getImg = function () {
      // 如果页面的高度和宽度超过当前屏幕需要指定长度和高度
      html2Canvas(this.$refs.imageWrapper, { width: this.artWidth, height: this.height }).then(canvas => {
        const cc = this.artWidth
        this.isShowScroll = true
        const link = document.createElement('a')
        link.href = canvas.toDataURL()
        link.setAttribute('download', 'test.png')
        link.style.display = 'none'
        document.body.appendChild(link)
        link.click()
      })
    }
  }
}

        step3：全局引用方法

import vueToImg from '@/utils/vueToImg.js' // 要么导出img

 Vue.use(vueToImg)

        step4：使用工具类

<div ref="imageWrapper">

   <div>xxxxxxxxxxxx</div>

</div>

<button @click="getImg()">

        导出图片

</button>