post请求返回excel文件流如何下载

场景:

在工作中遇到这样一种场景:导入一个excel文件,后端会处理该文件是否符合导入要求,如果导入成功返回application/json格式数据附带返回告知导入成功,如果文件是空的或者一些其他原因也会通过这种方式返回错误提示。若excel内的数据格式存在问题,则通过返回一个application/vnd.ms-excel格式的excel文件流,前端需要将该文件下载下来供用户查看错误信息。

遇到的问题:

  1. 无法下载excel文件。
  2. response存在两种格式如何处理

解决方法:

无法下载是因为这是post请求返回个格式也不允许直接下载需要处理,首先需要设置responseType: "blob",这个responseType不是header中的而是和herder同级。返回的数据格式此时已经是blob了不需要再new Blob(res),此前查找了很多文章都需要转成blob这是错误的。

var file = param.file;
      const formData = new FormData();
      formData.append("file", file);
      formData.append("assentId", this.searchParams.assetsId);
      axios
        .post("/download/url", formData, {
          responseType: "blob",
          headers: this.headers
        })
        .then(res => {
          if (res.data.type === "application/vnd.ms-excel") {
            const a = document.createElement("a");
            a.download = "导入错误详情.xlsx";
            a.href = window.URL.createObjectURL(res.data);
            a.click();
            a.remove();
            this.$message.error(
              res.data.msg || "导入失败,详情请查看导出的文档!"
            );
          } else if (res.data.type == "application/json") {
            const that = this
            const reader = new FileReader(); //创建一个FileReader实例
            reader.readAsText(res.data, "utf-8"); //读取文件,结果用字符串形式表示
            reader.onload = function() {
              //读取完成后,**获取reader.result**
              const data = JSON.parse(reader.result);
              if (data.code == 1) {
                that.$message.success("导入成功!");
                that.rest();
              } else {
                that.$message.error(data.msg || "导入失败!");
              }
            };
          }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容