fetch处理数据流下载

平时开发react项目,用的是fetch做的接口请求
平时用的比较多的是json格式的,但是这次做一个excel文件下载,和之前的不太一样,返回的数据流,使用json()处理数据不行,所以我使用了blob()

平时使用 处理json数据返回

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json(); //处理json数据返回
  })
  .then(function(myJson) {
    console.log(myJson);
  });

但是如果返回的是数据流格式,就不能用这个处理了 需要换一个处理方式 response.blob()

下面是处理数据流,并下载文件的方法

    fetch(urls, {
        method: 'POST',
        mode: "cors",
        headers: {
            'Content-type': 'application/json',
            'Authorization':  token,//这里放你的token,不需要token可以不放
            'source': params.source,
        },
        responseType: 'blob', //一定要加请求类型,不然会乱码
        body: params //这里是一些请求参数
    }).then(res => {
        return res.blob(); //一定要有。blob()方法使用一个 Response 流，并将其读取完成。它返回一个使用Blob解决的promise。
    }).then(blob => {
        console.log('blob', blob)
        let bl = new Blob([blob]); 
        let fileName = Date.parse(new Date()) + ".xlsx"; //我这里给了个时间戳命名,可以根据需求自定义
        //下面就是下载文件的方法了
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        window.URL.revokeObjectURL(link.href);
    })
        .catch(err => {
            console.log('err', err)
        });

下面就是下载下来的文件

下面是接口返回的数据

大家想了解更详细的有关fetch的知识,可以去官方文档了解

fetch使用文档