React下载excel文件(解决下载乱码问题)

1,055 阅读1分钟

1.需要传入token值,后端返回二进制流文件,前端可以利用axios,通过Blob转换excel文件流

const axiosDownloadFile = (url: string, data: PlainObject = {}) => {
axios({
        url: url,
        headers: {
            'content-type': 'application/json; charset=utf-8',
            'Access-token': sessionStorage.getItem('token') || ''
        },
        responseType: 'blob',  // 设置请求数据格式
        params: { ...data }
    }).then((res: any) => {
        // 创建一个类文件对象:Blob对象表示一个不可变的、原始数据的类文件对象
        let blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' });
        // 设置文件名称,decodeURI:可以对后端使用encodeURI() 函数编码过的 URI 进行解码。encodeURI() 是后端为了解决中文乱码问题
        let fileName = decodeURI(res.headers['content-disposition']);
        // 根据后端返回的数据处理文件名称
        if (fileName) {
            fileName = fileName.substring(fileName.indexOf('=') + 1);
        }
        const a = document.createElement('a')// 创建一个a标签
        a.download = fileName;// 设置a标签的下载属性
        a.style.display = 'none';// 将a标签设置为隐藏
        a.href = URL.createObjectURL(blob);// 把之前处理好的地址赋给a标签的href
        document.body.appendChild(a);// 将a标签添加到body中
        a.click();// 执行a标签的点击方法
        URL.revokeObjectURL(a.href) // 下载完成释放URL 对象
        document.body.removeChild(a)// 移除a标签
    })
};

axiosDownloadFile(url, data)

2.不需要token值直接获取

const download = (url: string, data: PlainObject = {}, method?: 'get' | 'post') => {
    const divElement = document.getElementById('downloadBox') as HTMLElement;
    ReactDOM.render(
        <form action={`${url}`} method={method || 'post'} >
            {Object.keys(data).map((item, index) => (
                <input key={index} name={item} type="text" defaultValue={data[item]} />
            ))}
        </form>,
        divElement
    );
    // eslint-disable-next-line react/no-find-dom-node
    const divNode = ReactDOM.findDOMNode(divElement) as HTMLElement;
    divNode.querySelector('form')?.submit();
    ReactDOM.unmountComponentAtNode(divElement);
};
download(url,  data)

3. 后端直接返回下载excel的地址url

window.location.href = url

完结,撒花✿✿ヽ(°▽°)ノ✿ 如果大家有其他方法可以写在评论区