前端请求接收文件流并下载文件

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

                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);
                });

FileReader 对象 常用API 端口

1. onloadend:文件读取完毕之后，成功或者失败都会触发
2. onloadstart: 开始读取时触发
3. onprogress:读取时触发

FileReader 对象 常用数据处理钩子

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