Uniapp 下载返回的统计数据的二进制Excel文件

文章目录

• • 概要
  • 整体架构流程
  • 技术名词解释
  • 技术细节
  • 小结

概要

本博之前最近接触到一个文件导出问题，之前的研究方向是如何使用uniapp的Api去导出我们的二进制Excel文件，但是做起来之后发现使用uni.request输出的二进制数据已经不是一个二进制了，更像是被序列化一次的数据

拿这个数据写入到Excel里面的话会发生严重的错误，如下图官方提示

然后我们本着本能的不服输和满满的好奇心，用记事本打开来看看

真的是不敢看，脑瓜子嗡嗡的！

换个思路

因为公司这个项目是做的H5，所以逼不得已先使用H5的方法去先解决这个导出问题，然后我们毅然决然的选择了使用原生API，为什么用它而不是用axios这种封装好的框架呢？其实自己是这么想的：uniapp原本就有一套自己的请求体系，然后如果用axios又会引入一种新的请求体系，反正我是不太愿意将两种体系混合在一起！

不会Fetch的看这里https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

实现方案

// 通用下载方法
const errorCode = {
  '401': '认证失败，无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误，请反馈给管理员'
}
export function h5DownloadFile(url, params, filename, config) {
	uni.showLoading({
		title: '正在下载数据，请稍候',
	})
	const Token = storage.get(ACCESS_TOKEN)
	// 参数格式化
	// var formBody = [];
	// for (var property in params) {
	// var encodedKey = encodeURIComponent(property);
	// var encodedValue = encodeURIComponent(params[property]);
	// formBody.push(encodedKey + "=" + encodedValue);
	// }
	// formBody = formBody.join("&");
	
	fetch(url, {
		method: 'post',
		body: JSON.stringify(params),
		mode: "cors",
		headers: {
			'Content-Type': 'application/json',
			"Authorization": 'Bearer ' + Token,	
		},
		responseType: 'blob',
	}).then(res => res.blob())
	.then( async data => {
		if (data.type !== 'application/json') {
			console.log("12345",data)
			const blob = new Blob([data])
			saveAs(blob, filename)
			showSuccess('下载成功！')
			uni.hideLoading()
		}else{
			const resText = await data.text()
			const rspObj = JSON.parse(resText);
			const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
			showToast(errMsg)
		}
	})
}