前端请求解析文件流并下载文件

旧梦星轨

已于 2023-07-26 10:35:54 修改

阅读量5.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：工具链文章标签： javascript 前端

于 2022-09-01 18:36:26 首次发布

本文链接：https://blog.csdn.net/qq_60961397/article/details/126645833

工具链专栏收录该内容

21 篇文章

订阅专栏

本文介绍了使用axios下载文件流的两种方法，包括Blob对象和FileReader实例，并讨论了如何处理后端动态文件名。重点在于API操作和文件名解码技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方法接收下载文件流

                this.$axios({
                    url: `/md2api/attachment/c/${val.code}`,
                    method: "GET",
                    responseType: 'blob',   //设置响应格式
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                    },
                })
                .then(function (response) {
                    let b = new Blob([response.data]);     //拿到文件流下载对象
                    let url = window.URL.createObjectURL(b);  //生成文件流下载链接
                    let a = document.createElement('a');      //创建一个a标签用来跳转
                    a.href = url;                             // a标签 href  赋值 链接  
                    a.download = 'ing.jpeg';                  //设置下载文件的文件名和文件格式
                    document.body.appendChild(a);             //将标签DOM，放置页面
                    a.click();                              
                    window.URL.revokeObjectURL(url);     //释放 url 对象内存
                    document.body.removeChild(a);        //移除标签节点
                })
                .catch(function (error) {
                    console.log(error);
                });

第二种方法接收下载文件流（采用 FileReader 实例对象调用Api ，处理文件流）推荐使用

                this.$axios({
                    url: `/md2api/attachment/c/${val.code}`,
                    method: "GET",
                    responseType: 'blob',   //设置响应格式
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                    },
                })
                .then(function (response) {
                    const reader = new FileReader();   //  实例化 FileReader
                    reader.readAsDataURL(response.data); //将读取到的文件编码成DataURL
                    reader.onload = (e) => {      //调用API onload  文件读取成功时触发   
                        //模拟a标签点击
                        let a = document.createElement('a');   //创建a标签，
                        a.download = Date.parse(new Date()) + '.jpeg';   //设置格式
                        a.href = e.target.result;               //下载文件流链接
                        document.body.appendChild(a);           //将标签DOM，放置页面
                        a.click();
                        document.body.removeChild(a);          //移除标签节点
                    };
                     reader.onerror = (e) => {
                       this.$message({
                           message: '解析文件发生错误',
                           type: 'warning'
                        });
                     };
                     reader.onabort= (e) => {
                      this.$message({
                          message: '解析文件发生意外终止',
                          type: 'warning'
                       });
                    }
                 })
                .catch(function (error) {
                    console.log(error);
                });

从流文件中动态解析文件名

如果后端在流文件中，返回的有动态文件名，则可直接拿来用，如果没有就需要，手动去解析获取流文件名。如果后端返回的流文件名使用的是经过encodeURIComponent 对字符串名进行编码后的效果，则可以使用 decodeURIComponent 将其解码回原始字符。下面是一个示例：

const encodedString = encodeURIComponent(" Hello World!");  //'Hello%20World%21'
const decodedString = decodeURIComponent(encodedString);

console.log(decodedString); // 输出: Hello World!  拿取到原文件名

扩展：
FileReader 对象常用 API 回调函数

API	描述
`onload`	文件`读取成功时`触发
`onerror`	解析文件`发生错误`时触发
`onabort`	解析文件发生`意外终止`时触发
`onloadend`	文件读取`完毕之后，成功或者失败都会`触发
`onloadstart`	`开始`读取时触发
`onprogress`	读取时触发

FileReader 常用的 API 数据处理钩子函数

API	描述
`readAsText()`	读取`文本文件`
`readAsBinaryString()`	读取`任意类型的文件`，返回`二进制字符串`
`readAsDataURL()`	将读取到的`文件编码成 DataURL`
`abort()`	`终止`读取

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————