当前位置: 首页 > news >正文

vue exceljs json数据转excel

json数据转excel

有时候我们会遇到这样一个需求,就是将数据转成excel下载,这一般都是由后端来处理,使用插件poi轻松搞定。如果只有少量数据,那么能不能避免调用后端接口,前端直接处理呢?

答案是:当然可以

使用exceljs    excel专用插件来实现前端json数据转成excel文件并进行下载。

直接看效果:json格式化

一、下载安装

yarn add exceljs;

 版本,可以安装最新版,不过推荐下面版本,不会出现问题:

"dependencies": {"exceljs": "^4.3.0",},

二、使用

1、引入插件;

import ExcelJS from "exceljs";//直接使用

完事之后,接下来就是具体应用了

三、将json数据写入excel并导出excel

直接看代码:-

exportExcel() {const workbook = new ExcelJS.Workbook();const worksheet = workbook.addWorksheet("Sheet1");//创建工作簿和工作sheetlet json = this.getJSON();//这里是从方法中取到json,换成自己的数据即可if (Array.isArray(json)) {//判断json是否是数组,如果是数组,则进行遍历let title = [];for (let key in json[0]) {title.push(key);}worksheet.addRow(title);json.forEach((item, index) => {let v = [];for (let key in item) {v.push(item[key]);}worksheet.addRow(v);});} else {//非数组,直接填入工作sheetlet title = [];for (let key in json) {title.push(key);}worksheet.addRow(title);let v = [];for (let key in json) {v.push(json[key]);}worksheet.addRow(v);}//开始导出,主要type类型,要设置为excel对应的格式workbook.xlsx.writeBuffer().then((buffer) => {const blob = new Blob([buffer], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",});const url = URL.createObjectURL(blob);const link = document.createElement("a");link.href = url;link.download = "data.xlsx"; // 下载文件名link.click();});},
http://www.lryc.cn/news/270987.html

相关文章:

  • Navicat for MySQL 创建函数——报错1418
  • java球队信息管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
  • 设计模式(4)--对象行为(7)--观察者
  • MySQL所有常见问题
  • 锐捷交换机配置 SNMP
  • Windows 10 安装和开启VNCServer 服务
  • js遍历后端返回的集合将条件相同的放入同一个数组内
  • GcExcel:DsExcel 7.0 for Java Crack
  • 基于SpringBoot的职业生涯规划系统
  • 基于Java+SpringBoot+vue+elementui的校园文具商城系统详细设计和实现
  • PyTorch中常用的工具(5)使用GPU加速:CUDA
  • Qt+opencv 视频分解为图片
  • 一篇文章认识微服务的优缺点和微服务技术栈
  • [spark] dataframe的数据导入Mysql5.6
  • 2023年度业务风险报告:四个新风险趋势
  • python编程从入门到实践(1)
  • ElasticSearch 文档操作
  • NXOpenC++布尔求和命令
  • ubuntu python播放MP3,wav音频和录音
  • Rust学习笔记000 安装
  • python AI五子棋对战
  • 图文证明 费马,罗尔,拉格朗日,柯西
  • CEC2017(Python):粒子群优化算法PSO求解CEC2017(提供Python代码)
  • AUTOSAR从入门到精通- 虚拟功能总线(RTE)(一)
  • B/S架构云端SaaS服务的医院云HIS系统源码,自主研发,支持电子病历4级
  • 看懂基本的电路原理图(入门)
  • 赫夫曼树基本数据结构
  • 10TB海量JSON数据从OSS迁移至MaxCompute
  • LLM之RAG实战(九)| 高级RAG 03:多文档RAG体系结构
  • Windows电脑引导损坏?按照这个教程能修复