Vue项目 使用new Blob() 对后端返回文件流下载导出文件时不同文件类型的 type （zip/excel）值封装调用示例(即文件流转Blob格式实现下载excel或zip)

1、需求

后台管理系统，常会出现批量导入/导出功能（即下载excel模板及导出excel文件或zip格式），因此为解决这个需求封装了文件流转Blob格式实现前端下载功能

2、封装方法

1、在src/utils下新建download.js（代码如下）

目前只集成了excel和zip格式的下载，其它Blob type格式可自行增加

import axios from 'axios'
import { Message } from 'element-ui'
import { saveAs } from 'file-saver'
import { getToken } from '@/utils/auth' // 获取登录用户的token
const baseURL = process.env.VUE_APP_BASE_API
export default {
  excel (url, name, params) {
    var url = baseURL + url
    axios({
      method: 'get',
      url: url,
      responseType: 'blob',
      headers: { 'Authorization': getToken() },
      params
    }).then(async (res) => {
      // console.log('excel', res)
      const isLogin = await this.blobValidate(res.data)
      if (isLogin) {
        // const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        this.saveAs(blob, name)
      } else {
        this.printErrMsg(res.data);
      }
    })
  },
  zip (url, name) {
    var url = baseURL + url
    axios({
      method: 'get',
      url: url,
      responseType: 'blob',
      headers: { 'Authorization': getToken() }
    }).then(async (res) => {
      const isLogin = await this.blobValidate(res.data);
      if (isLogin) {
        const blob = new Blob([res.data], { type: 'application/zip' })
        this.saveAs(blob, name)
      } else {
        this.printErrMsg(res.data)
      }
    })
  },
  saveAs (text, name, opts) {
    saveAs(text, name, opts)
  },
  // 验证是否为blob格式
  async blobValidate (data) {
    try {
      const text = await data.text()
      JSON.parse(text)
      return false
    } catch (error) {
      return true
    }
  },
  async printErrMsg (data) {
    const resText = await data.text();
    const rspObj = JSON.parse(resText);
    const errorCode = {
      '401': '认证失败，无法访问系统资源',
      '403': '当前操作没有权限',
      '404': '访问资源不存在',
      'default': '系统未知错误，请反馈给管理员'
    }
    const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
    Message.error(errMsg);
  }
}

2、在main.js中全局引入

import download from "@/utils/download"
Vue.prototype.$download = download

3、页面使用

this.$download.excel('/portal-user/system/pda/template/download', 'PDA录入模板')

3、最终效果

4、相关文章

基于ElementUi&Antd再次封装基础组件文档