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

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

                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()	终止读取

---

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