Vue和element中关于PDF的下载

最新推荐文章于 2024-04-25 16:26:40 发布

小仙有礼了

最新推荐文章于 2024-04-25 16:26:40 发布

阅读量343

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/CFXXXL/article/details/122867696

版权

Vue 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了如何在前端表格中展示保单号并实现点击下载功能，同时展示了如何通过e-policy-file-download-mixin.js进行Base64字符串转换为PDF文件的过程。涉及的技术包括Vue组件、axios调用、Base64编码和File-Saver库的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <el-table-column label="保单号" show-overflow-tooltip min-width="220">
              <template slot-scope="scope">
                <span>{{ scope.row.policyNoCI }}</span>
                <span v-if="scope.row.policyNoCI" :key="scope.row.policyNoCI" class="link-type" @click="download(scope.row.policyNoCI)">下载</span>
              </template>
            </el-table-column>

js文件的写法

 import { ePolicyFileDownloadMixin } from '@/views/tool/policy-download/mixin/e-policy-file-download-mixin'
export default {
    name: 'HistoryProposal',
    mixins: [ ePolicyFileDownloadMixin],
 methods: {
  download(VISACODE) {
        const params = {
          KEY: 'getEpolicyFile',
          VISACODE,
          CALL_SYSTEM: 'xsqt',
          TYPE: 'E',
          FILE_TYPE: 'PDF'
        }
        this.getEPolicyFile(params, `${params.VISACODE}.pdf`, 'application/pdf')
      },
}
 
}

创建e-policy-file-download-mixin.js文件

import { base64String2FileAndSave } from '@/utils'
 // 电子保单下载
    getEPolicyFile(params, fileName, fileType) {
      this.downloading = true
      const _params = { data: { root: { EDI: { ...params } } } }
      getepolicyfile(_params)
        .then(data => {
          const base64String = data['return.pdf']
          try {
            const content = window.atob(base64String)
            JSON.parse(content)
            this.$message.error('电子保单不存在')
          } catch (e) {
            base64String2FileAndSave(base64String, fileName, fileType)
          }
          this.downloading = false
        })
        .catch(e => {
          this.downloading = false
          this.$message.error(e.toString())
        })
    }

utils.js中的base64String2FileAndSave方法

import { saveAs } from 'file-saver'//插件
/**
 * base64转文件并保存
 * @param str
 * @param fileName
 * @param fileType
 */
export function base64String2FileAndSave(str, fileName, fileType) {
  const s = window.atob(str)
  const buf = new ArrayBuffer(s.length)
  const view = new Uint8Array(buf)
  for (let i = 0; i !== s.length; ++i) {
    view[i] = s.charCodeAt(i) & 0xFF
  }
  saveAs(new Blob([buf], { type: fileType }), fileName)
}