post导出文件【fetch】

夏暖冬凉

已于 2023-11-09 09:48:24 修改

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript

于 2022-03-23 17:27:41 首次发布

本文链接：https://blog.csdn.net/qq_45487080/article/details/123691576

本文探讨了项目中通过GET和POST方式导出Excel文件的差异，着重讲解了GET方法的字符长度限制，以及POST方式如何使用blob对象处理大文件，包括async/await实现流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中导出excel文件很常见，分为get和post方式，get相对简单些，在url后面拼接需要的参数即可
get请求方式拼接参数长度上限为2083，超过这个长度导出excel失败

post方式请求返回的是流文件，需要使用blob对象指定要读取的数据，在此记录下

   fetch(url, {
     method: 'POST',
     body: JSON.stringify({}), // 这里放请求数据
     headers: {
       'Content-Type': 'application/json',
     },
   }).then((res) =>{
     return res.blob();
   }).then(response=>{
     const blob = new Blob([response], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}); // 导出.xlsx结尾的文件
     const a = document.createElement('a');
     a.href = window.URL.createObjectURL(blob);
     a.download = '项目销售班型业绩表'+".xlsx";
     a.click();
     // 释放URL对象
   	 URL.revokeObjectURL(a.href);
   })

async&await用法

(async function () {
    try {
        const res = await fetch(url, {
            method: 'POST',
            body: JSON.stringify({}), // 这里放请求数据
            headers: {
                'Content-Type': 'application/json',
            }
        })
        const data = await res.blob()
        const blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); // 导出.xlsx结尾的文件
        const a = document.createElement('a');
        a.href = window.URL.createObjectURL(blob);
        a.download = '项目销售班型业绩表' + ".xlsx";
        a.click();
        // 释放URL对象
   	 	URL.revokeObjectURL(a.href);
    } catch (error) { }
})()