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

  • 红米充电声音设置在哪里(红米充电声音设置怎么改)

    红米充电声音设置在哪里(红米充电声音设置怎么改)

  • 红米k40是侧边指纹吗(红米k40是侧边指纹还是屏幕指纹)

    红米k40是侧边指纹吗(红米k40是侧边指纹还是屏幕指纹)

  • accesstoken失效什么意思

    accesstoken失效什么意思

  • icloud照片显示同步

    icloud照片显示同步

  • 抖音直播怎么弄管理员(抖音直播怎么弄字幕上去)

    抖音直播怎么弄管理员(抖音直播怎么弄字幕上去)

  • 抖音怎么看点赞记录(抖音怎么看点赞过的作品)

    抖音怎么看点赞记录(抖音怎么看点赞过的作品)

  • 华为荣耀20pro手机怎么剪切图片的一部分(华为荣耀20pro手机多少钱)

    华为荣耀20pro手机怎么剪切图片的一部分(华为荣耀20pro手机多少钱)

  • 手提电脑和笔记本电脑的区别(手提电脑和笔记本电脑哪个好用)

    手提电脑和笔记本电脑的区别(手提电脑和笔记本电脑哪个好用)

  • 苹果手机qq无法打字怎么回事(苹果手机QQ无法接受新消息怎么设置)

    苹果手机qq无法打字怎么回事(苹果手机QQ无法接受新消息怎么设置)

  • oppo手机抢红包提示音怎么设置(OPPO手机抢红包反应灵敏度最快的是哪款?)

    oppo手机抢红包提示音怎么设置(OPPO手机抢红包反应灵敏度最快的是哪款?)

  • 笔记本花屏怎么回事(笔记本花屏怎么关机)

    笔记本花屏怎么回事(笔记本花屏怎么关机)

  • 无法重设密码此apple id无效或不受支持(无法重设密码此id无效或不受支持多长时间自动恢复)

    无法重设密码此apple id无效或不受支持(无法重设密码此id无效或不受支持多长时间自动恢复)

  • qq在线怎么设置离线状态(qq在线怎么设置iphone在线)

    qq在线怎么设置离线状态(qq在线怎么设置iphone在线)

  • 苹果新电池第一次要充多久 (苹果新电池第一次耗电快正常吗)

    苹果新电池第一次要充多久 (苹果新电池第一次耗电快正常吗)

  • 手机上的压缩包能删吗(手机上的压缩包怎么在电脑上打开)

    手机上的压缩包能删吗(手机上的压缩包怎么在电脑上打开)

  • patchwall是安卓系统吗(patchwall和安卓区别)

    patchwall是安卓系统吗(patchwall和安卓区别)

  • 为什么两个苹果手机同时接到电话(为什么两个苹果手机发短信是绿色的)

    为什么两个苹果手机同时接到电话(为什么两个苹果手机发短信是绿色的)

  • 苹果xsmax需要充电几小时(苹果iphonexsmax充电要充多久满?)

    苹果xsmax需要充电几小时(苹果iphonexsmax充电要充多久满?)

  • 小米九什么时候更新miui11(小米九什么时候发布的)

    小米九什么时候更新miui11(小米九什么时候发布的)

  • 手机多个摄像头有什么用(手机多个摄像头的作用)

    手机多个摄像头有什么用(手机多个摄像头的作用)

  • iphone11有没有3dtouch(iPhone11有没有红外线遥控功能)

    iphone11有没有3dtouch(iPhone11有没有红外线遥控功能)

  • oppor9搭载的是什么芯片(oppor9用的是什么处理器啊?)

    oppor9搭载的是什么芯片(oppor9用的是什么处理器啊?)

  • 在win10中,删除文件提示“该项目不存在”该怎么办?(win10删除所有内容是什么意思)

    在win10中,删除文件提示“该项目不存在”该怎么办?(win10删除所有内容是什么意思)

  • 【PaddleOCR-kie】一、关键信息抽取:使用VI-LayoutXLM模型推理预测(SER+RE)(paddle!)

    【PaddleOCR-kie】一、关键信息抽取:使用VI-LayoutXLM模型推理预测(SER+RE)(paddle!)

  • 企业所得税研发费用加计扣除条件
  • 租赁合同印花税计税依据
  • 税务师考试要求核酸检测
  • 个税手续费发给个人怎么做账
  • 增值税期初应补税额计算
  • 土地增值税多交了怎么处理
  • 投资损失怎么进行季度所得税申报
  • 法人转钱进公账要交税吗
  • 固定资产领用原材料要考虑增值税吗?
  • 跨区域施工增值税怎么交
  • 股权转让成本法和权益法
  • 折价退回的会计处理
  • 维修材料属于什么会计科目
  • 个人劳务报酬所得税计算方法2020
  • 销售后换回产品的账务处理怎么做?
  • 劳务外包开票税目由所提供的服务性质来决定
  • 工程类劳务发票
  • 工业投资额是指什么
  • 转口贸易需要申报什么税
  • 平时发票未上传怎么回事
  • 经营出租固定资产折旧额计入什么科目
  • phpwind教程
  • 苹果电脑快速启动键是哪个
  • 苹果手机清理内存怎么清理微信内存
  • 为高新技术企业授牌
  • educoder实现折半查找
  • 禁止扣除项目有什么
  • 个人借款的合法利息是多少
  • 语言翻译算法
  • php中include_once
  • php连接数据库的基本步骤是什么
  • 本月损益类未结转为零的一级科目
  • 探索app下载
  • 小程序开发定制
  • PyTorch深度学习实战 | 基于ResNet的人脸关键点检测
  • 删除组合命令
  • 数据库平移
  • dedecms怎么改图片
  • 所得税的应税所得额
  • 汽车维修行业工时标准
  • 红字发票信息表怎么打印出来
  • 建筑业外管证预审要多久
  • 支付宝付款对面知道名字吗
  • 库存商品可以领用加工吗
  • sqlserver触发器写法
  • 什么叫非限定性不定方程
  • 不抵扣进项税额转出怎么做分录处理
  • 暂估金额与发票金额的区别
  • 公司租赁办公场所,没发票怎么办
  • 无形资产怎么计算公式
  • 来料加工和进料加工的相同之处
  • 小规模主营业务成本是否含税
  • 营改增后如何纳税
  • 减免所得税额a201030怎么填
  • 其他非流动资产是金融资产吗
  • ios 数据库版本升级
  • MySQL利用视图查询员工进货数量要求输出姓名进货数量
  • win8.1安装应用商店
  • apple mac book
  • win7系统升级到win10后,还能还原回来吗
  • windows十桌面
  • 电脑运行慢怎么办?
  • win8操作系统界面
  • win7系统玩红色警戒怎么全屏设置
  • 服务器centos7
  • Linux系统下的Samba客户端配置
  • 惠普笔记本的BIOS键
  • node.js实战
  • bat批处理的if里面双感叹号
  • Python中模块和包的区别
  • js鼠标点击事件监听
  • nodejs mysql库
  • unauthorizedAccessException
  • javascript的主要内容
  • javascript for in
  • 发票代码和发票号码有什么区别
  • 政府收储土地需要缴纳什么税
  • 深圳海关属于省级吗
  • 东莞办理房产证在哪里预约
  • 湖南 资源税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设