Vue 前端导出、下载zip/excel文件流blob

末蓝、 2022-12-07 01:24 315阅读 0赞

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5aW95YOP5b6I5Ya35LqG_size_20_color_FFFFFF_t_70_g_se_x_16][]

// import './mock/index.js';  // 该项目所有请求使用mockjs模拟 去掉mock

responseType: "blob",

let blob = new Blob(\[response.data\], \{ type: "application/zip" \}); **//注意是response 或者 response.data**  
let url = window.URL.createObjectURL(blob);  这三句最重要！！！

//普通代码
    axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => {
        // 创建Blob对象，设置文件类型
        let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
        let objectUrl = URL.createObjectURL(blob) // 创建URL
        location.href = objectUrl;
        URL.revokeObjectURL(objectUrl); // 释放内存
    })

downloadAll() {
          axios({
            method: "get",
            url: "api/TemplateDownload/GetAllTemplateZIP",
            headers: {
              "content-type": "application/json; charset=utf-8",
              Authorization: Cookies.get("token") || "",
            },
            responseType: "blob",
          })
            .then((response) => {
              let blob = new Blob([response.data], { type: "application/zip" });
              let url = window.URL.createObjectURL(blob);
              const link = document.createElement("a"); // 创建a标签
              link.href = url;
              link.download = "模板下载"; // 重命名文件
              link.click();
              URL.revokeObjectURL(url); // 释放内存
              this.checkList = [];
            })
            .catch((error) => {
              console.log(error.data);
            });
            
        },
    
    
    //excel 
    let blob = new Blob([response.data], { type: "application/vnd.ms-excel" });

[获取到了后台传过来的excel文件 前端用vue怎么接收并导出？ - 中文 - Vue Forum][excel_ _vue_ - _ - Vue Forum]

[vue.js前端实现excel表格导出和获取headers里的信息 - 五个半柠檬 - OSCHINA - 中文开源技术交流社区][vue.js_excel_headers_ - _ - OSCHINA -]

java后台需要设置

response.addHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");
     response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
    
    才能获取到文件名等信息

// 导出execel2
        handleExcel() {
          this.$http({
            url: this.$http.adornUrl(url),
            method: "post",
            responseType: "blob",//!!!!
            params: this.$http.adornParams({
              userAccount: this.userName,
            }),
          }).then((res) => {
            // console.log(res, "res");
            let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
            let fileName = decodeURI(
                response.headers["content-disposition"].split(";")[1].split("=")[1]
              );
            let url = window.URL.createObjectURL(blob);
            const link = document.createElement("a"); // 创建a标签
            link.href = url;
            link.download = fileName; // 重命名文件
            link.click();
            URL.revokeObjectURL(url); // 释放内存
          });
        },

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5aW95YOP5b6I5Ya35LqG_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20221123/1a98d483f53a4c17bf558545ff12a0ee.png
[excel_ _vue_ - _ - Vue Forum]: https://forum.vuejs.org/t/excel-vue/37245
[vue.js_excel_headers_ - _ - OSCHINA -]: https://my.oschina.net/lemonfive/blog/2052315