最近在使用exceljs导出表格数据时遇到问题，这里分享下，避免大家踩坑。
首先贴个exceljs中文文档地址：https://github.com/exceljs/exceljs/blob/master/README_zh.md
。。。我一开始看的英文文档，看得脑阔疼，过了好久才发现居然还有个中文文档？好吧，我鼠标滚太快了，直接看的正文，根本没注意这行。。。
image.png
image.png
先贴个最简单的导出表格例子
<!-- 纯前端导出excel案例 -->
<template>
<div class="wrap">
<div>
<el-button type="primary" @click="exportExcel">导出excel</el-button>
</div>
<div style="width:500px;margin: 20px auto;">
<el-table
border
:data="tableData"
style="width: 100%">
<template v-for="(item,index) in tableHeader">
<el-table-column
:key="index"
v-bind="item">
</el-table-column>
</template>
</el-table>
</div>
</div>
</template>
<script>
import ExcelJS from 'exceljs'
import FileSaver from 'file-saver'
export default {
name: 'exceljs-demo',
data(){
return {
tableHeader: [
{
prop: 'date',
label: '日期'
},
{
prop: 'name',
label: '姓名'
},
{
prop: 'address',
label: '地址'
}
],
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
// 是否为空
$isNull(val){
return val === null || val === void 0 || val === '' || (val).toString() === 'NaN'
},
async exportExcel(){
const workbook = new ExcelJS.Workbook();
workbook.creator = 'Me';
workbook.lastModifiedBy = 'Her';
workbook.created = new Date(1985, 8, 30);
workbook.modified = new Date();
workbook.lastPrinted = new Date(2016, 9, 27);
// 创建带有红色标签颜色的工作表
const sheet = workbook.addWorksheet('My Sheet', {properties: {tabColor: {argb: 'FFC0000'}}});
// 生成columns
let columns = []
this.tableHeader.map(item => {
columns.push({
name: item.label,
// width: 30 // 这里设置宽度不起作用，详情请看table 下 列属性，里面没有width 属性
})
})
// 生成rows
let rows = []
this.tableData.map(item => {
let arr = []
this.tableHeader.map(sub => {
arr.push(!this.$isNull(item[sub.prop]) ? item[sub.prop] : '')
})
rows.push(arr)
})
sheet.addTable({
name: 'MyTestTable',
ref: 'C3', // 表格左上角的位置
headerRow: true,
totalsRow: false,
style: {
theme: 'TableStyleLight1',
// showRowStripes: true,
},
columns: columns,
rows: rows,
})
// workbook.xlsx.writeFile('test.xlsx')
workbook.xlsx.writeBuffer().then(buffer => {
FileSaver.saveAs(new Blob([buffer], {type: 'application/octet-stream'}), `test.xlsx`);
})
}
}
}
</script>
<style scoped>
</style>
版本如下：
image.png
页面效果如下：
image.png
导出效果如下：
image.png
问题1：为什么这里还要使用file-saver，官方不是提供了 writeFile 方法吗？
官网截图：
image.png
然后我也这样用了：
image.png
结果浏览器报错了：
image.png
最后发现workbook.xlsx.writeFile(filename)是在node端用的：
image.png
app.js代码如下，可以自己试下：
let excel = require("exceljs");
let workbook = new excel.Workbook();
workbook.creator = 'Me';
workbook.lastModifiedBy = 'Her';
workbook.created = new Date(1985, 8, 30);
workbook.modified = new Date();
workbook.lastPrinted = new Date(2016, 9, 27);
let sheet1 = workbook.addWorksheet('Sheet1');
let reColumns=[
{header:'FirstName',key:'firstname'},
{header:'LastName',key:'lastname'},
{header:'Other Name',key:'othername'}
];
sheet1.columns = reColumns;
workbook.xlsx.writeFile("./test.xlsx").then(function() {
console.log("xlsx file is written.");
});
问题2：导出的表格如何更改列宽？
image.png
首先这里设置width是没效果的
image.png
官网表格列属性介绍：
image.png
解决办法：使用getColumn给每列设置宽度
image.png
image.png
问题3：优化，把导出的表格样式修改下，将表头居中，并设置边框。
官网截图：
image.png
代码如下,替换之前添加的那三行设置宽度的代码：
// 表格列宽设置
sheet.getColumn('C').width = 15
sheet.getColumn('D').width = 15
sheet.getColumn('E').width = 30
// 表头 居中并设置边框
let h1 = sheet.getCell('C3')
let h2 = sheet.getCell('D3')
let h3 = sheet.getCell('E3')
let arr = [h1, h2, h3]
arr.map(item => {
// 居中
item.alignment = {vertical: 'middle', horizontal: 'center'}
// 边框
item.border = {
top: {style: 'thin'},
left: {style: 'thin'},
bottom: {style: 'thin'},
right: {style: 'thin'}
}
})
效果图如下：
image.png
上面的方式有点low，如果表头过多或者我还需要对表格其他单元格设置样式，就得需要对上面的代码进行封装了, 这个在下一篇贴封装后的代码。
问题4：表格主题样式有哪些？
image.png
官网没有样式效果，小伙伴们可以自己试下。
更多exceljs的使用请查阅官网：
https://www.npmjs.com/package/exceljs
