随手记:简单实现纯前端文件导出(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');
相关推荐
天天向上102413 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y29 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁36 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry36 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录37 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟38 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan42 分钟前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
vvilkim1 小时前
Nuxt.js 全面测试指南:从单元测试到E2E测试
开发语言·javascript·ecmascript
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui