项目中,使用到了下载文件,但是调用后台的接口并没有弹出下载框,因为后台传的是文件流,我们前端需要自己解析
如下:

    download(EID) {
      console.log("下载文件");
      console.log(EID);
      let id = "b37dd50c-0418-4f1c-a964-b16abf7819a1";
      axios({
        // 用axios发送post请求
        method: "get",
        url: `/api/v5/customer/service/${id}/resource`, // 请求地址
        // data: form, // 参数
        responseType: "blob", // 表明返回服务器返回的数据类型
        headers: {
          "X-Authorization": getToken()
        }
      }).then(res => {
        // 处理返回的文件流
        const content = res.data;
        const blob = new Blob([content]);
        const fileName = "测试表格123.xls";
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } 
        else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },

这种方法实验可行,下载弹框正确弹出

jpg等有些方式预览器不支持弹出窗口, 可以直接看下面这个解决方式
个人认为很详细了:
https://blog.csdn.net/weixin_41804429/article/details/100128404

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐