深圳响应式网站公司新站整站优化

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 = hrefdownloadElement.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)