需求
有的时候我们导出的数据量很大，如果在主进程中操作的话可能会导致页面卡顿的问题
代码
App.vue
<template>
<div class="app">
<button @click="exportExcel">导出Excel</button>
</div>
</template>
<script>
import ExcelWorker from './worker/excel.worker.js'
import * as XLSX from 'xlsx-js-style'
export default {
created() {
const worker = new ExcelWorker()
this.worker = worker
this.worker.addEventListener('message', (e) => {
const { workbook, excelName } = e.data
XLSX.writeFile(workbook, excelName)
})
},
methods: {
exportExcel() {
this.worker.postMessage({
data: [
{
name: 'zs',
age: 20,
date: '1991-06-01',
address: '广州市',
},
{
name: 'ww',
age: 14,
date: '2001-09-01',
},
{
name: 'ls',
age: 31,
date: '1993-04-14',
},
],
columns: [
{
prop: 'name',
label: '姓名',
width: 150,
excelStyle: {
font: { bold: true },
alignment: {
horizontal: 'center',
vertical: 'center',
},
fill: {
fgColor: {
rgb: 'FFFF00',
},
},
},
},
{
prop: 'age',
label: '年龄',
width: 300,
},
{
prop: 'date',
label: '出生日期',
excelStyle: {
fill: {
fgColor: {
rgb: '00FFFF',
},
},
},
},
],
excelName: '测试',
})
},
},
}
</script>
<style lang="less" scoped></style>
excel.worker.js
import { exportExcel } from '@/utils/excel.js'
self.onmessage = (e) => {
const { columns, data, excelName } = e.data
exportExcel(excelName, data, columns, (workbook, excelName) => {
self.postMessage({
workbook,
excelName
})
})
}
utils/excel.js
import * as XLSX from 'xlsx-js-style'
export function exportExcel(excelName, data, columns, cb) {
const newData = []
const keys = columns.map((item) => item['prop'])
const headers = columns.map((item) => item['label'])
data.forEach((item) => {
const row = []
for (let key of keys) {
row.push(item[key])
}
newData.push(row)
})
// 添加表头
newData.unshift(headers)
const workbook = XLSX.utils.book_new()
const worksheet = XLSX.utils.json_to_sheet(newData, {
skipHeader: true,
})
// 设置列宽
const columnsWidth = columns.map((item) => {
return {
wpx: item.width,
}
})
worksheet['!cols'] = columnsWidth
// 设置表头样式
columns.forEach((item, index) => {
if (item['excelStyle']) {
const cell = indexToLetters(index) + 1
worksheet[cell].s = item['excelStyle']
}
})
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
// XLSX.writeFile(workbook, `${excelName}.xlsx`)
cb(workbook, `${excelName}.xlsx`)
}
function indexToLetters(i) {
if (i >= 0 && i <= 25) {
return String.fromCharCode(65 + i)
} else {
return undefined
}
}