Vue的打印pdf+导入导出

<template>
      <el-dialog title="上传列表" :close-on-click-modal="false" :visible.sync="showImport" :append-to-body="true" width="40%">
      <div class="upload" style="width: 100%">
        <div class="inputType">
          <el-form :inline="true">
            <el-form-item label="选择文件">
              <div v-if="addName.length === 0" class="iptHandle">
                <el-input v-if="addName.length === 0" placeholder="点击此处选择文件" />
                <input ref="file" name="file" type="file" onmouseover="this.title=''" @change="getFile()">
              </div>
              <el-input v-else v-model="addName" clearable />
              <el-button type="primary" @click="upload">上传</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="submit">
          <el-button type="primary" round class="del" @click="close()">返 回</el-button>
        </div>
      </div>
    </el-dialog>
</template>
<script>
import JsPDF from 'jspdf'
import html2canvas from 'html2canvas'

export default {
  methods: {
    edit() { // 打印PDF
      this.isPrint = true
      this.$nextTick(() => {
        let that = this
        html2canvas(document.querySelector('#print')).then(canvas => {
          that.isPrint = false
          let contentWidth = canvas.width
          let contentHeight = canvas.height
          let pageHeight = contentWidth / 592.28 * 841.89
          let leftHeight = contentHeight
          let position = 0
          let imgWidth = 595.28
          let imgHeight = 592.28 / contentWidth * contentHeight
          let pageData = canvas.toDataURL('image/jpeg', 1.0)
          let 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('主档信息汇总.pdf')
        })
      })
    },
    getFile() { // 导入
      const file = this.$refs.file.files
      const imgName = file[0].name
      const idx = imgName.lastIndexOf('.')
      if (idx !== -1) {
        let ext = imgName.substr(idx + 1).toUpperCase()
        ext = ext.toLowerCase()
        if (ext !== 'xlsx' && ext !== 'xls') {
          this.$message.warning('请选择xlsx/xls表格类型')
          // return
        } else {
          this.addName = file[0].name
          this.xlsxFile = file[0]
        }
      }
    },
    upload() {
      if (this.addName === '' || this.xlsxFile === '') {
        this.$message.error('请先添加文件')
        return
      }
      const formData = new FormData()
      formData.append('file', this.xlsxFile)
      this.$store.dispatch('dataInit/importList', formData)
    },
    reportExport(api, params, title) { // 导出
      const tokenLSI = new SessionStorageItem({ fieldName: 'token' })
      return fetch(api, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': tokenLSI.get()
        },
        body: JSON.stringify(params)
      }).then(response => {
        response.blob().then((res) => {
          const link = document.createElement('a')
          const blob = new Blob([res])
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          link.download = `${title}_` + dayjs().format('YYYYMMDD') + '.xlsx' // 下载后文件名
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
      })
    }
  }
}
</script>