vue_导出 excel 表格

最新推荐文章于 2025-05-29 10:17:05 发布

策码奔腾---嘚驾~

最新推荐文章于 2025-05-29 10:17:05 发布

阅读量81

点赞数

文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_42489210/article/details/120038111

版权

本文介绍了如何在Vue应用中使用Blob对象来实现前端导出Excel和Doc文件的功能。关键步骤包括设置axios请求的responseType为'blob'，创建Blob对象，并通过创建隐藏的a标签来触发文件下载，同时提供了自定义文件名的方法。

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

使用方法：https://segmentfault.com/a/1190000020540788

改变下载的格式，用这个链接：Vue通过Blob对象实现导出Excel功能 - 他好像一条狗啊 - 博客园

后缀名为doc类型（Blob{type:''}）：利用Blob实现前端导出Excel,Doc等文件 - ychizzz - 博客园

案例：

keyPersonExport(params) {
    return axios({
      url: "/fixed/keyPerson/export",
      responseType: "blob",   //这里注意一下，请求一定要加上，
      method: "post",
      data: params
    });
  }
};



const link = document.createElement("a");
this.$api.keyPersonExport(params).then(res => {
        if (res.status == 200) {
          // 【不带名字，没有格式】创建Blob对象，设置文件类型
          // let blob = new Blob([res.data], {
          //   type:
          //     "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"
          // });
          // let objectUrl = URL.createObjectURL(blob); // 创建URL
          // location.href = objectUrl;
          // link.download = "重点人权核酸检测结果";
          // URL.revokeObjectURL(objectUrl); // 释放内存

          // 【有名字，带格式】
          let blob = new Blob([res.data], {
            type:
              "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"
          });
          let objectUrl = URL.createObjectURL(blob); // 创建URL
          link.href = objectUrl;
          link.download = "重点人权核酸检测结果"; // 自定义文件名
          link.click(); // 下载文件
          URL.revokeObjectURL(objectUrl); // 释放内存
        }
      });