前端导出页面PDF

import html2canvas from 'html2canvas'
import { jsPDF } from 'jspdf'
import { Loading } from 'element-ui'
let downloadLoadingInstance

// 导出页面为PDF格式---使用插件html2canvas和jspdf插件
export function exportPDF(fileName, node) {
  downloadLoadingInstance = Loading.service({ text: 'データをダウンロード中です。しばらくお待ちください', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' })
  document.body.scrollTop = document.documentElement.scrollTop = 0
  var clientH = node.clientHeight
  node.style.height = node.scrollHeight + 'px'// 把要导出的元素高度设置为滚动高度

  html2canvas(node, {
    allowTaint: true,
    useCORS: true,
    backgroundColor: '#142D42', // 如果指定的div没有设置背景色会默认成黑色,这里是个坑
    y: 0,
    ignoreElements: element => {
      if (element.tagName === 'BUTTON' ||
       typeof element.className !== 'string' ||
        (typeof element.className === 'string' && element.className.includes('sidebar-container')) ||
        (typeof element.className === 'string' && element.className.includes('navbar')) ||
        (typeof element.className === 'string' && element.className.includes('tags-view-container')) ||
        (typeof element.className === 'string' && element.className.includes('operation-bar')) ||
        element.tagName === 'svg'
      ) {
        return true
      }
      return false
    }
  }).then((canvas) => {
    // 未生成pdf的html页面高度
    var leftHeight = canvas.height
    var a4Width = 576
    var a4Height = 772.89 // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
    // 一页pdf显示html页面生成的canvas高度;
    var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)
    // pdf页面偏移
    var position = 0
    var pageData = canvas.toDataURL('image/jpeg', 1.0)
    var pdf = new jsPDF('p', 'pt', 'a4') // A4纸，纵向
    // pdf.addFont('simkai-normal.ttf', 'simkai', 'normal')
    // pdf.setFont('simkai')
    // pdf.setFontSize(20)
    var canvas1 = document.createElement('canvas')
    var height
    pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')

    function createImpl(canvas) {
      if (leftHeight > 0) {
        var checkCount = 0
        if (leftHeight > a4HeightRef) {
          var i = position + a4HeightRef
          for (i = position + a4HeightRef; i >= position; i--) {
            var isWrite = true
            for (var j = 0; j < canvas.width; j++) {
              var c = canvas.
                getContext('2d').
                getImageData(j, i, 1, 1).data
              if (c[0] !== 0xff || c[1] !== 0xff || c[2] !== 0xff) {
                isWrite = false
                break
              }
            }
            if (isWrite) {
              checkCount++
              if (checkCount >= 10) {
                break
              }
            } else {
              checkCount = 0
            }
          }
          height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef)
          if (height <= 0) {
            height = a4HeightRef
          }
        } else {
          height = leftHeight
        }

        canvas1.width = canvas.width
        canvas1.height = height
        var ctx = canvas1.getContext('2d')
        ctx.drawImage(
          canvas,
          0,
          position,
          canvas.width,
          height,
          0,
          0,
          canvas.width,
          height
        )
        if (position !== 0) {
          pdf.addPage()
        }
        pdf.addImage(
          canvas1.toDataURL('image/jpeg', 1.0),
          'JPEG',
          10,
          40,
          a4Width,
          (a4Width / canvas1.width) * height
        )
        leftHeight -= height
        position += height
        if (leftHeight > 0) {
          setTimeout(createImpl, 500, canvas)
        } else {
          pdf.save(fileName + '.pdf')
          // 下载完成后改变浏览器界面可视区域高度
          node.style.height = clientH + 'px'
        }
      }
      node.style.height = 'initial'
      downloadLoadingInstance.close()
    }
    // 当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < a4HeightRef) {
      pdf.addImage(
        pageData,
        'JPEG',
        10,
        40,
        a4Width,
        (a4Width / canvas.width) * leftHeight
      )
      pdf.save(fileName + '.pdf')
      // 下载完成后改变浏览器界面可视区域高度
      node.style.height = clientH + 'px'
    } else {
      try {
        pdf.deletePage(0)
        setTimeout(createImpl, 500, canvas)
      } catch (err) {
        console.log('err', err)
      }
    }
    node.style.height = 'initial'
    downloadLoadingInstance.close()
  })
}

使用的时候直接引入

import { exportPDF } from './exportPDF'

    exportPdf() {
      if (this.drChange) {
        exportPDF(`[${this.wakuGroup.grpWkMei}]_[${this.nen}年${this.textSeason}]${this.$moment().format('YYYYMMDDHHmmss')}`, this.$refs.collapse.$el)
      } else {
        exportPDF(`[${this.wakuGroup.grpWkMei}]_[${this.nen}年${this.textSeason}]_${this.$moment().format('YYYYMMDDHHmmss')}`, this.$refs.collapse.$el)
      }
    },