GitHub Demo 地址
在線預(yù)覽
xlsx是由SheetJS開發(fā)的一個(gè)處理excel文件的JavaScript庫(kù)沦偎。它可以讀取疫向、編寫和操作 Excel 文件
安裝xlsx
npm install xlsx --save
實(shí)現(xiàn)一個(gè)通過(guò)的數(shù)據(jù)導(dǎo)出工具類
import * as XLSX from 'xlsx'
/**
* @description: 導(dǎo)出excel
* @param {any} dataList
* @param {Array} fields
* @param {Array} headers
* @param {string} fileName 需要加后綴名 eg: 'test.xlsx'
* @param {string} sheetName
* @return {*}
*/
export function exportExcel(dataList: any, fields: Array<string>, headers: Array<string> = [], fileName: string = 'Excel.xlsx', sheetName: string = 'Sheet') {
let data = new Array()
if (!Array.isArray(dataList)) return console.warn('dataList is not an array type')
// if (!Array.isArray(fields)) return console.warn('fields is not an array type')
// if (!Array.isArray(headers)) return console.warn('headers is not an array type')
data = dataList.map((obj) => {
return fields.map((field) => {
return obj[field]
})
})
if (headers.length > 0) {
data.splice(0, 0, headers)
} else {
// 將headers設(shè)置為英文字段表頭
data.splice(0, 0, fields)
}
const ws = XLSX.utils.aoa_to_sheet(data) // 創(chuàng)建工作表
const wb = XLSX.utils.book_new() // 創(chuàng)建工作簿
// 隱藏表頭
// let wsrows = [{ hidden: true }]
// ws['!rows'] = wsrows // ws - worksheet
XLSX.utils.book_append_sheet(wb, ws, sheetName) // 將工作表添加到工作簿中
XLSX.writeFile(wb, fileName) // 導(dǎo)出文件
}
示例
<template>
<el-button @click="exportData"> 導(dǎo)出數(shù)據(jù) </el-button>
</template>
<script setup lang="ts">
import { exportExcel } from '@/utils/exportExcel'
const data = [
{ name: '張三', gender: '男', age: 18 },
{ name: '李四', gender: '女', age: 20 },
{ name: '王五', gender: '男', age: 22 }
]
const handelExcel = () => {
var newTableDate = data
const fields = ['name', 'gender', 'age']
const headers = ['姓名', '性別', '年齡']
exportExcel(newTableDate, fields, headers, '用戶數(shù)據(jù).xlsx')
}
</script>
效果圖
