vue下载文件 (blob文件流) 及 下载失败报错信息处理

vue下载文件 (blob文件流) 及 下载失败报错信息处理

重点封装代码

// 引入axios
import axios from 'axios'
// 引入token的获取方法
import { getToken } from '@/utils/auth'
// 引入消息提示组件
import { Message } from 'element-ui'

// 导出文件--文件流格式
export function exportFlie(url, params) {
  axios.post(process.env.VUE_APP_BASE_API + `${url}`, params, { responseType: 'blob', headers: { 'X-Token': getToken() }})
    .then((res) => {
    //返回文件流，下载保存到本地
      const blob = new Blob([res.data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
      })
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob)
      // 获取headers中返回的文件名
      const contentDisposition = res.headers['content-disposition'] // 从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
      const patt = new RegExp('filename="([^;]+\\.[^\\.;]+);*"')
      const result = patt.exec(contentDisposition)
      const filename = decodeURI(result[1])
      downloadElement.style.display = 'none'
      downloadElement.href = href
      downloadElement.download = filename // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
      window.URL.revokeObjectURL(href) // 释放掉blob对象
    }).catch(err => {
      // 接口报错，返回保存信息，因为设置responseType: 'blob'，返回数据转为blob格式，所以使用FileReader()方法读取文件流，将错误信息转为json格式
      const reader = new FileReader()
      reader.readAsText(err.response.data, 'utf-8')
      reader.onload = (e) => {
        try {
          // 将读取到的文本解析为JSON对象
          const jsonData = JSON.parse(e.target.result)
          // 在这里使用解析后的JSON数据
          Message.error(jsonData.msg)
        } catch (error) {
          // 处理解析JSON时可能出现的错误
          console.error('Error parsing JSON:', error)
          Message.error('文件导出失败')
        }
      }
    })
}

封装公共方法

1. utils文件下的index.js文件中创建工具类

export function exportFlie(){}

组件中使用

import { exportFlie } from '@/utils/index'

exportFlie(url, params)