位置: 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压缩解压缩命令)

  • 个人退税需要多少天
  • 小规模纳税人开普票要交税吗
  • 长期股权投资的账面价值怎么计算
  • 无形资产属于货币性项目吗
  • 电子承兑被退回在哪里
  • 其他应收款增加银行存款减少的原因
  • 一般纳税人没有进项怎么交税
  • 税控盘反写显没有数据怎么处理
  • 固定资产改造超过原值多少需要转固
  • 企业购房税费政策
  • 投资收益率中投资总额包括哪些
  • 人力资源外包差额计税税率
  • 办理核定企业所需资料
  • 营养成分表的计算表
  • 公司没有发票的做内账,那么支付款从哪里来
  • 业务招待费不超过销售收入的5‰
  • 公司购买进口产成品关税会计分录怎么做?
  • 总资产平均余额是资产总额吗
  • 在win11
  • 股息红利纳税义务发生地
  • 附加税会计分录2022
  • 工程施工质量罚款措施
  • php lee
  • php socket_write
  • 货到付款怎么做账
  • 夫妻房子归属权问题
  • 西班牙的藏红花好不好
  • 解决方案啥意思
  • 无形资产入账价值包括资本化支出吗
  • 预算超支怎么办
  • Thinkphp和onethink实现微信支付插件
  • 结转生产成本的会计科目
  • aws documentation
  • 数以千计的拼音是什么
  • 企业坏账准备贷方核算内容
  • 织梦使用手册
  • dedecms5.7
  • 单位销售收入不包括哪些
  • 十个提高情商的方法
  • 企业中间投入
  • 销售增长率计算公式财务管理
  • 印花税的征税对象和计税依据
  • 调研费属于什么会计科目
  • 什么情况下增值税计入成本
  • 收到房租的租金怎么做账
  • 房屋租赁费可以加计扣除吗
  • 无形资产土地入账日期怎么确定
  • 应交增值税的结转怎么算
  • 固定资产抵扣影响税负
  • 缴纳社保需要办理什么手续
  • 什么是成本费用,什么是经营成本
  • 发票红冲重新开具怎么做分录
  • 发生额大额标准怎么确定
  • 什么情况下可以不交物业费
  • mysql删除重复字段
  • 利用的英文
  • mysql5.7.29安装
  • SQL Server COALESCE函数详解及实例
  • windows pe无法启动怎么办
  • window10右击
  • unix系统的最大特点
  • windowsp.exe - windowsp是什么进程
  • macos使用方法
  • PHP startup: Unable to load dynamic library错误的错误
  • linux d
  • win10通知栏点击没反应
  • Mac如何设置自动锁屏
  • w10运行命令在哪
  • windows8如何共享打印机
  • 三分钟教你学会骑女式摩托车,连菜鸟都能学会
  • win8 开始
  • unity shader
  • jquery触发点击操作
  • 批处理 读文件
  • python爬虫系统
  • 用nodejs做的项目
  • unity引擎占用内存多少
  • Python默认参数 数组坑
  • python面积
  • 公务员中了彩票怎么领取
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设