下载接口返回的数据流格式文件
文章目录
- 1 使用`downloadjs`
- 1.1 下载
- 2 使用`a`链接跳转方式
- 2.1 封装`a`链接公共方法
- 2.2 使用
- 2.3 问题描述与解决
1 使用downloadjs
1.1 下载
npm install downloadjs
import download from 'downloadjs';download(data, filename, mimeType);
// data 是要下载的文件内容，可以是 Blob、Buffer、ArrayBuffer、URL、字符串等；
// filename 是要保存的文件名；
// mimeType 是文件的 MIME 类型，可选。-- 如果不写则自动识别
2 使用a链接跳转方式
- 虽然是打开新窗口的形式，但指向过去后，浏览器会自动解析下载，并自动关闭这个新窗口
注： 只支持GET方式的请求 ( 因为GET请求不受同源策略的影响与限制 )如果不理解GET请求为什么不受同源策略的影响与限制 想想原生jsonp是怎么解决跨域的。
2.1 封装a链接公共方法
// url 为接口地址
export const openWindow = (url) => {const link = document.createElement('a');link.href = `${window.location.origin}xxxxxxxx`;link.setAttribute('download', '文件.xlsx'); // 确保文件名包含扩展名document.body.appendChild(link);link.click();link.remove();
}// 以下是接口举例 // 后面会用到
export function exce(params) {return request({method: "GET",url: "接口地址",params,headers: {'Content-Type': 'application/x-www-form-urlencoded',}});
}export const excels = "接口地址"// 模板下载
import request from "@/resources/request.js"export function downloadExcel () {return request({method: "GET",url: "接口请求地址", responseType: "blob",})
}
2.2 使用
import { downloadFile } from "@/utils/index";
import { excels } from "@/api/index";methods:{openWindow(`${excels }`)
}
2.3 问题描述与解决
- 虽然上述方法看起来很方便，但这个接口一旦报错，浏览器就无法解析到数据，这个新窗口也不会自动关闭，会把错误信息展示出来，例如：
- 如果觉得接口肯定不会报错或者能接受，那下面的就不用看了，因为我自己都觉得这样写很呆
解决办法，先调用接口，判断接口未报错再调用公共方法