随手记:简单实现纯前端文件导出(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');
相关推荐
前端大白话1 分钟前
前端人速码!10个TypeScript神仙技巧,看完直接拿捏项目实战
前端·javascript·typescript
五号厂房2 分钟前
React 异步回调中产生的闭包问题剖析及解决
前端
用户2031196600963 分钟前
GeometryProxy 和 GeometryReader 的区别
前端
前端大白话3 分钟前
前端必看!10个React实战技巧让你代码起飞,附超详细注释
前端·javascript·react.js
bigyoung5 分钟前
使用 Arco Design 的 Table 组件实现可编辑列
前端·react.js·arco design
前端大白话7 分钟前
前端必学!10 个超实用 Vue3 实战技巧大放送
前端·javascript·vue.js
谦谦橘子9 分钟前
手写react-router,理解react-router原理
前端·javascript·react.js
一心只读圣贤书10 分钟前
解决用nodejs本地部署n8n跑npx n8n命令报错的问题
前端
Aphasia31115 分钟前
React 中ref的三种形式
前端·react.js
zhu_zhu_xia18 分钟前
JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示
javascript·3d·webgl