前端Blob文件导出

前言

通过把blob转file对象的方法下载文件

一、Blob是什么？

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。

二、axios 拦截器中做统一处理

request.interceptors.response.use((response) => {
  return new Promise((resolve, reject) => {
    if (response.config.responseType === 'blob') {
      const fileReader = new FileReader()
      fileReader.readAsDataURL(response.data)
      fileReader.onload = (event) => {
        const fileName = response.headers['content-disposition'].split('filename=')[1].split(';')[0]
        return resolve({ fileUrl: event.target.result, fileName: fileName ? decodeURIComponent(fileName) : '', blob: response.data })
      }
    }
  }
}

三、页面全局封装下载组建

import Vue from 'vue'
import request from '@/utils/request'
// 全局混入
Vue.mixin({
  data () {
    return {
    }
  },
  methods: {
    // 全局下载
    exportFile (url, params) {
      this.$message.info('请稍等，正在导出...')
      return request({
        url: url,
        method: 'get',
        params: params,
        responseType: 'blob'
      }).then(res => {
        const a = document.createElement('a')
        a.download = res.fileName
        a.href = res.fileUrl
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      })
    }
  }
})

总结

持续完善其他导出方法…