随手记:简单实现纯前端文件导出(XLSX)

1.需求背景:

由于导入需要经过后端存储数据库,所以导入还是和后端联调
但是简单的前端导出有部分是可以直接给到用户

xlsx插件简介

xlsx插件(通常指的是SheetJS/js-xlsx)是一个强大的JavaScript库,它允许你在浏览器或Node.js环境中读取、创建、编辑和导出Excel文件(.xls, .xlsx, .csv, .ods等多种格式)。

这个库是纯JavaScript编写的,不依赖于任何外部库,非常适合在前端应用中处理Excel数据,也适用于服务器端处理。

gitHub网址: 

GitHub - SheetJS/sheetjs: 📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs

1.安装xlsx

npm install xlsx

2.引入

import XLSX from 'xlsx';

3.封账公共方法

// 通用前端导出方法
// 参数data:需要导出的数据,fileName:文件名称 dataType:数据类型(json、array), SheetName:Sheet名称
// 注意:如果dataType为json,则data为json数组,如果dataType为array,则data为二维数组 SheetName为可选参数,如果不传则默认为Sheet1
// dataType为json 例如:[{ name: "John Doe", age: 30 }, { name: "nanana", age: 23 }] 只有表头则为 [{ name: "", age: '' }]
// dataType为array 例如: [['Name', 'Age', 'Country'],['Alice', 25, 'USA'],['Bob', 30, 'Canada'],['Charlie', 28, 'UK']] 只有表头则为[['Name', 'Age', 'Country']]
// 合并单元格 目前只支持简单合并,如果需要复杂合并效果,可以npm install xlsx-style 深入研究 简单合并例子:[['主要信息', null, null, '其它信息'], // 特别注意合并的地方后面预留2个null['姓名', '性别', '年龄', '注册时间'],['张三', '男', 18, new Date()],['李四', '女', 22, new Date()]], 特别注意合并的地方后面预留2个null
// 例如:commonExport(data, '导出文件名称', 'json', '表格1')
// 例如:commonExport(data, '导出文件名称', 'array', 'Sheet2')
export function commonExport (data, fileName, dataType, SheetName) {let ws;// 创建工作簿并添加工作表   const wb = XLSX.utils.book_new();// 转换数据if(dataType == 'array') {ws = XLSX.utils.aoa_to_sheet(data)}else{ws = XLSX.utils.json_to_sheet(data);}// 生成Excel文件 XLSX.utils.book_append_sheet(wb, ws, SheetName ? SheetName : 'Sheet1');XLSX.writeFile(wb, fileName);
}

4.main.js 全局挂载方法

import { commonExport } from "@/utils/xlsx";Vue.prototype.commonExport = commonExport

 5.页面调用示例:

let data = [{ name: "John Doe", age: 30 }, { name: "nanana", age: 23 }]
this.commonExport(data, '导入药品数据.xlsx', 'json', '表格1');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/470721.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jmeter常用配置元件介绍总结之后置处理器

系列文章目录 安装jmeter jmeter常用配置元件介绍总结之后置处理器 8.后置处理器8.1.CSS/JQuery提取器8.2.JSON JMESPath Extractor8.3.JSON提取器8.4.正则表达式提取器8.5.边界提取器8.5.Debug PostProcessor8.6.XPath2 Extractor8.7.XPath提取器8.8.结果状态处理器 8.后置处理…

边缘计算在智能交通系统中的应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 边缘计算在智能交通系统中的应用 边缘计算在智能交通系统中的应用 边缘计算在智能交通系统中的应用 引言 边缘计算概述 定义与原…

Vue 项目打包后环境变量丢失问题(清除缓存),区分.env和.env.*文件

Vue 项目打包后环境变量丢失问题(清除缓存),区分.env和.env.*文件 问题背景 今天在导报项目的时候遇到一个问题问题:在开发环境中一切正常,但在打包后的生产环境中,某些环境变量(如 VUE_APP_B…

十三、注解配置SpringMVC

文章目录 1. 创建初始化类,代替web.xml2. 创建SpringConfig配置类,代替spring的配置文件3. 创建WebConfig配置类,代替SpringMVC的配置文件4. 测试功能 1. 创建初始化类,代替web.xml 2. 创建SpringConfig配置类,代替spr…

(干货)Jenkins使用kubernetes插件连接k8s的认证方式

#Kubernetes插件简介 Kubernetes 插件的目的是能够使用 Kubernetes 配合,实现动态配置 Jenkins 代理(使用 Kubernetes 调度机制来优化负载),在执行 Jenkins Job 构建时,Jenkins Master 会在 kubernetes 中创建一个 Sla…

俏美韵从心出发,与女性一道为健康生活贡献力量

近期发布的《2025 全球食品与饮料》报告中显示,“回归本源”为2025年食品饮料赛道的趋势之一,消费者对于产品成分要求越来越严格,尤其是女性消费者,对成分是否自然,营养含量等方面越来越看重,俏美韵品牌从产…

区块链技术在慈善捐赠中的应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 区块链技术在慈善捐赠中的应用 区块链技术在慈善捐赠中的应用 区块链技术在慈善捐赠中的应用 引言 区块链技术概述 定义与原理 发…

mongoDB的安装及使用

mongodb的安装参考: Centos系统中mongodb的安装详解_centos安装mongodb-CSDN博客 不要下载最新的版本,新的版本中mongo命令无法使用,也就是安装后不能通过mongo命令登录,我这里使用5.0.30版本; mongodb客户端demo: …

DNS面临的4大类共计11小类安全风险及防御措施

DNS在设计之初,并未考虑网络安全限制,导致了许多问题。DNS安全扩展(DNSSEC)协议的开发旨在解决DNS的安全漏洞,但其部署并不广泛,DNS仍面临各种攻击。接下来我们一起看下DNS都存在哪些安全攻击及缓解措施,旨在对DNS安全…

MySql结合element-plus pagination的分页查询

实现效果如下: 重点:使用mysql查询的limit和offset 原生SQL写法: select c.id as deptid,c.name as department,position,a.name staffname,2024-11 as shijian ,CASE WHEN b.shijian IS NULL THEN no ELSE yes END AS submit from fa_wecom…

ubuntu20.04安装FLIR灰点相机BFS-PGE-16S2C-CS的ROS驱动

一、Spinnaker 安装 1.1Spinnaker 下载 下载地址为: https://www.teledynevisionsolutions.com/support/support-center/software-firmware-downloads/iis/spinnaker-sdk-download/spinnaker-sdk–download-files/?pnSpinnakerSDK&vnSpinnakerSDK 在上述地址中…

什么是数字图像?

点赞 关注 收藏 学会了 什么是数字图像? 本文可在公众号「德育处主任」免费阅读 弄懂数字图像的概念对学习计算机视觉很有帮助。 那么,什么是数字图像? 字面意思,数字图像就是有数字组成图像。通常由像素(Pixel&…

2024年11月13日

1.创业法律指南 留置权和其他三个权 定金和订金 一般保证和连带保证 1.案例 物权编之担保法律制度案例一 冯系养鸡专业户,为改建鸡会和引进良种需资金20万元。冯向陈借款10万元,以自己的一套价值10万元的音响设备抵押,双方立有抵押字据&a…

Android OpenGL ES详解——立方体贴图

目录 一、概念 二、如何使用 1、创建立方体贴图 2、生成纹理 3、设置纹理环绕和过滤方式 4、激活和绑定立方体贴图 三、应用举例——天空盒 1、概念 2、加载天空盒 3、显示天空盒 4、优化 四、应用举例——环境映射:反射 五、应用举例——环境映射:折射 六、应用…

2024版本IDEA创建Sprintboot项目下载依赖缓慢

目录 步骤一:在IDEA中搜索Maven(双击shift) 步骤二:找到Maven下的settings.xml文件修改镜像 ​编辑 ​编辑​编辑 步骤三:用VScode打开settings.xml文件修改镜像 ​编辑 步骤一:在IDEA中搜索Maven(双击shift) 步骤二&#xff…

Android Framework AMS(16)进程管理

该系列文章总纲链接:专题总纲目录 Android Framework 总纲 本章关键点总结 & 说明: 说明:本章节主要解读AMS 进程方面的知识。关注思维导图中左上侧部分即可。 我们本章节主要是对Android进程管理相关知识有一个基本的了解。先来了解下L…

python购物计算 2024年6月青少年电子学会等级考试 中小学生python编程等级考试一级真题答案解析

目录 python购物计算 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python购物计算 2024年6月 python编程等级考试一级编程题 一、题目要求 …

Pycharm PyQt5 环境搭建创建第一个Hello程序

第一步: 创建Pycharm项目,下载包: pip install PyQt5 -i https://pypi.tuna.tsinghua.edu.cn/simple/pip install PyQt5-tools -i https://pypi.tuna.tsinghua.edu.cn/simple/下载好了之后,可以看到相应包: PyQt5:PyQt5是一套Python绑定Digia QT5应用的框架。Qt库是最…

【Vue】Vue3.0(十九)Vue 3.0 中一种组件间通信方式-自定义事件

文章目录 一、自定义事件概念及使用场景二、代码解释三、新的示例 一、自定义事件概念及使用场景 概念 在 Vue 3.0 中,自定义事件是一种组件间通信的机制,允许子组件向父组件传递数据或触发父组件中的操作。子组件通过defineEmits函数定义可以触发的事件…

Java的dto,和多表的调用

1理论 需求是新增菜品eg:菜名:豆腐脑;口味:甜口,咸口, 菜单表:dish;口味表dish_flavor; 1dto:数据传输对象 新建一个dishDto对象有两个表里的属性 2用到两个表,dish,d…