1.首先下载 js-export-excel

npm install js-export-excel;

2.下载 xlsx

npm install xlsx;

3.引入

   import * as XLSX from 'xlsx'
   import ExportJsonExcel from 'js-export-excel'
 
4.定义方法
   
   downloadFileToExcel = () => {

        let option = {};  //option代表的就是excel文件
        option.fileName = 'demo表';  //excel文件名称
        option.datas = [
            {
                sheetData: this.state.dataTable,  //excel文件中的数据源
                sheetName: 'demo',  //excel文件中sheet页名称
                sheetFilter: ['你的名称', '我的名称', '你的编号', '我的方案'],  //excel文件中需显示的列数据
                sheetHeader:['你的名称', '我的名称', '你的编号', '我的方案']  //excel文件中每列的表头名称
            }
        ]
        let toExcel = new ExportJsonExcel(option);  //生成excel文件
        toExcel.saveExcel();  //下载excel文件
    }
 
5.调用后台接口获取数据源
   
   axios.post('后台接口地址').then(res=>{
         this.state.dataTable = [];
         data.map(item=>{
              // 表头一一对应
              this.state.dataTable.push(
                        {
                            '你的名称':item.YourName,
                            '我的名称':item.MyName, 
                            '你的编号':item.YourNo, 
                            '我的方案':item.MyNo
                        }
                    )
              })
             // 调用导出excel方法
             this.downloadFileToExcel()
   })
 
这样就完完整整的实现了前端导出excel的方法了

react 前端导出Excel的更多相关文章

  1. 前端导出Excel兼容写法

    今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...

  2. 前端导出excel表

    前端导出excel表 方式一: 前端js实现 : https://www.cnblogs.com/zhangym118/p/6235801.html 方式二: java后端实现: https://bl ...

  3. 前端导出Excel

    1.首先,需要下载一个叫better-xlsx,的插件,以yarn 为例 ' yarn add better-xlsx --save '下载相关依赖包( npm 方式 ' npm i better-x ...

  4. js前端导出excel

    此例子是利用html特性,纯前端导出excel,样式不好看,兼容主流浏览器. var tableid = jQuery(this).closest("div.tab-label-wrap&q ...

  5. 踹掉后端,前端导出Excel!

    前言 导出Excel文件这个功能,通常都是在后端实现返回前端一个下载链接,但有时候我们只想导出前端页面上已经有了的数据,不想再调后端导出接口浪费服务器资源,学习本文demo例子,我们踹掉后端,直接在前 ...

  6. 前端导出excel数据-jsonToExcel

    咳咳,好久没有写博了... 在工作中遇到了纯前端,将数据导出为excel文件.正文开始: 第一步 安装依赖: npm i xlsx 第二步 写导出函数: import XLSX from 'xlsx' ...

  7. vue项目,前端导出excel

    今天研究一下前端如何导出excel,边查边实践,边记录 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还涉及不少二进制的东西 file-saver:ES5新增了相关 ...

  8. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

  9. js前端导出excel:json形式的导出

    第一中形式的导出:主要是表头对应主体数据,json形式的导出 js库文件名称 : table2excel.js这个js库文件是网上找的,并且自己根据自己业务需求把内容改了一下复制到 table2exc ...

  10. Vue实现在前端导出Excel 方法2

    也可以去看下我的方法1:https://www.cnblogs.com/yingyigongzi/p/10915382.html ----------------------------------- ...

随机推荐

  1. docker compose设置不同容器间通信

    docker compose新启动了一个容器,这个时候怎么去连接到其他容器呢,去容器里面ping发现不通.一般来说是因为和其他容器没有在一个网络环境里面.首先用命令查看一下当前存在哪些网络环境. 使用 ...

  2. Windows打开回收站的几种方式

    1. 桌面双击回收站图标打开回收站,简单.快捷.方便,但在打开多个窗口时候还要最小化这些窗口以显示桌面,如果还要迅速恢复这些窗口的话也算是麻烦 2. 磁盘每个分区根目录下都有一个名称为$Recycle ...

  3. oracle学习之redo

    Oracle的重做日志基本概念及原理 重做日志文件 redo log file 通常也称为日志文件,它是保证数据库安全和数据库备份与恢复的文件,是数据库安全和恢复的最基本的保障.管理员可以根据日志文集 ...

  4. vue pdf下载(非预览)

    只需改掉 选择器名称 和 图片存放的URL 即可使用 downloadimg(){ let _this=this let url = 'https://PDF或者图片路径/Merged.pdf' le ...

  5. Java项目引入第三方Jar包

    普通java Project 引入jar包: 1,copy jar to lib folder. 2, imported with Build path -> Add external jars ...

  6. redis的持久化方案RDB和AOF

    RDB:快照形式,定期把内存中当前时刻的数据保存到磁盘.Redis默认支持的持久化方案.速度快但是服务器断电的时候会丢失部分数据 AOF形式:append only file.把所有对redis数据库 ...

  7. linux kali 报错Intel VT-x

    报错原因:第一次安装虚拟机intel vt-x 处于禁用状态,没有启用 分析思路:找到 Intel vt - x 位置,并打开 .(intel - x在bios) 解决方法: 联想笔记本为例:进入bi ...

  8. Ngrinder(性能测试工具)-(一)

    一.ngrinder介绍 nGrinder 是基于Grinder开源项目,由NHN公司的开发团队进行了重新设计和完善. nGrinder 是一款非常易用,有简洁友好的用户界面 和 controller ...

  9. min-max 容斥简记

    min-max 容斥实际上就是这么个式子: \[\max(S_k) = \sum\limits_{T\subseteq S} (-1)^{|T|-k}\dbinom{|T|-1}{k-1}\min(T ...

  10. CF446D 题解

    题意 传送门 给定一张 \(n\) 个点 \(m\) 条边的无向图,每个节点有权值 \(v_i=\) \(0/1\).角色从节点 \(1\) 开始随机游走,走到 \(n\) 停止.求其经过路径上权值和 ...