【无标题】

最新推荐文章于 2024-11-02 12:42:04 发布

唯此一心

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量71

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/m0_45379422/article/details/130625033

版权

该文章详细记录了在前端如何使用axios从后端获取二进制文件流，并通过设置responseType为arraybuffer来处理文件，然后利用Blob对象和不同的浏览器兼容策略实现文件下载，包括对IE的特殊处理。

摘要由CSDN通过智能技术生成

前端接收二进制文件流下载文件的一次记录

//请求参数 这里清空了 ，实际根据接口来定
let params = {}
      //获取地址 HttpRequester是引用外面文件的
      //HttpRequester = axios.create(config).....
      const baseURL = HttpRequester.getUri();
      //补全地址
      let url_post = baseURL+ '/lithology/exportJltxpjExcel';
      //post方式，param为所需要传的参数，
      // responseType: 'arraybuffer'一定要写，否则下载的文件会出现乱码
      axios
        .post(url_post, params, { responseType: 'arraybuffer' })
        .then(res => {
          let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); //type为所需要下载的文件格式，以xls文件为例
          //浏览器兼容，Google和火狐支持a标签的download，IE不支持
          if (window.navigator && window.navigator.msSaveBlob) {
            //IE浏览器、微软浏览器
            /* 经过测试，微软浏览器Microsoft Edge下载文件时必须要重命名文件才可以打开，
              IE可不重命名，以防万一，所以都写上比较好 */
            window.navigator.msSaveBlob(blob, '文件.xls');
          } else {
            //其他浏览器
            let link = document.createElement('a'); // 创建a标签
            link.style.display = 'none';
            let objectUrl = URL.createObjectURL(blob);
            link.href = objectUrl;
            //设置下载的文件名称
            link.download = this.fileName
            link.click();
            URL.revokeObjectURL(objectUrl);
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        });