React 通过post方式,下载数据流到本地

374 阅读1分钟

后端返回的数据流格式

image.png

代码记录

/**
 * 下载数据流文件
 * @param url 接口地址
 * @param params 传递的参数
 * @param name 下载文件名
 * @constructor
 */
static FileDownload(url, params, name) {
  fetch(url, { // url 接口请求地址
    method: 'post', // HTTP 请求的方法,POST、DELETE、PUT都在这个属性设置。
    credentials: 'include',
    headers: new Headers({ // 一个对象,用来定制 HTTP 请求的标头。
      'Content-Type': 'application/json',
      'Blade-Auth': getToken(),// 设置header 获取token
    }),
    body: JSON.stringify(params), // POST 请求的数据体
  }).then((response) => {
    response.blob().then(blob => {
      const a = document.createElement('a');
      // 兼容webkix浏览器,处理webkit浏览器中href自动添加blob前缀,默认在浏览器打开而不是下载
      const URL = window.URL || window.webkitURL;
      // 根据解析后的blob对象创建URL 对象
      const herf = URL.createObjectURL(blob);
      // 下载链接
      a.href = herf;
      // 下载文件名,如果后端没有返回,可以自己写a.download = '文件.pdf'
      a.download = `${name}.pdf`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      // 在内存中移除URL 对象
      window.URL.revokeObjectURL(herf);
    });
  }).catch((error) => {
    console.log('文件下载失败', error);
  });
}