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

  • 已认证进项税额怎么结转
  • 网吧是否征收文物保护费
  • 小规模纳税人不开票收入怎么报税
  • 专用凭证和通用凭证的联系和区别
  • 破产清算收到的实收资本是破产资产吗
  • 财产行为税计税依据
  • 货币性短期薪酬影响损益的金额
  • 事业单位存货盘亏会计分录
  • 成本未取得发票
  • 退休人员基本养老金调整幅度需要综合考虑什么因素
  • 促销赠品的会计处理
  • 融资租赁与经营租赁相比具有的优势
  • 查账征收企业所得税年度申报
  • 金税三期里有员工无工资如何申报?
  • 清包工如何纳税
  • 纳税人在什么情况下可以申请延期申报
  • 无租使用房产协议
  • 礼品发票怎么入账
  • 会计中的贷款核算分录是什么?
  • 网络适配器感叹号代码43
  • 打开软件窗口后如果没有出现属性面板可执行
  • 关于暂时性差异的所得税会计处理,正确的是
  • windows11怎么安装iis
  • win10默认网关自动清空
  • 电脑文件删除怎么恢复找回
  • ev4是什么文件
  • 高新技术企业的研发费用加计扣除
  • 最高像素的镜头是多少
  • 阿贡火山经常性爆发的原因
  • 股权划转是否涉及印花税
  • 外贸出口退税进项发票勾选
  • 使用二氧化碳灭火器时人应该站在什么位置
  • 企业应交税费科目
  • php 字符串处理函数
  • JavaScript之Ajax-axios表单提交
  • 2022年 change detection遥感图像变化检测 论文附代码
  • 微信小程序上面有个音乐怎么关闭
  • 编程 开发
  • 原生php和框架php的区别
  • php接收post
  • 小微企业开通社保
  • 软件开发增值税减免政策
  • 无法支付其他应用怎么办
  • 增值税普通发票查询真伪
  • 暂估入库成本结转处理低于实际成本怎么办
  • 小规模开票软件怎么升级
  • mysql版本5.5.x升级到5.6.x步骤分享
  • 博客首页设计
  • 平台收取佣金开什么发票
  • 处置废品收入税率
  • 对公账户的钱都可以取吗
  • 上级补助收入是指事业单位从主管部门和上级单位取得的
  • 长期待摊费用如何记账
  • 付款后退货
  • 营改增和个税改革的意义
  • 企业进项税额大于销项税额
  • 内地汇丰银行账户管理费
  • 销售折扣含义
  • 企业接受供应单位提供劳务而发生的应付账款
  • 出口货物质量不足怎么办
  • 律师事务所优惠政策
  • 发票已到款未付怎么做账
  • 计税金额是什么科目
  • xp系统控制面板在哪里打开
  • 微软为什么不自己做电脑
  • win8管理工具在哪里
  • macbook截图快捷键是哪个键
  • searchnav.exe - searchnav是什么进程 有什么用
  • nerosmartstart.exe - nerosmartstart是什么进程 作用是什么
  • 电脑自带win8是装win7还是win10
  • 如何开启金山毒霸
  • win8怎么固定桌面图标
  • unity3d ugui优化
  • linux使用adb
  • pymysql作用
  • JS中call/apply、arguments、undefined/null方法详解
  • unable to instantiate decoder
  • 税务认证系统如何操作
  • 外经证怎么核验
  • 高速公路通行费的税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设