前端下载接口返回的文件流

流程

创建 API 实例

// 以 axios 为例
const serviceApi = axios.create();
serviceApi.defaults.timeout = 5000;
serviceApi.defaults.retry = 4;
serviceApi.defaults.retryDelay = 5000;
serviceApi.defaults.baseURL = 'http://XXX.XXX.XXX';

请求拦截器

// 请求拦截器
serviceApi.interceptors.request.use(
	config => {
		if (config.method == "post") {
            // post 不需要特殊处理，可以直接接收到 config 传参
		} else if (config.method == "get") {
            // get 方法调用时，无法传递 config 参数
            // 这里将特殊参数放到 params 参数中
			if (config.params.delItem == 'blob') {
				console.log('进入判断--是 get 方法的导出');
				config.responseType = 'blob'; // 设置响应体为文件流
				delete config.params.delItem; // 将多加进去的 delItem 参数删掉
			}
		}
		return config;
	},
	error => {
		return Promise.reject(error);
	}
);

封装下载方法

// get 下载文件流
export function getDownloadFile(url, params = {}) {
	params.delItem = 'blob'; // 添加一个参数，标注是下载方法
	return new Promise((resolve, reject) => {
		serviceApi.get(url, {
				params: params
			})
			.then(response => {
				const blob = new Blob([response.data]);
                // 监听下载方法是否报错
				blobToText(blob).then((result) => {
					// 直接传递流文件
					resolve(response);
				}).catch((result) => {
					reject(result);
				})
			})
			.catch(err => {
				reject(err);
			});
	});
}
// post 下载文件流
export function postDownloadFile(url, data = {}, config = {
	responseType: 'blob'
}) {
	return new Promise((resolve, reject) => {
		serviceApi.post(url, data, config)
			.then(response => {
				const blob = new Blob([response.data]);
                // 监听下载方法是否报错
				blobToText(blob).then((result) => {
					// 直接传递流文件
					resolve(response);
				}).catch((result) => {
					reject(result);
				})
			})
			.catch(err => {
				reject(err);
			});
	});
}
// 在我们项目中，如果下载方法没走通，后台返回的是 json 格式，如果走通了，返回的是 blob 格式 
// blob 转换成 JSON，判断下载方法是否走通了
export function blobToText(blob) {
	return new Promise((resolve, reject) => {
		const fileReader = new FileReader();
		fileReader.readAsText(blob);
		fileReader.onload = function () {
			try {
				const result = JSON.parse(this.result);
				// 返回类型是 json 类型，并且 code 不为 200，表示接口报错
				if (result && result.code == 200) {
					resolve(result);
				} else {
					reject(result);
				}
			} catch (result) {
				// 返回类型不能被 JSON.parse 解析，表示是流文件，直接执行下步操作
				resolve(result);
			}
		}
	})
}

调用下载方法

// get 下载文件流
getDownloadFile(url, params).then(
    (res) => {
        const blob = new Blob([res.data]);
        const fileName = "get方法下载的文件流.jpg"; // 自定义文件名称
        if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a"); // 新建一个 DOM 元素
            elink.download = fileName;
            elink.style.display = "none"; // 隐藏 DOM 元素
            elink.href = URL.createObjectURL(blob); // 设置当前 DOM 元素的属性
            document.body.appendChild(elink); // 将当前 DOM 元素添加到 body 中
            elink.click(); // 模拟点击方法
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink); // 移除新增的 DOM 元素
        } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
        }
    },
    (error) => {}
)
// post 下载文件流
postDownloadFile(url, params).then(
    (res) => {
        const blob = new Blob([res.data]);
        const fileName = "get方法下载的文件流.jpg"; // 自定义文件名称
        if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a"); // 新建一个 DOM 元素
            elink.download = fileName;
            elink.style.display = "none"; // 隐藏 DOM 元素
            elink.href = URL.createObjectURL(blob); // 设置当前 DOM 元素的属性
            document.body.appendChild(elink); // 将当前 DOM 元素添加到 body 中
            elink.click(); // 模拟点击方法
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink); // 移除新增的 DOM 元素
        } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
        }
    },
    (error) => {}
)