【导出 & 文件流】

最新推荐文章于 2024-09-12 13:27:38 发布

龙拳蜗牛

最新推荐文章于 2024-09-12 13:27:38 发布

阅读量409

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/ton555555/article/details/126751664

版权

这段代码展示了如何使用axios库从服务器获取数据并创建一个Excel文件供用户下载。它通过GET请求获取资源，设置响应类型为blob，然后创建一个隐藏的a标签来触发文件下载，文件名为'用户列表.xlsx'。

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

 output() {
      axios
        .request({
          method: "get",
          url: `/admin/activity/export-apply-record`,
          params: { id: this.id, token: localStorage.getItem("token") },
          responseType: "blob",
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          console.log(res);
          const link = document.createElement("a");
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);

          // let name = decodeURI(res.headers["content-disposition"]).slice(21);
          link.download = "用户列表.xlsx"; //下载后文件名
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((error) => {
          // Message.error({
          //     message: '网络连接错误'
          //  })
          console.log(error);
        });
    },```

output() {
      axios
        .request({
          method: "get",
          url: '',
          params: { id: this.id, token: localStorage.getItem("token") },
          responseType: "blob",
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          console.log(res);
          const link = document.createElement("a");
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);

          // let name = decodeURI(res.headers["content-disposition"]).slice(21);
          link.download = "用户列表.xlsx"; //下载后文件名
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((error) => {
          // Message.error({
          //     message: '网络连接错误'
          //  })
          console.log(error);
        });
    },