vue项目中附件下载方法封装，并提取成全局共用方法

最新推荐文章于 2025-02-12 13:35:27 发布

原创最新推荐文章于 2025-02-12 13:35:27 发布 · 1.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vuejs 专栏收录该内容

20 篇文章

订阅专栏

该博客介绍了如何在Vue项目中创建一个全局方法`GLOBAL.vue`，用于封装附件下载功能。通过此方法，可以避免在多个页面重复编写下载代码。文章详细展示了下载方法的实现，包括根据文件类型设置下载头，并使用Blob和a标签实现文件下载。此外，还展示了在`main.js`和具体组件中如何引用和使用这个全局方法。

如果项目中有多个页面用到附件下载的方法，那么可以将这个方法封装成一个全局方法，减少重复代码。

在main.js同级目录下新建一个GLOBAL.vue文件，在里面可以声明很多全局共用方法。

>> GLOBAL.vue
<scirpt>
import { fileDownload } from '../HTTP/myApis'

const downloadAttachment = async (fileid, rename, type) => {
  await fileDownload({id: fileid, type: type}).then(res => {
    if(res.code == 0) {
      instance.$message.error('附件下载出错：' + res.msg)
    }else {
      let extentionType = rename.substring(rename.lastIndexOf('.')).toLowerCase();
      let fileType =  ''
      switch(extentionType) {
        case '.doc':
          fileType = 'application/msword'
          break
        case '.txt':
          fileType = 'text/plain'
          break
        case '.docx':
          fileType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
          break
        case '.xls':
          fileType = 'application/vnd.ms-excel'
          break
        case '.xlsx':
          fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          break
        case '.jpg':
          fileType = 'image/jpeg'
          break
        case '.png':
          fileType = 'image/png'
          break
        case '.ppt':
          fileType = 'application/vnd.ms-powerpoint'
          break
        case '.pdf':
          fileType = 'application/pdf'
          break
        case '.zip':
          fileType = 'application/zip'
          break
        default:
          break
      }
      let blob = new Blob([res], {type: fileType});
      var link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.download = rename
      link.click();
    }
  })
}

export default ({
	downloadAttachment 
})
</scirpt>

使用方法：

>> main.js
import global_ from './Global.vue'
Vue.prototype.GLOBAL = global_

>> xx.vue
this.GLOBAL.downloadAttachment(a, b, c);