咳咳,好久没有写博了。。。

在工作中遇到了纯前端,将数据导出为excel文件。正文开始:

第一步 安装依赖:

  1. npm i xlsx

第二步 写导出函数:

  1. import XLSX from 'xlsx'
  2.  
  3. const exportJsonToExcel = (dataArr) => {
  4. const now = new Date()
  5. const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };//这里的数据是用来定义导出的格式类型
  6. const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
  7. wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(dataArr);//通过json_to_sheet转成单页(Sheet)数据
  8. saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), `导出文件-${now.getFullYear()}${now.getMonth() + 1}${now.getDate()}.${wopts.bookType}`);
  9. }
  10.  
  11. // 导出excel
  12. const saveAs = (obj, fileName) => {
  13. var tmpa = document.createElement("a");
  14. tmpa.download = fileName || "下载";
  15. const href = URL.createObjectURL(obj); //绑定a标签
    tmpa.href = href;
  16. tmpa.click(); //模拟点击实现下载
  17. setTimeout(function () { //延时释放
  18. URL.revokeObjectURL(href); //用URL.revokeObjectURL()来释放这个object URL
  19. }, 100);
  20. }
  21.  
  22. const s2ab = (s) => {
  23. if (typeof ArrayBuffer !== 'undefined') {
  24. var buf = new ArrayBuffer(s.length);
  25. var view = new Uint8Array(buf);
  26. for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  27. return buf;
  28. } else {
  29. var buf = new Array(s.length);
  30. for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
  31. return buf;
  32. }
  33. }
  34.  
  35. export default exportJsonToExcel

第三步 调用exportJsonToExcel方法:

  1. // 处理下载按钮, 少于1000条,则前端下载
  2. handleClickDownload = () => {
  3. exportToExcel(data)
  4. }
  5.  
  6. // 其中传入给exportToExcel的数据格式如下:是一个对象的数组,一个对象是一行的数据,key是表头, value是数据
  7. data = [{'联系电话':item.Tel,
  8. '客户标签':item.CustomerLableValue,
  9. '客户状态':item.StateValue,
  10. '距上次跟进(天)':item.OutTrackDay,
  11. '客户来源':item.SourceValue,
  12. '业务员':item.SalesmanName,
  13. '省份':item.ProvinceName,
  14. '城市':item.CityName,
  15. '区县':item.CountyName,
  16. '学历':item.EducationName,
  17. '性别':item.Gender == 0 ? '男':'女',
  18. '政治面貌':item.PoliticalOutlookName,
  19. 'QQ':item.QQ,
  20. '类型':item.Type==1?'个人客户':'企业客户',
  21. '联系次数':item.ContactNum,
  22. '微信':item.WeChat,
  23. '错误信息': item.ErrorInfo
  24. }]

小结:

第三步的调用非常简单,将想要导出的数据格式化一下,传给exportToExcel方法即可。想哪里调用都可以呦。

第二步,让我新学习了两个方法:URL.createObjectURL() 和 URL.revokeObjectURL() ;

objectURL = URL.createObjectURL(blob):静态方法创建一个字符串,包含blob的url。这个新的url表示指定的File对象或者Blob对象。

                                        每次调用这个方法时候,都会创建一个新的URL对象,即便使用的是相同的参数,因此,需要使用URL.revokeObjectURL() 来释放。

URL.revokeObjectURL(objectURL):   释放需要在使用后释放,如果在使用前释放,则objectURL就为undefined。 举栗子:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  6. <meta charset="UTF-8">
  7. <title>test url</title>
  8. </head>
  9.  
  10. <body>
  11. <p>test revoke before use</p>
  12. <input type="file" id="test" />
  13. <br />
  14. <br />
  15. <br />
  16. <p>test use revoke use</p>
  17. <input type="file" id="test3" />
  18. <script>
  19. $('#test').on('change', function (e) {
  20. var newImg = document.createElement("img");
  21. var url = URL.createObjectURL(e.target.files[0])
  22. console.log(url);
  23.  
  24. newImg.src = url;
  25. URL.revokeObjectURL(url); // 这里释放了!没有图片
  26. document.body.appendChild(newImg);
  27. console.log(url);
  28. });
  29.  
  30. $('#test3').on('change', function (e) {
  31. var newImg = document.createElement("img");
  32. var url = URL.createObjectURL(e.target.files[0])
  33.  
  34. newImg.src = url;
  35. newImg.onload = function () {
  36. URL.revokeObjectURL(url); // onload时候释放,没有问题,因为已经加载完毕!
  37. document.body.appendChild(newImg);
  38. }
  39. });
  40. </script>
  41. </body>
  42.  
  43. </html>
  1.  

前端导出excel数据-jsonToExcel的更多相关文章

  1. 前端导出Excel兼容写法

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

  2. 前端导出Excel

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

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

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

  4. [转] Asp.Net 导出 Excel 数据的9种方案

    湛刚 de BLOG 原文地址 Asp.Net 导出 Excel 数据的9种方案 简介 Excel 的强大之处在于它不仅仅只能打开Excel格式的文档,它还能打开CSV格式.Tab格式.website ...

  5. 前端导出excel表

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

  6. oracle-sql脚本导出EXCEL数据

    在数据库中,经常有业务人员提出需求导出数据库中的业务数据,而且是每天.每周或每月定时导出.为了方便,可将sql查询的脚本 通过下面脚本来导出EXCEL数据. 1.将查询sql脚本(AAA.sql)放到 ...

  7. js前端导出excel

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

  8. flask使用tablib导出excel数据表

    在网页中常常有导出数据的需求,尤其是一下管理类平台.在flask中要导出excel数据表,通常可以使用xlwt库,创建文件并逐行写入数据,但是使用起来总是感觉很麻烦.tablib库相对操作更加方便. ...

  9. vue导出excel数据表格功能

    前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来. 第一步安装依赖包,需要把代码下载你的项目当中 cnpm install  file-saver c ...

随机推荐

  1. java实现多线程使用多个代理ip的方式爬取网页页面内容

    项目的目录结构 核心源码: package cn.edu.zyt.spider; import java.io.BufferedInputStream; import java.io.FileInpu ...

  2. hibernate封装Until工具类

    public class HibernateUntil { private static SessionFactory sessionfaction; //一个web项目确保只调用一个sessionf ...

  3. python语法_模块_re(正则表达)

    字符串操作方法有: s = 'hello word' s.find('l') 查询第一个l的索引 s.replace('ll','xx') 替换 s.split('w') 以w进行分割 这些都是完全匹 ...

  4. LeetCode编程训练 - 拓扑排序(Topological Sort)

    拓扑排序基础 拓扑排序用于解决有向无环图(DAG,Directed Acyclic Graph)按依赖关系排线性序列问题,直白地说解决这样的问题:有一组数据,其中一些数据依赖其他,问能否按依赖关系排序 ...

  5. 麒麟子Cocos Creator实用技巧

    大家好,我是麒麟子, 开源棋牌<幼麟棋牌-四川麻将>(泄漏版叫 <达达麻将>)作者,成都幼麟科技创始人. 自09年进入游戏行业以来,不知不觉已经度过了十个春秋. 曾经我也血气方 ...

  6. Node.js(day4)

    一.一些小问题 1.文件操作路径和模块读取路径的问题 我们使用fs核心模块系统进行文件操作时一般这样书写路径 fs.readFile('./views/index.html');//读取views目录 ...

  7. linux入门--Linux和UNIX的关系及区别

    UNIX 与 Linux 之间的关系是一个很有意思的话题.在目前主流的服务器端操作系统中,UNIX 诞生于 20 世纪 60 年代末,Windows 诞生于 20 世纪 80 年代中期,Linux 诞 ...

  8. 多机部署redis5.0集群环境

    redis5.0集群部署 一.集群介绍 Redis 集群是一个可以在多个 Redis 节点之间进行数据共享的设施(installation). Redis 集群不支持那些需要同时处理多个键的 Redi ...

  9. Django2.0版本 path与Django1.x版本url正则匹配问题

    Django1.x版本url正则匹配如下: Django2.0版本正则匹配则要导入re_path模块如下:

  10. PV UV QPS 并发数

    TPS(Transactions Per Second):每秒事务数 QPS(Query Per Second):每秒请求数,QPS其实是衡量吞吐量的一个常用指标,就是说服务器在一秒的时间内处理了多少 ...