前因:传参后发起post请求,后台接口返回的是二进制文件流,接收的内容如图:
在这里插入图片描述
后果:将接收到的文件流直接下载并保存到本地。
要下载的文件是一个.zip 压缩包。

一般方式请求后台接口,打印接口返回的内容:
在这里插入图片描述

下载方法:

dwonload() {
  if (this.$refs.checkIssueForm('ruleForm')) {
    let params = {
      remark: this.remark
    }
    this.$ajax.post('/api/download/', params, { responseType: 'blob' }).then(data => {
      // data.data 就是返回的 Blob类型的数据,如下图
      const url = URL.createObjectURL(data.data)
      const link = document.createElement('a')
      document.body.appendChild(link)
      link.download = '文件' + '.zip'
      link.href = url
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(url)
    }).catch((error) => {
      this.$message({ message: error.message, type: 'error' })
    })
  } else {
    this.$message({ message: '请检查表单', type: 'warning' })
  }
}

注意:如果要下载的是压缩包,需要在请求头设置

responseType: 'blob'

添加 {responseType: 'blob'} 后请求后台接口,打印接口返回的内容:
在这里插入图片描述

如果返回数据是文件流,下载的文件类型不限制的话,还可以使用下面的方法

// 这种方式post请求,参数form-data,请求头"Content-Type": "application/json;charset=UTF-8"
    async download(row) {
      let param = new FormData();
      param.append('url', 'address')
      param.append('file', 'row.name')

      const res = await this.$service.downloadMinio(param);
      const blob = new Blob([res]);
      const fileReader = new FileReader();
      fileReader.readAsDataURL(blob);
      fileReader.onload = (e) => {
        const a = document.createElement("a");
        a.download = row.name;
        a.href = e.target.result;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      };
    },
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐