Javascript导出Excel功能

简介

使用xlsx实现导出Excel功能

主要分为以下几步:

  • 创建Sheet:主要有aoa_to_sheet()json_to_sheet()table_to_sheet()等方法
  • 创建Workbook:主要有book_new()方法
  • Sheet写入Workbook:主要有book_append_sheet()方法
  • 生成Excel:主要有XLSX.write()XLSX.writeFile()等方法

主要步骤

创建Sheet

  • table_to_sheet:将DOM中的table数据转为sheet数据
const table = document.querySelector(selector) const ws = XLSX.utils.table_to_sheet(table)
  • json_to_sheet:将json数据转为sheet数据
// 主要参数有:data、header、skipHeader // data参数格式如下 const data = [ { name: 'wmm', age: 18, aaa: 123, bbb: '456', }, { name: 'wmm66', age: 18, aaa: 123, bbb: '456', }, ] // header就是列表中每项的key值组成的一维数组 const header = ['name', 'age', 'aaa', 'bbb'] // skipHeader是否跳过header。如果设置为false,表格的第一行就会输出header const ws = XLSX.utils.json_to_sheet(data, { header, skipHeader: true })
  • aoa_to_sheet:将Array数据转为sheet数据
// data参数是一个二维数组,格式如下 const data = [ ['name', 'age', 'aaa', 'bbb'], ['wmm', 18, 123, '456'], ['wmm66', 18, 123, '456'], ] const ws = XLSX.utils.aoa_to_sheet(data)

创建Workbook

const wb = XLSX.utils.book_new()

将Sheet写入Workbook

XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')

生成Excel

XLSX.writeFile(wb, `demo.xlsx`)

示例代码

import XLSX from 'xlsx' import dayjs from 'dayjs' export function exportExcel(options = {}) { const { type = 'table', // 类型,支持table、json、array selector, // table用 必须 data = [], // json、array用 必须 header = [], // json用 必须 skipHeader = true, // json用 非必须 wCols = null, // 每列的宽度 非必须 数组 sheetName = 'Sheet1', // sheetName 非必须 fileName, // 输出的文件名 必须 withTime = false, // 输出的文件名是否带时间戳 } = options if (!fileName) { message.error('缺少必要参数'); return } // 创建book const wb = XLSX.utils.book_new() // 创建sheet let ws = null switch(type) { case 'table': ws = getSheetByTable(selector) break case 'json': ws = getSheetByJson(data, header, skipHeader) break case 'array': ws = getSheetByArray(data) break } if (!ws) { message.error('参数错误'); return } // 设置列宽 if (wCols && Array.isArray(wCols)) { ws['!cols'] = wCols.map(item => ({ width: item })) } // sheet写入book XLSX.utils.book_append_sheet(wb, ws, sheetName) // 输出 let name = fileName if (withTime) name += '_' + dayjs().format('YYYYMMDDHHmmss') XLSX.writeFile(wb, `${name}.xlsx`) } // table类型的sheet function getSheetByTable(selector) { // 没有选择器 if (!selector) return false // 找不到DOM,或者DOM不是table const table = document.querySelector(selector) if (!table || table?.nodeName !== 'TABLE') return false // 返回对应的sheet return XLSX.utils.table_to_sheet(table) } // json类型的sheet function getSheetByJson(data, header, skipHeader) { // data 和 header 没有,或者不是数组 if (!data || !header || !Array.isArray(data) || !Array.isArray(header)) return false return XLSX.utils.json_to_sheet(data, { header, skipHeader: !!skipHeader }) } // array类型的sheet function getSheetByArray(data) { // data没有,或者不是数组 if (!data || !Array.isArray(data)) return false return XLSX.utils.aoa_to_sheet(data) } // 使用示例一:table const selector = `#test table` const fileName1 = `Excel测试1` exportExcel({ selector, fileName: fileName1 }) // 使用示例二:json const fileName2 = `Excel测试2` const data = [ { name: 'wmm', age: 18, aaa: 123, bbb: '456', }, { name: 'wmm66', age: 18, aaa: 123, bbb: '456', }, ] const header = ['name', 'age', 'aaa', 'bbb'] // 设置每列的宽度 const wCols = header.map(key => { if (key === 'name') return 30 return 15 }) exportExcel({ fileName, type: 'json', header, data, wCols, })

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: