React下载文件

React下载文件

function download(url){
    const link = document.createElement('a');
    link.href = url;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

使用文件流下载

//点击文件下载
<div style={styles.downFileBtn}
           onClick={(event) => {
             event.preventDefault();
             event.stopPropagation();
             fetch(downloadFiles, { //downloadFiles 接口请求地址
               method: 'get',
               credentials: 'include',
               headers: new Headers({
                 'Content-Type': 'application/json',
                 'X-Auth-Token': User.getToken(),//设置header 获取token
               })
             }).then((response) => {
               response.blob().then(blob => {
                 let blobUrl = window.URL.createObjectURL(blob);
                 let aElement = document.getElementById('downloadDiv'); //获取a标签元素
                 let filename = times.formatNowDate() + '.zip';//设置文件名称
                 aElement.href = blobUrl;//设置a标签路径
                 aElement.download = filename;
                 aElement.click();
                 window.URL.revokeObjectURL(blobUrl);
               });
             }).catch((error) => {
               console.log('文件下载失败', error);
             });
           }}
      >
        <Icon type="download"/>文件下载
      </div>

//定义个a标签数组
const Anchor = props => {
  return (
    <a {...props}>{props.children}</a>
  );
};

//页面上使用a标签数组
<Anchor id="downloadDiv" style={{display: 'none'}}></Anchor> //隐藏不显示