位置: IT常识 - 正文

JS实现把表格数据导出,并生成为excel下载到本地(js处理表格数据)

编辑:rootadmin
JS实现把表格数据导出,并生成为excel下载到本地

推荐整理分享JS实现把表格数据导出,并生成为excel下载到本地(js处理表格数据),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js操作excel表格,js将数据以表格形式显示,js制作表格代码,js给表格赋值,js制作表格代码,js给表格赋值,js怎么输出表格,js将数据以表格形式显示,内容如对您有帮助,希望把文章链接给更多的朋友!

最近开发页面用到了导出功能,之前也没有做导出为excel功能的经验,经过各方面查询尝试之后,终于成功实现,所以来总结一下

首先,你需要下载xlsx.js插件,并在HTML头部文件中需要引入,我是直接用命令行下载的:npm install xlsx --save

前端写一个按钮绑定函数:

<button @click="generateReport(0)">导出</button>

js部分实现函数,因为我的数据是通过ajax从后端获取的,没有后端数据就自己编造一个,代替我代码中的this.ExcelData,或者不需要this.ExcelData,直接把return里面的内容改成你需要的,比如:你想要的表格列名1:你想要的数据1,

JS实现把表格数据导出,并生成为excel下载到本地(js处理表格数据)

你想要的表格列名2:你想要的数据2 这样

//报表导出generateReport:function(no){$.ajax({url: '/generateReport',type: 'POST',context: this,data: {'FLAG':no}}).done(function (data){console.log('opqrst',data);this.ExcelData = _.cloneDeep(data);let arr=this.ExcelData.map(item=>{return {阵列名称:item.SUBARRY_NAME,通讯箱名称:item.COMMUNICATION_BOX_NAME,通讯箱状态:item.COMMUNICATION_BOX_STATE,跟踪器名称:item.TRACKER_NAME,跟踪器状态:item.TRACKER_STATE,跟踪模式:item.TRACKING_MODEL,目标角度:item.TARGET_ANGLE,实际角度:item.MEASURED_ANGLE,};});console.log('version',XLSX.version);let sheet=XLSX.utils.json_to_sheet(arr),book=XLSX.utils.book_new();// sheet1表示要导出的分区名字XLSX.utils.book_append_sheet(book,sheet,"sheet1");console.log("book",book)// user开头加时间戳的文件名,可以修改成其它名字XLSX.writeFile(book,`设备列表${(new Date()).getTime()}.xls`);})},

成功后测试导出:

打开浏览器的下载内容就可以查看表格:

打开xls文件,可以看到excel文件导出下载成功了:

提示:开发过程中遇到了一个报错:

XLSX.utils.json_to_sheet is not a function ,据说可能是因为 xlsx 版本问题导致的,所以在在调用 XLSX.utils.json_to_sheet() 方法前我控制台输出了自己的xlsx的版本号

console.log(XLSX.version)

百度说 0.8.8 以下版本不支持 json_to_sheet() 方法,但是我是0.8.11,不知道为啥也不支持,所以我又把原来的插件删掉了,重新下载最新版:npm install xlsx@0.14.5 --save,就ok了

本文链接地址:https://www.jiuchutong.com/zhishi/297298.html 转载请保留说明!

上一篇:自己的智能AI聊天机器人,可自定义头像,免费html源码分享,粘贴即用!(自己的智能ai聊天怎么用)

下一篇:12+ .tar 压缩和解压文件命令的用法记录(tar压缩解压缩命令)

  • 增值税减免税申报明细表举例
  • 对母公司的其他说法
  • 土地出让价款
  • 期末现金及现金等价物余额公式
  • 个人转让土地使用权
  • 上市公司回购优先股
  • 企业收到银行收款通知
  • 进口报关手续费
  • 企业给员工的异地安家费交个税吗?
  • 生产用水的会计分录
  • 个体户如何报年报
  • 租赁房租备案要多久
  • 金税三期啥意思
  • 季度报税每个月还用计提吗
  • 继承或赠与所得的房产
  • 定期定额户开具增值税专用发票如何申报
  • 安装属于劳务报酬吗
  • 试营业生产的样品怎么做账?
  • 工会经费的会计分录2023
  • 无票收入报税后,后期又开票出去怎么处理?
  • 银行收取年费是什么意思
  • 如何开展分公司
  • 孕妇可以喝蜂蜜水吗?
  • linux如何开启端口
  • 企业签订的借款合同印花税
  • php总结
  • 土地出让金可以代缴吗
  • kb4586819更新
  • services.exe是什么服务
  • sguard是什么
  • PHP:curl_close()的用法_cURL函数
  • 弃置费用的会计核算
  • hhcol.exe
  • 发行股票溢价计入哪里
  • 金融企业计提资产减值准备是根据会计核算的
  • php如何实现
  • 神经网络浅讲
  • 使用jquery的好处
  • php基本语句
  • 电子税务局已申报的财务报表怎么修改
  • 基建工程转固定资产
  • 帝国cms使用手册
  • phpcms v9网页禁止复制
  • SQL中print、sp_helptext的限制与扩展
  • 股权激励和期权激励
  • row number函数的使用场景
  • 收到缴纳个人所得税短信
  • 费用支出要求
  • 限定性净资产包括哪三个方面
  • 购买土地的流程
  • 挂靠被查出来后挂靠费怎么处理?
  • 员工报销材料费用会计分录
  • 进项税转出补缴增值税 城建税及两费
  • 印花税退回计入什么科目
  • 物业公司开专票税率是多少
  • linux ubuntu安装教程
  • linux那些事儿
  • 安装solaris11
  • 如何使用U盘装机
  • linux的文件和目录的区别
  • win7游戏打开没反应
  • 博通网卡驱动win7
  • linux虚拟空间
  • linux常用命令详解
  • JavaScript程序设计形考答案
  • node.js配置
  • 杂志内页广告
  • django 验证码
  • js浅拷贝的方法
  • Linux删除大量文件
  • Xamarin.Android 入门开发
  • js对象类型的语法规则
  • node-js
  • android性能优化面试题
  • 安卓瀑布流
  • 税务 涉税中介
  • 安徽地税局领导班子名单
  • 金税盘白盘如何换纽扣电池
  • 佛山退休办理
  • 两会热点有哪些呀?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设