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

  • 数据条怎么设置百分比进度条(渐变填充红色数据条怎么设置)

    数据条怎么设置百分比进度条(渐变填充红色数据条怎么设置)

  • dwg是什么文件(dwg是什么文件格式电脑怎么打开)

    dwg是什么文件(dwg是什么文件格式电脑怎么打开)

  • 注销qq以后影响邮箱吗(注销qq以后影响微信吗)

    注销qq以后影响邮箱吗(注销qq以后影响微信吗)

  • 小爱音箱不接受指令(小爱音箱不互动怎么回事)

    小爱音箱不接受指令(小爱音箱不互动怎么回事)

  • 4g协议标准(4g接口与协议)

    4g协议标准(4g接口与协议)

  • 华为手机怎么安装未知应用权限(华为手机怎么安装谷歌三件套)

    华为手机怎么安装未知应用权限(华为手机怎么安装谷歌三件套)

  • 保持微型计算机正常运行必不可少的输入输出设备是(保持微型计算机正常运行必不可少的输出设备是)

    保持微型计算机正常运行必不可少的输入输出设备是(保持微型计算机正常运行必不可少的输出设备是)

  • 芒果tv账号是昵称吗(芒果tv帐号)

    芒果tv账号是昵称吗(芒果tv帐号)

  • 美版两网跟三网的区别(美版两网什么意思)

    美版两网跟三网的区别(美版两网什么意思)

  • 5g出来了4g会变慢吗(5g出现以后4g还能用吗)

    5g出来了4g会变慢吗(5g出现以后4g还能用吗)

  • 待成团是什么意思(成团在即什么意思)

    待成团是什么意思(成团在即什么意思)

  • 家庭wifi网速慢原因(家庭wifi网速慢怎么解决)

    家庭wifi网速慢原因(家庭wifi网速慢怎么解决)

  • 华为nova6se什么时候发布(华为nova6se什么时候上市的)

    华为nova6se什么时候发布(华为nova6se什么时候上市的)

  • 淮安公交可以刷支付宝吗(淮安公交可以刷银行卡吗)

    淮安公交可以刷支付宝吗(淮安公交可以刷银行卡吗)

  • 华为gt2可以微信语音吗(华为gt2微信来消息不亮屏)

    华为gt2可以微信语音吗(华为gt2微信来消息不亮屏)

  • 怎样把视频和图片拼在一起(怎样把视频和图片放在一起播放)

    怎样把视频和图片拼在一起(怎样把视频和图片放在一起播放)

  • 选取多个文件的快捷键(选取多个文件的命令)

    选取多个文件的快捷键(选取多个文件的命令)

  • 分辨率300dpi什么意思(分辨率300dpi是英寸还是厘米)

    分辨率300dpi什么意思(分辨率300dpi是英寸还是厘米)

  • oppoA57是什么处理器(oppo a57是什么)

    oppoA57是什么处理器(oppo a57是什么)

  • 小米一键换机闪退是为什么(小米一键换机闪屏怎么办)

    小米一键换机闪退是为什么(小米一键换机闪屏怎么办)

  • 金立gn8002s什么型号(金立gionee gn8002)

    金立gn8002s什么型号(金立gionee gn8002)

  • 微信里石头剪刀布在哪里(微信里石头剪刀布怎么玩)

    微信里石头剪刀布在哪里(微信里石头剪刀布怎么玩)

  • 让Mac桌面变整洁的4种实用方法提升你的形象(macbookpro桌面整理)

    让Mac桌面变整洁的4种实用方法提升你的形象(macbookpro桌面整理)

  • win10修改密码教程(win10系统修改密码)

    win10修改密码教程(win10系统修改密码)

  • 多种方法解决前后端报出的SyntaxError: xxx is not valid JSON的问题,比如“[object Object]“ is not valid JSON(有什么办法解决前进中的问题)

    多种方法解决前后端报出的SyntaxError: xxx is not valid JSON的问题,比如“[object Object]“ is not valid JSON(有什么办法解决前进中的问题)

  • 小规模纳税人增值税起征点
  • 小规模纳税人申请一般纳税人条件
  • 广告牌制作加盟厂家
  • 购进固定资产的安装费计入原值吗?
  • 本年利润期末有无余额
  • 进项税额转出有什么影响
  • 酒销售账务处理
  • 政府无偿划拨土地涉及的税费
  • 已计提的固定资产减值准备累计金额
  • 商品折扣促销方式的会计处理如何做?
  • 支付开票税款计入什么科目
  • 开专票还要另外再交钱么
  • 小微企业减半征收城建税
  • 营改增后进项税相关规定
  • 水利建设专项收入的税率是多少?
  • 通用申报表个人所得税应税项怎么填
  • 企业所得税能扣除的税金
  • 加盟费没有发票怎么做账
  • 红字增值税发票含税吗
  • 收取对方损失赔偿
  • 工厂材料成本改善报告范文
  • 研发费用的税收政策
  • 企业对外股权投资涉及税收
  • 母公司是否应替子公司承担违约责任
  • php面向对象是什么意思
  • 网络环境中存在不同网段的nvr
  • linux的vi编辑器怎么用
  • 小规模纳税人没有进项发票怎么办
  • 有进项没销项怎么处理,可以结转成本吗
  • 其他暂收和应付账款区别
  • 契税计税依据是成交价还是评估价?
  • 购车人丢失发票怎么查
  • 阿尔卑斯山城市
  • 进出口公司如何做账
  • php函数名
  • 应收账款的账期是什么意思
  • vue做项目的流程
  • php禁用函数怎么删除
  • php魔术方法autoload
  • 减资资产负债表怎么填
  • 帝国cms app
  • 增值税出口税
  • 土地使用税的征税范围有哪些
  • mysql表设计原则
  • 事业单位政府拨款的会计分录
  • 税前扣除项目主要包括
  • 专项资金如何进行管理
  • 固定资产一次性计入费用的账务处理
  • 有限合伙企业如何报税
  • 没有收入有支出怎么处理账务
  • 药品进销差价科目明细
  • 企业支付宝问题解决
  • 总账和明细账的保管期限
  • mysql分页实现
  • sql常见的数据类型有哪些
  • win 9x
  • vc软件是什么软件
  • win8更新一直停着不动
  • windows8.1玩英雄联盟
  • macbookzen
  • windowsxp设置语言
  • win7系统怎么设置电源
  • cocos2d原理
  • Extjs4中的分页应用结合前后台
  • 深入理解
  • js下拉列表框
  • CustomPropertyDrawer-Change the height of Property field
  • unity3d基础操作
  • unity怎么做触屏按键
  • Python内置的HTTP协议服务器SimpleHTTPServer使用指南
  • bootstrap技术教程
  • android studio 安装步骤
  • jquery增加一行和删除
  • 晋税通注册
  • 税务系统福利
  • 企业破产享有的债权可否提前到期
  • 医保漏缴如何补交
  • 税务局三方协议变更
  • 福建农村社保一个月可以拿多少钱
  • 资源税的作用是什么?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设