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

news2024/11/18 4:18:33

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.coloradmin.cn/o/2242576.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Hadoop实训】Hive 数据操作②

延续上一篇文章,不懂的宝子们请看以下链接: 【Hadoop实训】Hive 数据操作①-CSDN博客 目录 一、Group by 语句 (1)、计算emp表每个部门的平均工资 (2)、计算emp表每个部门中每个岗位的最高工资 二、Having 语句 (1)、求每个部门的平均工资 (2)、求每个…

centos7 升级openssl 与升级openssh 安装卸载 telnet-server

前言: 服务器被安全扫描,扫出了漏洞需要修复,根据提示将openssh升级为9.8p1的版本,同时需要升级openssl,但是升级openssh可能会导致ssh连接失败,从而无法继续操作,特别是远程机房尤为危险&#…

Notepad++的完美替代

由于Notepad的作者曾发表过可能在开发者代码中植入恶意软件的言论,他备受指责。在此,我向大家推荐一个Notepad的完美替代品——NotepadNext和Notepad--。 1、NotepadNext NotepadNext的特点: 1、跨平台兼容性 NotepadNext基于Electron或Qt…

大语言模型LLM综述

一、LM主要发展阶段 1.1、统计语言模型SLM 基于统计学习方法,基本思想是基于马尔可夫假设HMM建立词概率预测模型。如n-gram语言模型 1.2、神经语言模型NLM 基于神经网络来做词的分布式表示。如word2vec模型 1.3、 预训练语言模型PLM 预训练一个网络模型来做词表…

腾讯IM web版本实现迅飞语音听写(流式版)

本文基于TUIKit Demo项目集成迅飞语音听写&#xff08;流式版&#xff09;功能&#xff1a; 主要代码&#xff1a; // \src\TUIKit\components\TUIChat\message-input\index.vue <template><!-- 录音按钮 --><div touchstart.stop"touchstart" />…

2024140读书笔记|《作家榜名著:生如夏花·泰戈尔经典诗选》——你从世界的生命的溪流浮泛而下,终于停泊在我的心头

2024140读书笔记|《作家榜名著&#xff1a;生如夏花泰戈尔经典诗选》——你从世界的生命的溪流浮泛而下&#xff0c;终于停泊在我的心头 《作家榜名著&#xff1a;生如夏花泰戈尔经典诗选》[印]泰戈尔&#xff0c;郑振铎译&#xff0c;泰戈尔的诗有的清丽&#xff0c;有的童真&…

物理hack

声明 声明 文章只是方便各位师傅学习知识&#xff0c;以下网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 ✍&#x1f3fb;作者简介&#xff1a;致力于网络安全领域&#xff0c;目前作为一名学习者&#xff0c;很荣…

【运维实施资料集】软件全套运维,实施管理方案,运维建设方案,运维检查单,软件项目运维方案(word原件)

1 编制目的 2 系统运行维护 2.1 系统运维内容 2.2 日常运行维护方案 2.2.1 日常巡检 2.2.2 状态监控 2.2.3 系统优化 2.2.4 软件系统问题处理及升级 2.2.5 系统数据库管理维护 2.2.6 灾难恢复 2.3 应急运行维护方案 2.3.1 启动应急流程 2.3.2 成立应急小组 2.3.3 应急处理过程 …

大学语文教材电子版(第十一版)教学用书PDF及课件

大学语文课件&#xff1a;https://caiyun.139.com/m/i?005CiDusEVWnR 《大学语文》&#xff08;第十一版&#xff09;主编&#xff1a;徐中玉 齐森华 谭帆。 大学语文教材电子版教师用书PDF第一课《齐桓晋文之事》艺术赏析&#xff1a; 孟子四处游说&#xff0c;养成善辩的…

java模拟键盘实现selenium上下左右键 table中的左右滚动条实现滚动

在这篇文章中&#xff0c;我们将学习如何使用Java编程语言模拟键盘输入&#xff0c;特别是模拟上下左右方向键的操作。这是一个很有趣的项目&#xff0c;尤其适合刚入行的开发者。我们将分步进行&#xff0c;接下来&#xff0c;我们会通过表格展示整个实现过程&#xff0c;然后…

量子计算与人工智能的交汇:科技未来的新引擎

引言 在当今飞速发展的科技世界&#xff0c;人工智能&#xff08;AI&#xff09;和量子计算无疑是最受瞩目的两大前沿领域。人工智能凭借其在数据处理、模式识别以及自动化决策中的强大能力&#xff0c;已经成为推动各行业数字化转型的重要力量。而量子计算则通过颠覆传统计算机…

【Oracle篇】掌握SQL Tuning Advisor优化工具:从工具使用到SQL优化的全方位指南(第六篇,总共七篇)

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌️…

变分自编码器(VAE, Variational Autoencoder)

代码说明 VAE 模型结构&#xff1a; 编码器将输入数据&#xff08;如 MNIST 图像&#xff09;映射到潜在空间&#xff0c;生成均值 (mu) 和对数方差 (logvar)。 通过重新参数化技巧 (reparameterize) 从正态分布中采样潜在向量 z。 解码器将潜在向量 z 映射回原始空间&#xf…

DataWorks on EMR StarRocks,打造标准湖仓新范式

在大数据领域&#xff0c;数据仓库和实时分析系统扮演着至关重要的角色。DataWorks 基于大数据引擎&#xff0c;为数据仓库/数据湖/湖仓一体等解决方案提供统一的全链路大数据开发治理平台&#xff0c;为用户带来智能化的数据开发和分析体验。而阿里云提供的 EMR Serverless St…

Redis系列之底层数据结构ZipList

Redis系列之底层数据结构ZipList 实验环境 Redis 6.0 什么是Ziplist&#xff1f; Ziplist&#xff0c;压缩列表&#xff0c;这种数据结构会根据存入数据的类型和大小&#xff0c;分配大小不同的空间&#xff0c;所以是为了节省内存而采用的。因为这种数据结构是一种完整连续…

【FPGA开发】AXI-Stream总线协议解读

文章目录 AXI-Stream概述协议中一些定义字节定义流的定义 数据流类别字节流连续对齐流连续不对齐流稀疏流 协议的信号信号列表 文章为个人理解整理&#xff0c;如有错误&#xff0c;欢迎指正&#xff01; 参考文献 ARM官方手册 《IHI0051B》 AXI-Stream概述 协议中一些定义 A…

c# 调用c++ 的dll 出现找不到函数入口点

今天在调用一个设备的dll文件时遇到了一点波折&#xff0c;因为多c 不熟悉&#xff0c;调用过程张出现了找不到函数入口点&#xff0c;一般我们使用c# 调用c 文件&#xff0c;还是比较简单。 [DllImport("AtnDll2.dll",CharSet CharSet.Ansi)]public static extern …

L11.【LeetCode笔记】有效的括号

目录 1.题目 2.分析 理解题意 解决方法 草稿代码 ​编辑 逐一排错 1.当字符串为"["时,分析代码 2.当字符串为"()]"时,分析代码 正确代码(isValid函数部分) 提交结果 3.代码优化 1.题目 https://leetcode.cn/problems/valid-parentheses/descri…

Unity类银河战士恶魔城学习总结(P129 Craft UI 合成面板UI)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了合成面板的UI设置 UI_CraftWindow.cs 字段作用&#xff1a; UI 组件&#xff1a; itemName / itemDescription / icon&#…

Python酷库之旅-第三方库Pandas(221)

目录 一、用法精讲 1036、pandas.DatetimeIndex.to_pydatetime方法 1036-1、语法 1036-2、参数 1036-3、功能 1036-4、返回值 1036-5、说明 1036-6、用法 1036-6-1、数据准备 1036-6-2、代码示例 1036-6-3、结果输出 1037、pandas.DatetimeIndex.to_series方法 10…