js 处理返回文件流

今天在处理excel下载时遇到的一个问题,在这里记录一下

项目里在处理excel下载时,客户那边api返回的是文件流,并且这边发送请求时需要设置请求头验证Token,而ajax不能接收处理文件流,所以找了另一种方法

<script type="text/javascript">
	function download() {

	    var xmlResquest = new XMLHttpRequest();
	    xmlResquest.open("POST", "/eksoft/fileUpload/download", true);
	    xmlResquest.setRequestHeader("Content-type", "application/json");
	    xmlResquest.setRequestHeader("Authorization", "Bearer 6cda86e3-ba1c-4737-972c-f815304932ee");
	    xmlResquest.responseType = "blob";
	    xmlResquest.onload = function (oEvent) {
			
                var content = xmlResquest.response;
                var elink = document.createElement('a');
                elink.download = "test.xlsx";
                elink.style.display = 'none';
                var blob = new Blob([content]);
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                document.body.removeChild(elink);
            };
            xmlResquest.send();
	}
</script>

<think>根据用户的问题,用户想要了解uniapp处理接口返回文件流的解决方案。结合提供的引用内容,我们可以总结出两种主要方法:一种是使用uni.downloadFile(仅支持GET),另一种是使用uni.request配合uni.getFileSystemManager().writeFile()(支持POST等请求)。 用户特别提到“接口返回文件流”,并且引用中提到了使用uni.request来处理POST请求返回文件流。因此,我们将重点放在第二种方法上。 步骤: 1. 使用uni.request发起请求,设置responseType为'arraybuffer'(接收二进制数据)。 2. 在请求成功的回调中,使用uni.getFileSystemManager().writeFile()将二进制数据写入本地文件。 3. 写入成功后,使用uni.openDocument打开文件进行预览。 同时,引用[3]还提供了另一种方法:使用uni.downloadFile(仅支持GET)或者下载后跳转到webview页面预览。但用户的问题中明确提到了“接口返回文件流”,且需要支持POST,因此我们主要采用第一种方法。 另外,需要注意文件名的获取方式:从响应头Content-Disposition中提取文件名。 下面给出具体代码实现,并解释每一步。 </think> 在 UniApp 中处理接口返回文件流(尤其是 POST 请求),可通过以下方案实现。核心是使用 `uni.request` + 文件系统 API 处理二进制流数据: ### 解决方案步骤 1. **发起 POST 请求获取文件流** 设置 `responseType: 'arraybuffer'` 接收二进制数据: ```javascript uni.request({ url: 'https://your-api-url', method: 'POST', data: {}, // POST 请求参数 responseType: 'arraybuffer', // 关键:接收二进制流 header: { 'Content-Type': 'application/json', // 可添加 token 等认证信息 }, success: (res) => { if (res.statusCode === 200) { this.handleFileStream(res); // 处理文件流 } } }); ``` 2. **解析文件名** 从响应头 `Content-Disposition` 提取文件名(需确保后端返回该头): ```javascript getFileName(res) { const disposition = res.header['Content-Disposition'] || ''; const match = disposition.match(/filename="?(.+)"?/); return match ? decodeURIComponent(match[1]) : 'default.xlsx'; } ``` 3. **保存文件到本地** 使用文件系统 API 写入二进制数据: ```javascript handleFileStream(res) { const fs = uni.getFileSystemManager(); const fileName = this.getFileName(res); const filePath = `${uni.env.USER_DATA_PATH}/${fileName}`; fs.writeFile({ filePath, data: res.data, // 二进制数据 encoding: 'binary', // 关键:指定二进制编码 success: () => { uni.openDocument({ filePath, showMenu: true, // 显示操作菜单 success: () => console.log('文件打开成功') }); }, fail: (err) => console.error('文件保存失败', err) }); } ``` ### 关键说明 1. **二进制流处理** - `responseType: 'arraybuffer'` 确保正确接收二进制数据 - `encoding: 'binary'` 保证写入时不损坏文件 2. **文件存储路径** `uni.env.USER_DATA_PATH` 是小程序沙盒环境的安全路径,无需用户授权。 3. **文件类型识别** `uni.openDocument` 会根据文件后缀自动选择打开方式(如 .xlsx 用 Excel 打开)。 ### 注意事项 - **权限问题**:小程序真机调试需开启“不校验合法域名”或配置服务器域名白名单 - **大文件处理**:超过 10MB 需分割处理,参考云存储方案[^1] - **安卓兼容性**:部分 Android 机型需添加文件后缀才能正确打开[^2]
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值