优秀网站大全,页面设计标准规范,电商多用户商城源码,公司flash网站模板1.需求背景#xff1a;
由于导入需要经过后端存储数据库#xff0c;所以导入还是和后端联调 但是简单的前端导出有部分是可以直接给到用户
xlsx插件简介
xlsx插件#xff08;通常指的是SheetJS/js-xlsx#xff09;是一个强大的JavaScript库#xff0c;它允许你在浏览器…
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 xlsx2.引入
import XLSX from xlsx;
3.封账公共方法
// 通用前端导出方法
// 参数data需要导出的数据fileName文件名称 dataType数据类型json、array, SheetNameSheet名称
// 注意如果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);
