后端返回blob文件流，前端下载文件的整个过程，偏向于前端这边（vue+axios）

2024-07-07 15:27| 来源: 网络整理| 查看: 265

先谈谈遇到的问题吧：

1. 后端接口返回的blob文件流，你下载下来的文件是乱码的？

解决办法：让你的后端设置流的编码为utf-8。请跟后端大佬说，一定要给blob格式的文件流。

2. 后端返回的blob文件流，并且已经设置了utf-8,但是你接受的接口返回值，依然是乱码？

解决办法：肯定没有设置 responseType: "blob"，我不知道你用的什么接口请求方式，你可以搜一下，怎么设置responseType: "blob"

3. 下载word文件里面内容是【object object】或者下载的图片是损坏的？

解决办法：参考以上的1和2答案，确定1和2都没有问题。

那么还有个原因就是：response 中还有一层data ,如果直接用blob流，文件里面就是object。你就把文件流的response.data一下

下面附上后端返回blob的文件流，前端下载、打印、预览文件的方法

本人用的vue,不管你用的什么技术库，原理一样，都是js。废话少说，直接上代码：

下载功能实现：

// 调用下载接口，返回bolb文件流 axios({ method: "get", url: this.proxyUrl + "/api/file/downloadFile", //后端下载接口地址 responseType: "blob", // 设置接受的流格式 params: { // get方式，请写params, post方式写data，这里是get方式的传参 fileId: this.selectedTabelRow[0].fileId, type: val, }, }).then((res) => { // res 中还有一层data ,如果直接用blob流，文件里面是object，我就是犯错了。 this.handleExport(res.data); }); /* 下载文件的公共方法，参数就传blob文件流*/ handleExport(data) { // 动态创建iframe下载文件 let fileName = this.selectedTabelRow[0].dirName; if (!data) { return; } let blob = new Blob([data], { type: "application/octet-stream" }); if ("download" in document.createElement("a")) { // 不是IE浏览器 let url = window.URL.createObjectURL(blob); let link = document.createElement("a"); link.style.display = "none"; link.href = url; link.setAttribute("download", fileName); document.body.appendChild(link); link.click(); document.body.removeChild(link); // 下载完成移除元素 window.URL.revokeObjectURL(url); // 释放掉blob对象 } else { // IE 10+ window.navigator.msSaveBlob(blob, fileName); } },

以上就是下载的方法啦，不好用，你砍我！！！！！

别别别你私我，我随时在线。

打印功能实现：

也是直接上代码：

// 调用打印接口，我们这边是后端弟兄，把所有的word格式全部给转化成了pdf格式，还添加了水印 axios({ method: "post", url: this.proxyUrl + "/api/file/printdocument", responseType: "blob", headers: { "Content-Type": "application/json" }, data: { // post格式是data传参数，注意请求方式 file_id: this.selectedTabelRow[0].fileId, addwatermark: val, }, }).then((res) => { res = res.data; const blob = new Blob([res], { type: "application/pdf" }); // 因为知道是pdf所以指定了格式。 var date = new Date().getTime(); var ifr = document.createElement("iframe"); ifr.style.frameborder = "no"; ifr.style.display = "none"; ifr.style.pageBreakBefore = "always"; ifr.setAttribute("id", "printPdf" + date); ifr.setAttribute("name", "printPdf" + date); ifr.src = window.URL.createObjectURL(blob); document.body.appendChild(ifr); this.doPrint("printPdf" + date); window.URL.revokeObjectURL(ifr.src); // 释放URL 对象 }); // 打印 doPrint(val) { var ordonnance = document.getElementById(val).contentWindow; setTimeout(() => { // window.print() ordonnance.print(); this.pdfLoading = false; }, 100); },

预览功能实现：

预览功能我用的是vue-pdf这个npm包。同样预览也是java的弟兄给转成了pdf，我直接预览pdf格式就行，不过，返回的是文件流，不是url地址。所以需要先把流转化成url地址，很简单一个方法搞定。

// 将返回的流数据转换为url getObjectURL(file) { let url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome try { url = window.webkitURL.createObjectURL(file); } catch (error) {} } else if (window.URL != undefined) { // mozilla(firefox) try { url = window.URL.createObjectURL(file); } catch (error) {} } return url; },

其他的使用方法就是跟vue-pdf教程一样了。

踩坑记录一下！！！之前也做过根据url来下载文件，算是比较简单的，这次的文件流，倒是踩出来了很多坑。

【本文地址】

公司简介

联系我们