前端js文件流导出文件下载在本地

本文详细介绍了一种在前端实现导出文件流的方法,通过使用XMLHttpRequest和Blob对象,能够将后端返回的文件流格式数据下载到本地。文中提供了具体的JavaScript代码示例,包括如何创建请求、设置响应类型、处理响应数据以及触发文件下载。

博主在写一个前端导出功能,点击按钮,将文件下载到本地。后端返回的是文件流的格式,下面就是实现的方法,亲测可用哦~

1.js导出方法

handleExport = () => {
    const req = new XMLHttpRequest();
    req.open('POST', url, true);
    req.responseType = 'blob';
    req.setRequestHeader('Content-Type', 'application/json');
    req.onload = () => {
      const data = req.response;
      const a = document.createElement('a');
      const blob = new Blob([data],{type:"application/octet-stream"});
      const blobUrl = window.URL.createObjectURL(blob);
      this.download(blobUrl) ;
    };
    req.send('');
  };
 
 download = (blobUrl) => {
  const a = document.createElement('a');
  a.style.display = 'none';
  a.download = 'xxx.xls'; //文件名
  a.href = blobUrl;
  a.click();
  // document.body.removeChild(a);
}

2.HTML

<Button type="primary" onClick={() => this.handleExport()}>
                导出
            </Button>

<

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值