vue使用文件流进行下载

在 Vue 项目中，经常会遇到下载文件流的情况，使用new Blob二进制进行文件下载功能（vue后台返回文件流下载导出函数封装、调用示例），type不同下载的文件格式也不同，这边本文章下载的是xlsx文件，可根据自己项目场景更换 new Blob() 的 type 即可

这边带大家如何封装使用（直接C/V就可以用了）

new Blob():Vue 之 new Blob() 文件流下载文件不同文件类型的 type 值整理_L_羽鹏的博客-CSDN博客

import axios from 'axios'const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL:"http://localhost:3000",// 超时timeout:2000})// 拦截器............//导出方法/*download(url, params, filename)第一个参数是请求的api第二个参数是请求参数第三个参数是导出的文件名*/export function download(url, params, filename) { //数据请求return service.post(url, params, {transformRequest: [(params) => {return tansParams(params)}],// 请求头headers: {'xxx': 'xxx'},responseType: 'blob'}).then((data) => {const content = dataconst blob = new Blob([content], {// 下载的文件格式自己在这边更改type的值就好了type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})if ('download' in document.createElement('a')) {const elink = document.createElement('a')elink.download = filenameelink.style.display = 'none'elink.href = URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()URL.revokeObjectURL(elink.href)document.body.removeChild(elink)} else {navigator.msSaveBlob(blob, filename)}}).catch((r) => {console.error(r)})}