vue 文件下载

文件下载流程

本文章针对于前端基于Blob对象创建文件实现文件下载
直奔代码：

// 首先创建数据对象
const data = {hello: "world"};
// 创建Blob并指定mine类型
const blob = new Blob([JSON.stringify(data)], {type: "text/plain"});
// 文件名命名
const fileName = `${new Date().valueOf()}.doc`;
// 创建a标签，指定标签通过createObjectURL关联blob对象
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
// 通过download属性规定下载文件名
link.download = fileName;
// click触发下载
link.click();
// 通过revokeObjectURL释放url对象
window.URL.revokeObjectURL(link.href);

通过接口下载

真实项目中往往会通过接口实现文件的下载，以下下载结合vue实现：

<a href="#" @click="fileDownload">文件下载</a>
<el-progress :text-inside="true" :percentage="precent"></el-progress>

data () {
  precent: 0,
  data: {
    id: 'xxxx'
  }
},
methods: {
  fileDownload () {
    // 先获取后台下载文件需要的数据
    this.axios.get('getCodeUrl').then(data => {
      let token = data.token
      // 将token放到头中，设置下载进度、请求参数、返回类型
      this.axios({
        url: 'downloadUrl',
        method: 'post',
        data: this.data,
        headers: { 'FileToken': token },
        onDownloadProgress: p => {
          this.precent = Math.floor(100 * (p.loaded / p.total))
        },
        responseType: 'blob'
      }).then(data => {
        // 如果后端用encodeURI对文件名进行了编码，前端需用decodeURI进行解码（主要为处理特殊字符）
        let fileName = decodeURI(data.headers.filename)
        // 由于ie不支持download属性，故需要做兼容判断
        if (navigator.appVersion.toString().indexOf('.NET') > 0) {
          // ie独有的msSaveBlob属性，data.data为Blob文件流
          window.navigator.msSaveBlob(data.data, fileName)
        } else {
          // 以下流程即为文章开始的下载流程
          let url = window.URL.createObjectURL(data.data)
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.download = fileName
          document.body.appendChild(link)
          link.click()
          window.URL.revokeObjectURL(link.href);
        }
      })
    })
  }
}