前端实现文件下载的三种方式(含blob文件流下载)

750 阅读1分钟

方式一:使用blob文件流进行下载

1.验证是否为blob格式

2.封装download方法
export function download(url: string, params: any, filename: string, config: any = {}) {
return service
    .post(url, params, {
         transformRequest: [
                params => {
                                return tansParams(params);
                },
          ],
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        responseType: 'blob',
        ...config,
    })
    .then(async (data: any) => {
    const isBlob:any = blobValidate(data);
    if (isBlob) {
        const blob = new Blob([data]);
        console.log('blob: ', blob);
        saveAs(blob, filename);
    } else {
        const resText = await data.text();
        const rspObj = JSON.parse(resText);
        const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
        showFailToast(errMsg);
    }
    })
    .catch(r => {
        console.error(r);
        showFailToast('下载文件出现错误,请联系管理员!');
    });
}

3.调用下载方法
  download( 接口url,接口参数, `文件名.xlsx`);

方式二:使用a链接下载

const a = document.createElement('a');
a.target = '_blank';
a.href = res.data.fullFilePath;
a.click();

方式三:使用最简单的window.open下载

window.open(此处传入后端返回的url)