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

  • 建筑企业如何纳税
  • 自然人独资企业有公司章程吗
  • 代扣代缴个人所得税如何做账
  • 非税缴税是什么意思
  • 一般纳税人的增值税征收方式的特点是
  • 企业出售房产要交哪些税
  • 进销存工作流程
  • 付境外公司佣金怎么做账
  • 预付软件款的分录
  • 物业费免交条件
  • 单用途卡与多用途卡
  • 国有企业改制资产评估增值税收规
  • 营改增对房地产行业的影响
  • 短期借款可以按币种设置明细核算
  • 土地转让交哪些税种
  • 建筑企业简易计税异地预缴
  • 固定资产采用工作量法计提折旧怎么算
  • 建筑材料资源利用
  • 借款可以转注资款吗
  • 汇算清缴补交的所得税怎么记帐
  • 未收到发票可以计提成本吗
  • 当期应税销售收入是含税还是不含税
  • 应税凭证和纳税凭证的区别
  • 企业的免税收入用于支出所形成的费用或财产
  • 可转债转换为股权投资的企业所得税处理
  • 售后回租 出租方
  • 电子税务局如何查询已开发票
  • 转账支票用途可以写劳务费吗
  • 外籍人员取得数月奖金怎么交税
  • 期末调汇的会计处理
  • 关于工程材料的图书有哪些
  • mac教程视频
  • Mac怎么更改默认打开方式
  • 在银行按揭贷款买房是抵押吗
  • 增加注册资本的请示
  • 本部借给分公司的钱用交印花税吗
  • 矿业财务好做吗
  • 大雾山国家公园在哪里
  • mysql+php
  • thinkphp pathinfo
  • 固定资产发票税率多少
  • ps渐变透明效果怎么弄
  • php手机验证码验证
  • 什么是零申报制度
  • js数组 filter
  • 商业承兑汇票退回给上手公司怎么操作
  • mysql存储过程之错误处理
  • 销项负数会计分录怎么写
  • mysql更新语句
  • 收款金额比开票金额多怎么处理
  • 无形资产比如
  • 研发活动发生的费用
  • 以长期股权投资换入存货
  • 股票期权的所得税处理
  • 现金流量比率是什么意思
  • 母公司销售给控股子公司
  • 信息技术服务费可以全额抵扣吗
  • 人工成本包括哪些项目
  • 分享一下相亲时碰见过哪些奇葩事
  • xp系统cmd怎么打开
  • windows8命令提示符命令大全
  • window怎么样
  • linux配置raid5方法
  • win7 64位系统安装绘声绘影8提示已安装另一个版本的解决方法
  • 卸载声卡驱动有什么影响
  • linux基金会什么时候成立
  • mac笔记本如何设置不黑屏
  • 技术故事是什么意思
  • Android通过HttpURLConnection获取JSON并进行UI更新
  • java gravity
  • mac打开多个窗口
  • angularjs4
  • 安卓自定义状态栏图标
  • jquery easyui从零开始学pdf
  • js中unbind
  • javascript语言入门教程
  • android开发前景
  • 税务上成品油换算
  • 建筑业增值税纳税义务发生时间包括
  • 盈利性组织与非盈利性组织公共关系不同之处
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设