非常符合前端直接的使用
使用
先看看使用
表格数据
const tableData = [{"id": 1,"firstName": "John","lastName": "Doe","email": "john.doe@example.com","age": 28,"address": { "street": "123 Main St", "city": "Springfield", "state": "IL", "zip": "62701" }},{"id": 2,"firstName": "Jane","lastName": "Smith","email": "jane.smith@example.com","age": 34,"address": { "street": "456 Elm St", "city": "Shelbyville", "state": "IL", "zip": "62565" }},{"id": 3,"firstName": "Bob","lastName": "Johnson","email": "bob.johnson@example.com","age": 23,"address": { "street": "789 Oak St", "city": "Ogdenville", "state": "IL", "zip": "62075" }}
]使用方法
// 导出方法
exportExcel(tableData, // 你的表格数据[{title: 'ID', // 表头wpx: 120, // 宽度render: row => row.id, // 你要渲染的数据},{title: '邮箱', // 表头render: row => row.email, // 你要渲染的数据},{title: '年龄',wpx: 120,render: row => (row.age < 18 ? '未成年' : '成年了'),},{title: '地址',wpx: 300,render: row => row.address.street + '/' + row.address.city,},],'用户数据.xlsx' // 导出的表名)
封装
我们使用 xlsx 库的导出 Excel 功能
-
使用表格数据:
tableData作为数据源，你通过一个配置对象数组定义了如何渲染每一列。每个配置对象包括表头、宽度和渲染函数等信息。 -
渲染函数: 通过
render函数，你可以对每一行的数据进行自定义渲染，例如年龄列的情况，你区分了未成年和成年人。 -
列宽度: 通过
wpx属性，你可以为每一列设置特定的宽度。 -
动态导入: 你使用了动态导入 (
import('xlsx').then(XLSX => {...})) 来导入xlsx库，这有助于代码分割和按需加载，提高了前端应用的性能。 -
文件名: 导出的文件名可以作为函数的参数传入，使其具有更好的灵活性。
安装xlsx
npm install xlsx -S
获取列名
通过 getColumnName来
function getColumnName(n) {let columnName = "";while (n > 0) {const index = (n - 1) % 26;columnName = String.fromCharCode(65 + index) + columnName;n = Math.floor((n - 1) / 26);}return columnName;
}getColumnName(1) // 返回 'A'getColumnName(27) // 返回 'AA'
获取文本的宽度，用来给列的，要不然会出现列没有宽度的情况
const getWordCh = (val) => {/* 先判断是否为null/undefined */// eslint-disable-next-line eqeqeqif (val == null) {return 10;} else if (val.toString().charCodeAt(0) > 255) {/* 再判断是否为中文 */return val.toString().length * 2;} else {return val.toString().length;}
};导出封装
import("xlsx") 动态引入 xlsx
const exportExcel = (dataSource, columns, filename) => {import("xlsx").then((XLSX) => {const sheet = {};const defaultColumnCh = new Array(columns.length || 2);const cols = [];columns.forEach((item, index) => {const letter = getColumnName(index + 1);sheet[`${letter}1`] = { v: item.title };defaultColumnCh[index] = 0;});dataSource.forEach((item, rowIndex) => {columns.forEach((column, columIndex) => {// @ts-ignore next-lineconst value = column.render ? column.render(item) : item[column.field];const letter = getColumnName(columIndex + 1);sheet[letter + (rowIndex + 2)] = { v: value };defaultColumnCh[columIndex] = Math.max(defaultColumnCh[columIndex] || 0,getWordCh(value));});});columns.forEach((item, index) => {// @ts-ignore next-lineconst { render, title, field, ...ret } = item;cols.push({wch: Math.max(defaultColumnCh[index] || 0, getWordCh(title)),...ret,});});// 获取所有单元格的位置const outputPos = Object.keys(sheet);// 计算出范围 ,["A1",..., "H2"]const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`;sheet["!cols"] = cols;sheet["!ref"] = ref;console.log(" sheet: ", sheet);// 导出 ExcelXLSX.writeFileXLSX({SheetNames: ["Sheet1"],Sheets: {Sheet1: sheet,},},filename);});
};
完整代码
/*** 获取列名@param {number}n 第几列，从1开始
@examplegetColumnName(1) // 返回 'A'getColumnName(27) // 返回 'AA'*/
function getColumnName(n) {let columnName = "";while (n > 0) {const index = (n - 1) % 26;columnName = String.fromCharCode(65 + index) + columnName;n = Math.floor((n - 1) / 26);}return columnName;
}const getWordCh = (val) => {/* 先判断是否为null/undefined */// eslint-disable-next-line eqeqeqif (val == null) {return 10;} else if (val.toString().charCodeAt(0) > 255) {/* 再判断是否为中文 */return val.toString().length * 2;} else {return val.toString().length;}
};/*** 导出excel* @exampleexportExcel(tableData, // 你的表格数据[{title: 'ID', // 表头wpx: 120, // 宽度render: row => row.id, // 你要渲染的数据},{title: '邮箱', // 表头render: row => row.email, // 你要渲染的数据},{title: '年龄',wpx: 120,render: row => (row.age < 18 ? '未成年' : '成年了'),},{title: '地址',wpx: 300,render: row => row.address.street + '/' + row.address.city,},],'用户数据.xlsx' // 导出的表名)
*/
export const exportExcel = (dataSource, columns, filename) => {import("xlsx").then((XLSX) => {const sheet = {};const defaultColumnCh = new Array(columns.length || 2);const cols = [];columns.forEach((item, index) => {const letter = getColumnName(index + 1);sheet[`${letter}1`] = { v: item.title };defaultColumnCh[index] = 0;});dataSource.forEach((item, rowIndex) => {columns.forEach((column, columIndex) => {// @ts-ignore next-lineconst value = column.render ? column.render(item) : item[column.field];const letter = getColumnName(columIndex + 1);sheet[letter + (rowIndex + 2)] = { v: value };defaultColumnCh[columIndex] = Math.max(defaultColumnCh[columIndex] || 0,getWordCh(value));});});columns.forEach((item, index) => {// @ts-ignore next-lineconst { render, title, field, ...ret } = item;cols.push({wch: Math.max(defaultColumnCh[index] || 0, getWordCh(title)),...ret,});});// 获取所有单元格的位置const outputPos = Object.keys(sheet);// 计算出范围 ,["A1",..., "H2"]const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`;sheet["!cols"] = cols;sheet["!ref"] = ref;console.log(" sheet: ", sheet);// 导出 ExcelXLSX.writeFileXLSX({SheetNames: ["Sheet1"],Sheets: {Sheet1: sheet,},},filename);});
};
