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

导出excel功能,前端的解决方案

import { utils, writeFileXLSX } from 'xlsx'
// 导出excel
async exportToExcel() {// 获取要导出的业务数据(这里的接口自己改成实际使用的接口)const res = await getRuleListAPI(this.params)// 表头英文字段key(这里的数据改成接口返回的实际数据,原则是即是用来下载成export的表头又是后台返回的数据,这样才好从后台的数据里面分离出我们要的数据。)const tableHeaderKeys = ['ruleNumber', 'ruleName', 'freeDuration', 'chargeCeiling', 'chargeType', 'ruleNameView']// 表头中文字段value(这里改成需要展示的数据,一般来说和上面的英文的都是对应关系。用于表格输出后的表头)const tableHeaderValues = ['计费规则编号', '计费规则名称', '免费时长(分钟)', '收费上线(元)', '计费方式', '计费规则']// 以excel表格的顺序调整后端数据const sheetData = res.data.rows.map((item) => {const obj = {}tableHeaderKeys.forEach(key => {obj[key] = item[key]})return obj})// 创建一个工作表const worksheet = utils.json_to_sheet(sheetData)// 创建一个新的工作簿const workbook = utils.book_new()// 把工作表添加到工作簿(这个Data是表名,可以自己改)utils.book_append_sheet(workbook, worksheet, 'Data')// 改写表头(origin是起始位置的意思)utils.sheet_add_aoa(worksheet, [tableHeaderValues], { origin: 'A1' })// 这个最后的是工作簿的名称,即文件名。writeFileXLSX(workbook, 'SheetJSVueAoO.xlsx')
}

这个xlsx需要npm i,官网放在这Data Export | SheetJS Community Edition

一般下载的命令是

npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

该修改的,都用小括号括起来了。这个csdn工具的原因,只能写成这样。

http://www.lryc.cn/news/290371.html

相关文章:

  • 【lesson24】MySQL索引的理解
  • Oracle篇—分区索引的重建和管理(第三篇,总共五篇)
  • 前端大厂面试题探索编辑部——第一期
  • 图扑 HT UI 5.0 全新升级,开箱即用!
  • 数据结构----链表介绍、模拟实现链表、链表的使用
  • 微信小程序如何控制元素的显示和隐藏
  • 解决ssh: connect to host github.com port 22: Connection timed out
  • idea 创建 spring boot
  • 【智能家居入门之微信小程序控制下位机】(STM32、ONENET云平台、微信小程序、HTTP协议)
  • 07.领域驱动设计:了解3种常见微服务架构模型的对比和分析
  • 设计模式——模板方法模式(Template Method Pattern)
  • 07. STP的基本配置
  • oracle分区范围修改与数据迁移处理
  • 回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测
  • SeaTunnel Web安装 一把成
  • 对话泛能网程路:能源产业互联网,行至中程
  • Doris简介及单机部署(超详细)
  • Pytest 识别case规则
  • gorm+mysql查询/修改json列相关操作汇总
  • CMake-Cookbook 第0章 配置环境
  • 优质硬盘检测工具SMART Utility,保障您的Mac数据安全
  • Spring: alibaba代码规范校验工具checkstyle
  • c++线程thread示例
  • Compose | UI组件(十一) | Spacer - 留白
  • PyTorch的nn.Module类的详细介绍
  • python使用activemq库ActiveMQClient类的连接activemq并订阅、发送和接收消息
  • 【Flutter 面试题】Dart是什么?Dart和Flutter有什么关系?
  • 前后台分离跨域交互
  • React16源码: React中处理LegacyContext相关的源码实现
  • Boost.Test资源及示例