导出文件方法封装

最新推荐文章于 2023-05-24 09:57:39 发布

一梦晓三生

最新推荐文章于 2023-05-24 09:57:39 发布

阅读量168

点赞数

分类专栏：日常问题记录文章标签： javascript 前端 chrome

本文链接：https://blog.csdn.net/zzz00008LN/article/details/122806134

版权

日常问题记录专栏收录该内容

22 篇文章 0 订阅

订阅专栏

这是一个关于文件下载功能的代码实现，主要通过HTTP请求获取数据并转换为blob对象，然后利用a标签的download属性或者针对IE的navigator.msSaveBlob方法进行文件下载。代码中包含了错误处理和不同浏览器的兼容性处理。

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

// 导出文件方法封装
    daochu(url, params, type = 'get') {
      const loading = notice.loading();
      http({
        url: url,
        forced: true,
        responseType: "blob",
        All: true,
        params: params,
        type
      }).then((res) => {
        console.log(res)
        loading.close();
        this.daochuDownload(res);
      }).catch(err => {
        console.log(err)
      })
    },
    daochuDownload(res) {
      const fileName = decodeURI(
        res.headers["content-disposition"].split(";").pop().split("filename=")[1].replace(/"/g, "")
      );
      // const fileName = this.detailInfo.name + ".xls";
      const blob = new Blob([res.data]); //构造一个blob对象来处理数据
      // const fileName = "xx.xls";
      //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
      //IE10以上支持blob但是依然不支持download
      if ("download" in document.createElement("a")) {
        //支持a标签download的浏览器
        const link = document.createElement("a"); //创建a标签
        link.download = fileName; //a标签添加属性
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click(); //执行下载
        // URL.revokeObjectURL(link.href); //释放url
        // document.body.removeChild(link); //释放标签
      } else {
        //其他浏览器
        navigator.msSaveBlob(blob, fileName);
      }
    }