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

  • 电脑上微信聊天记录怎么删除(电脑上微信聊天记录怎么删除干净)

    电脑上微信聊天记录怎么删除(电脑上微信聊天记录怎么删除干净)

  • 荣耀X30Max支持nfc吗(荣耀x30max支持nfc吗)

    荣耀X30Max支持nfc吗(荣耀x30max支持nfc吗)

  • 12306积分怎么获得呢(怎么获得12306积分)

    12306积分怎么获得呢(怎么获得12306积分)

  • 华为nova5pro有5g吗(华为nova5pro有5G功能吗)

    华为nova5pro有5g吗(华为nova5pro有5G功能吗)

  • 智慧团建搜不到转入组织(智慧团建搜不到新建的团支部)

    智慧团建搜不到转入组织(智慧团建搜不到新建的团支部)

  • 拼多多闪电退货可以关掉吗(拼多多闪电退货是什么意思)

    拼多多闪电退货可以关掉吗(拼多多闪电退货是什么意思)

  • 华为手机怎样下载拼多多app到手机上(华为手机怎样下载app软件)

    华为手机怎样下载拼多多app到手机上(华为手机怎样下载app软件)

  • 注销qq空间后自己还可以看吗(注销qq空间后自己能看到吗)

    注销qq空间后自己还可以看吗(注销qq空间后自己能看到吗)

  • 华为P30怎样下载优酷(华为p30怎样下载电影)

    华为P30怎样下载优酷(华为p30怎样下载电影)

  • wps邮件合并没有合并规则吗(wps邮件合并没有规则怎么办)

    wps邮件合并没有合并规则吗(wps邮件合并没有规则怎么办)

  • 闪充充电器可以给普通手机充电吗(闪充充电器可以充别的手机吗)

    闪充充电器可以给普通手机充电吗(闪充充电器可以充别的手机吗)

  • 苹果和安卓蓝牙可以互传吗(苹果和安卓蓝牙怎么传照片)

    苹果和安卓蓝牙可以互传吗(苹果和安卓蓝牙怎么传照片)

  • 手机桌面找不到支付宝(手机桌面找不到微信图标)

    手机桌面找不到支付宝(手机桌面找不到微信图标)

  • 苹果手机面容怎么设置(苹果手机面容怎么修复)

    苹果手机面容怎么设置(苹果手机面容怎么修复)

  • 快速免核验购票什么意思(免核验联系方式购票)

    快速免核验购票什么意思(免核验联系方式购票)

  • ipad pro11可以接鼠标吗(ipadpro11能用typec耳机吗)

    ipad pro11可以接鼠标吗(ipadpro11能用typec耳机吗)

  • ios9.0系统在哪下载(ios9.3.5下载)

    ios9.0系统在哪下载(ios9.3.5下载)

  • 华为手环3怎么开机操作(华为手环3怎么调时间和日期)

    华为手环3怎么开机操作(华为手环3怎么调时间和日期)

  • 华为信任在哪里设置(华为信任app)

    华为信任在哪里设置(华为信任app)

  • 手机怎样查看别人的qq密码(手机怎样查看别人的聊天记录)

    手机怎样查看别人的qq密码(手机怎样查看别人的聊天记录)

  • 蓝牙耳机不煲机会怎样(蓝牙耳机不煲机后果)

    蓝牙耳机不煲机会怎样(蓝牙耳机不煲机后果)

  • oppor17投屏功能怎么用(oppor17手机投射屏幕教程)

    oppor17投屏功能怎么用(oppor17手机投射屏幕教程)

  • 拼多多怎么复制口令到微信(拼多多怎么复制口令)

    拼多多怎么复制口令到微信(拼多多怎么复制口令)

  • AI视频是什么(ai视频怎么做)

    AI视频是什么(ai视频怎么做)

  • 小米8wifi已连接不可上网(小米8wifi连接速度72m)

    小米8wifi已连接不可上网(小米8wifi连接速度72m)

  • 饿了么退款红包退吗(饿了么退款红包会退回吗)

    饿了么退款红包退吗(饿了么退款红包会退回吗)

  • 苹果非原装电池的坏处(苹果非原装电池弹窗)

    苹果非原装电池的坏处(苹果非原装电池弹窗)

  • Echarts图表自适应?你可以这样做(echarts图大小设置)

    Echarts图表自适应?你可以这样做(echarts图大小设置)

  • 企业境外参展 人员成本
  • 转入公账怎么做账
  • 车间设备折旧费属于制造费用吗
  • 可辨认净资产和所有者权益的区别
  • 税控服务费属于什么费用
  • 注册公司认缴资本不缴可以吗
  • 小企业准则汇兑损失计入什么科目
  • 个人厂房租赁税率是多少
  • 职工宿舍楼日常管理制度
  • 施工单位名称变更需要变施工许可证吗
  • 项目规划设计费用取费标准
  • 材料税款抵扣
  • 本月发放上月工资情况说明
  • 增值税专用发票有效期是多长时间
  • 进项发票未抵扣部份开红冲后当月能抵扣吗?
  • 员工服装属于什么费用类型
  • 增值税(滞纳金)
  • 下属单位或者其他单位和个人的车辆
  • 房租费进项税能不能抵扣
  • 资产减值损失借方余额在利润表怎么填列
  • 礼品发票怎么入账
  • 固定资产报废的净损失计入哪里
  • linux 将一个文件的内容给另一个文件
  • 独立账户负债核算内容
  • 销售折让负数会计分录
  • 自创商誉可确认为商誉且在资产负债表中列报
  • vue3+element-plus Dialog对话框的使用 与 setup 写法的使用
  • 存货的盘亏损毁和报废
  • 海峡群岛属于哪个洲
  • 公司员工社保由总公司代缴证明
  • 小规模企业购入固定资产怎么做账务处理
  • 账龄分析法计提比例
  • PHP基于什么语言
  • 增值税密码锁定怎么办
  • php 压缩文件
  • 垃圾清运费进入会计什么科目
  • 应收账款收不回来
  • 企业报废原材料如何处理
  • 去银行取对账单需要带什么
  • 企业低值易耗品的摊销方法有
  • 单位销售收入不包括哪些
  • 应收票据及应收账款包括哪些科目
  • 合并成本和初始的区别
  • 自制小汽车
  • 装修费用应该计入什么科目
  • 增值税怎么开
  • 物业费的会计处理
  • 分公司能
  • 五险一金缴纳比例2023
  • 子公司与母公司承担连带责任
  • 购买方已认证销售方作废
  • 公司给别人公司过账应该注意哪些
  • 免费品尝活动广告语
  • 租赁收入属于什么行业
  • 递延所得税资产怎么计算
  • 集团公司对子公司总经理的绩效考核
  • 销项税现金流量附表如何指定
  • 防御sql注入的方法有哪几种
  • mysql建唯一索引
  • mysql 5.7.22安装教程
  • windows预览版计划
  • w3dbsmgr.exe是什么进程
  • 微软9月补丁
  • 在windows中下列叙述正确的有
  • 安装xp后win7不能用怎么办
  • Windows Server 2012服务器管理器的详细介绍
  • Win7系统文件损坏怎么修复
  • cocos引擎教程
  • android 字体设置
  • es6 new set()
  • 在javascript中逻辑运算符包括
  • JavaScript中的方法名不区分大小写
  • javascript怎么学
  • android 屏幕适配方案
  • bootstrap的组件
  • bootstrap js插件
  • 税务迁出需要哪些手续2020年
  • 医保电子凭证怎么激活
  • 税务系统个人业务自传
  • 非居民企业机构场所核定征收
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设