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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue导出PDF文件,可以使用一些第三方库来实现,例如jsPDF和html2canvas。下面是一个简单的示例代码: 1. 首先,安装所需的库: ```bash npm install jspdf html2canvas ``` 2. 在Vue组件中,导入所需的库: ```javascript import jsPDF from 'jspdf'; import html2canvas from 'html2canvas'; ``` 3. 创建一个方法来处理导出PDF的逻辑: ```javascript methods: { exportAsPDF() { // 获取要导出PDF的元素 const element = document.getElementById('pdf-content'); // 使用html2canvas将元素转换为canvas html2canvas(element).then((canvas) => { const imgData = canvas.toDataURL('image/png'); // 创建一个新的jsPDF实例 const pdf = new jsPDF(); // 计算页面宽度和高度 const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); // 将canvas转换为图像添加到PDFpdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); // 保存PDF文件 pdf.save('exported.pdf'); }); } } ``` 4. 在模板中添加一个按钮,并调用导出方法: ```html <template> <div> <div id="pdf-content"> <!-- 要导出PDF的内容 --> </div> <button @click="exportAsPDF">导出PDF</button> </div> </template> ``` 确保将要导出PDF的内容包装在一个具有指定id的元素中(在上述示例中为`pdf-content`),然后单击按钮将调用`exportAsPDF`方法,将该元素导出PDF文件并保存到本地。 请注意,这只是一个简单的示例,可能需要根据实际需求进行适当的调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值