随手记:简单实现纯前端文件导出(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');

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【0x0045】HCI_Write_Inquiry_Mode详解

目录 一、命令概述 二、命令格式及参数说明 2.1. HCI_Write_Inquiry_Mode命令格式 2.2. Inquiry_Mode 三、响应事件格式及参数 3.1. HCI_Command_Complete事件格式 3.2. 参数说明 3.2.1. 事件代码(Event Code) 3.2.2. 参数总长度(Parameter Total Length) 3.2.3.…

【C语言】指针的运算

指针的增量操作: int i 10; int *p &i;printf("p %p\n", p);//1024p; // 增加int 4个字节大小printf("p %p\n", p);//1028指针的增量运算取决于指针的数据类型,它将会增加数据类型的大小的字节。 指针的减量操作与增量同理…

电商系统开发:Spring Boot框架实战

3 系统分析 当用户确定开发一款程序时,是需要遵循下面的顺序进行工作,概括为:系统分析–>系统设计–>系统开发–>系统测试,无论这个过程是否有变更或者迭代,都是按照这样的顺序开展工作的。系统分析就是分析系…

【数据库】数据库迁移的注意事项有哪些?

数据库迁移是一个复杂且关键的过程,需要谨慎处理以确保数据的完整性和应用程序的正常运行。以下是一些数据库迁移时需要注意的事项: 1. 充分的前期准备 1.1 评估迁移需求 明确目标:确定迁移的具体目标,例如添加新字段、修改现…

pgsql和mysql的自增主键差异

1. 当有历史数据存在时, mysql的自增主键是默认从最大值自增。 pgsql的自增主键取初始值开始逐个尝试,所以存在可能与历史数据的主键重复的情况。 pgsql解决上述问题的方式:重设自增值。 SELECT SETVAL(t_db_filed_id_seq, (SELECT MAX(&q…

opencv入门学习总结

opencv学习总结 不多bb,直接上代码!!! 案例一: import cv2 # 返回当前安装的 OpenCV 库的版本信息 并且是字符串格式 print(cv2.getVersionString()) """ 作用:它可以读取不同格式的图像文…

【VBA实战】用Excel制作排序算法动画续

为什么会产生用excel来制作排序算法动画的念头,参见【VBA实战】用Excel制作排序算法动画一文。这篇文章贴出我所制作的所有排序算法动画效果和源码,供大家参考。 冒泡排序: 插入排序: 选择排序: 快速排序:…

Go 语言已立足主流,编程语言排行榜24 年 11 月

Go语言概述 Go语言,简称Golang,是由Google的Robert Griesemer、Rob Pike和Ken Thompson在2007年设计,并于2009年11月正式宣布推出的静态类型、编译型开源编程语言。Go语言以其提高编程效率、软件构建速度和运行时性能的设计目标,…

《基于深度学习的车辆行驶三维环境双目感知方法研究》

复原论文思路: 《基于深度学习的车辆行驶三维环境双目感知方法研究》 1、双目测距的原理 按照上述公式算的话,求d的话,只和xl-xr有关系,这样一来,是不是只要两张图像上一个测试点的像素位置确定,对应的深…

机器学习在医疗健康领域的应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 机器学习在医疗健康领域的应用 机器学习在医疗健康领域的应用 机器学习在医疗健康领域的应用 引言 机器学习概述 定义与原理 发展…

2024136读书笔记|《飞鸟集》——使生如夏花之绚烂,死如秋叶之静美

2024136读书笔记|《飞鸟集》——使生如夏花之绚烂,死如秋叶之静美 《飞鸟集》[印]泰戈尔,一本有意思的诗集,中英文对照着读更有意思。“你是谁,读者,百年后读着我的诗?”让我觉得有些久别重逢,忽…

爱芯元智创始人仇肖莘荣获《财富》中国最具影响力的商界女性

爱芯元智宣布,《财富》(中文版)揭晓了2024年度“中国最具影响力的商界女性”榜单(Most Powerful Women,简称MPW),爱芯元智创始人兼董事长仇肖莘博士荣登《财富》“MPW未来榜”,彰显了…

windows下qt5.12.11使用ODBC远程连接mysql数据库

1、下载并安装mysql驱动,下载地址:https://dev.mysql.com/downloads/ 2、配置ODBC数据源,打开64位的ODBC数据源配置工具:

河南省的一级科技查新机构有哪些?

科技查新,简称查新,是指权威机构对查新项目的新颖性作出文献评价的情报咨询服务。这一服务在科研立项、成果鉴定、项目申报等方面发挥着至关重要的作用。河南省作为中国的重要科技和教育基地,拥有多个一级科技查新机构,为本省及全…

Selenium:设置元素等待、上传文件、下载文件

前言:在工作和学习selenium自动化过程中记录学习知识点,深化知识点 1. 设置元素等待 元素定位之元素等待-- WebDriver提供了两种类型的等待:显示等待和隐式等待。 1.1 显示等待 显式等待使WebDriver等待某个条件处理时继续执行&#xff…

智慧医疗:纹理特征VS卷积特征

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

hadoop健康舆情研究-计算机毕业设计源码05954

目 录 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2 系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 操作可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分析 2.4 系统流程…

重学 Android 自定义 View 系列(六):环形进度条

目标 自定义一个环形进度条,可以自定义其最大值、当前进度、背景色、进度色,宽度等信息。 最终效果如下(GIF展示纯色有点问题): 1. 结构分析 背景圆环:表示进度条的背景。进度圆环:表示当前…

⚙️ 如何调整重试策略以适应不同的业务需求?

调整 Kafka 生产者和消费者的重试策略以适应不同的业务需求,需要根据业务的特性和容错要求来进行细致的配置。以下是一些关键的调整策略: 业务重要性: 对于关键业务消息,可以增加重试次数,并设置较长的重试间隔&#x…

总结拓展十五:特殊采购业务——寄售采购

1、寄售采购的定义 寄售采购是指供应商提供物料,并将它们存储在你处,在贵公司将这些物料从寄售库存提取(转自有)之前,该供应商一直是这些物料法律上的所有者。只有当这些物料被贵司转自有领用后,供应商才会…