vue exceljs json数据转excel

json数据转excel

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

答案是:当然可以

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

直接看效果:json格式化

一、下载安装

javascript 复制代码
yarn add exceljs;

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

javascript 复制代码
"dependencies": {
    "exceljs": "^4.3.0",
  },

二、使用

1、引入插件;

javascript 复制代码
import ExcelJS from "exceljs";//直接使用

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

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

直接看代码:-

javascript 复制代码
exportExcel() {
      const workbook = new ExcelJS.Workbook();
      const worksheet = workbook.addWorksheet("Sheet1");//创建工作簿和工作sheet
      let 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 {//非数组,直接填入工作sheet
        let 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();
      });
    },
相关推荐
じòぴé南冸じょうげん1 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
懵逼的小黑子2 小时前
excel里面店铺这一列的数据结构是2C【uniteasone17】这种,我想只保留前面的2C部分,后面的【uniteasone17】不要
excel
偷心伊普西隆6 小时前
Python EXCEL 理论探究:格式转换时处理缺失值方法
python·excel
luckys.one14 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
小菜全18 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
CodeCraft Studio1 天前
Excel处理控件Aspose.Cells教程:使用 Python 将 Pandas DataFrame 转换为 Excel
python·json·excel·pandas·csv·aspose·dataframe
星空的资源小屋1 天前
PPTist,一个完全免费的 AI 生成 PPT 在线网站
人工智能·python·电脑·excel
开开心心_Every1 天前
免费语音合成工具:66种音色随心选
人工智能·面试·java-ee·计算机外设·电脑·maven·excel
敬业小码哥2 天前
记一次:mysql的json及json数组使用组合使用
数据库·mysql·json
一键三联啊2 天前
BSON 和 JSON 的区别
json