React，导出Excel表格的方法

前端点击按钮导出Excel表，以下方法，前提是让后端返回的文件流可以直接请求下载。

意思就是：你通过在浏览器请求接口，传参就可以直接下载文件。

方法一：

window.open('请求地址')

适用于get请求，需要传参的话，直接在地址后面拼接参数即可

此方法的缺点：逻辑是重新打开一个新的页面发请求，因此请求时间较长时会出现空白页。

方法二：

const link = document.createElement("a");
link.href='请求地址';
link.download='文件名.xlsx';
link.click();//点击事件

适用于get请求，需要传参的话，直接在地址后面拼接参数即可

该方法逻辑是用a标签发送请求。在当前页面发送请求，不会出现空白页。

方法三：

     const data = {name:'张三'};//请求参数写这里面var oReq = new XMLHttpRequest();oReq.open("POST", '请求地址', true);oReq.responseType = "blob";oReq.setRequestHeader("Content-Type", "application/json");oReq.send(JSON.stringify(data))oReq.onload = function (oEvent) {var content = oReq.response;var elink = document.createElement('a');elink.download = '文件名.xlsx'elink.style.display = 'none';var blob = new Blob([content]);elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();document.body.removeChild(elink);

此方法是用原生ajax发送请求。

需要注意，请求头的配置。如果项目是用的存储在cookie里面的值去验证用户身份的话，建议不要用这个方法，因为我试了行不通。但是用的localStorage或者sessionStorage存储token验证身份就可以。

本人试了多次，不能用封装好的ajax发请求，猜想大概原因是封装好了的ajax响应拦截器那里会做一些操作，所以不能正常请求下载文件。以上方法就是为了不通过响应拦截器实现获取后端返回的文件流。不知道响应拦截器那里应该怎么配置让文件通过，顺利下载。如果您有想法，请在评论区指导一下，谢谢。

React，导出Excel表格的方法相关推荐

后台管理系统导出Excel表格的方法
//导出Excel公共方法function excelExport(colums,queryParams,objectName,baseUrl,sysUrl,body,title){if(colums ...
layui 导出 Excel表格的方法
一.利用layui自带的excel导出功能 // 原始容器 <table id="demo" lay-filter="test"></tabl ...
使用python将数据导出excel表格
python可用于数据分析,有时候获得了数据需要导出以作其他作用.本文就介绍python导出excel表格的方法. 导出excel表格,python提供了两个库:xlwt,xlrd.本文只讨论 ...
Thinkphp导入、导出Excel表格
Thinkphp中导出Excel表格具体方法如下: 1.在ThinkPHP/Library/Vendor目录下新建文件夹PHPExcel,将excel文件解压后放入文件夹中. (下载地址:链接:htt ...
vue使用xlsx、xlsx-style和fileSaver导出excel表格
本文引用 xlsx-style坑记录 Vue使用xlsx和xlsx-style纯前端导出带样式的Excel vue导出Excel表格,报错utils of undefined 是版本原因前期准备工作 ...
前端 table 导出excel表格方法
需求:获取后台数据,动态生成table后,导出excel表格,要求格式与table格式一致直接上代码: <a id="export">导出</a> < ...
java excil表格开发_JAVA导出Excel电子表格的方法
JAVA导出Excel电子表格的方法 package com.qingruxu.excel; import java.io.File; import java.io.IOException; impo ...
php datatable导出excel,C#_C#实现将DataTable内容输出到Excel表格的方法，本文实例讲述了C#实现将DataTabl - phpStudy...
C#实现将DataTable内容输出到Excel表格的方法本文实例讲述了C#实现将DataTable内容输出到Excel表格的方法.分享给大家供大家参考.具体如下: 1.关于本文本文描述了一个函数 ...
java中使用jxl导出Excel表格详细通用步骤
该方法一般接收两个参数,response和要导出的表格内容的list. 一般我们将数据库的数据查询出来在页面进行展示,根据用户需求,可能需要对页面数据进行导出. 此时只要将展示之前查询所得的数据放入s ...

React，导出Excel表格的方法

React，导出Excel表格的方法相关推荐

最新文章

热门文章