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

  • 纳税申报的流程是什么
  • 金融企业哪些方面可以进行数据分析
  • 个人所得税如何退税操作流程
  • 销售赠送赠品会计处理
  • 采购成本和销售费用区别
  • 一般纳税人厂房出租怎么开票
  • 简易征收的收入包括哪些
  • 个人出租不动产税率
  • 原材料的运输
  • 大额虚开发票做转出税款入什么会计科目?
  • 付款然后付的手续费如何做账?
  • 库存现金限额一般由开户银行根据企业
  • 存出的保证金
  • 固定资产转到别人账户
  • 代理进出口公司结售汇
  • 税务局查账一般需要几天
  • 汇算清缴所得税退回做账
  • 营改增后房地产开发企业需要交哪些税?
  • 制作费算什么费用
  • 增值税申报内容及步骤
  • 破产报表日是哪一日
  • 关联公司代付款
  • 前两个月亏损第三个月盈利所得税怎么计算
  • 增值税普通发票和电子普通发票的区别
  • 如何恢复微信语言聊天
  • 苹果电脑安装了windows能取消吗
  • 收个税手续费返还怎么做账
  • 营收和产值的区别和联系
  • 负债的情况
  • 期末余额和期初余额
  • 主营业务收入发票
  • 计提个体户经营所得税
  • 产品成本核算方法的构成要素
  • 哪些情形不属于伪现金
  • 酒水入库的会计分录怎么做
  • java date类型
  • 事业单位接受捐赠固定资产入账
  • php网页编程
  • php mysql_list_dbs()函数用法示例
  • 资产负债表中其他流动资产包括哪些科目
  • php代理访问
  • 转增资本属于什么会计科目
  • 固定资产停止使用
  • 投标保证金退还时间是在什么文件的规定的
  • 在建工程的前期工程
  • mysql中文乱码怎样用代码解决
  • 进程 python
  • 年终奖的个税税率
  • 办公用品普通发票税点多少
  • 债务豁免涉税
  • sql2008附加数据库
  • 员工工资需要交税吗
  • 进仓费开票是几个点
  • 开具发票的原则有哪些呢?
  • 进口关税征收方法
  • 固定资产当月入账当月计提吗
  • 小规模纳税人涉嫌虚开发票
  • 什么时候计提增值税发票
  • 发票系统中监控怎么设置
  • 工程款外地预缴哪些税
  • 免抵退怎么理解
  • 提高纳税遵从度依靠行政执法还是纳税服务
  • 登记生产成本和制造费用的明细账
  • win8的文件夹选项在哪里
  • mac安装路径选择
  • 32位与64位操作系统怎么区分从32位和64位的概念上进行讲述
  • win8出现问题需要重启
  • win10 win7控制面板
  • win7音频服务未响应
  • win10双击应用程序没反应
  • javascriptz
  • 关于javascript中数组的说法不正确
  • 3种不同的播种方法
  • python 父类方法
  • Metaio in Unity3d 教学--- 二. 创建自己的Application
  • js写表格模板
  • 查验发票真伪
  • 消费税申报详细流程图
  • 个人社保缴纳年限怎么算
  • 专利转让个人所得税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设