小编曾试过很多的方法,能够导出excel表格,但是表格的样式设置怎么都没有办法。
最终找到了一个插件exceljs,能够解决表格的导出以及样式的设置
一、插件准备
npm i exceljs
npm i file-saver
二、在页面中进行引入
import { saveAs } from 'file-saver'
import * as ExcelJs from 'exceljs'
三、在页面中使用
首先需要一个按钮用来导出excel
<button @click='excel'>导出excel</button>
接着来写点击的方法
const excel = () => {
// 创建一个新的工作薄
const workbook = new ExcelJs.Workbook()
// 给新的工作薄起一个名字
const worksheet = workbook.addWorksheet('奥特曼')
// 设置每一列的字段
worksheet.columns = [
{ header: '姓名', key: 'name', width: 20 },
{ header: '年龄', key: 'age', width: 30 },
{ header: '身高', key: 'tall', width: 20 },
{ header: '成绩', key: 'test', width: 20 },
{ header: '成绩1', key: 'test1', width: 20 }
]
// 数据列表
const list = [
{ name: '', age: '', tall: '', test: '平时成绩', test1: '期末成绩' },
{ name: '小红', age: '30', tall: '100', test: '1000', test1: '2000' },
{ name: '张三', age: '30', tall: '100', test: '1000', test1: '3000' },
{ name: '张三', age: '30', tall: '100', test: '1000', test1: '4000' },
{ name: '东东', age: '10', tall: '100', test: '1000', test1: '5000' }
]
// 把数据添加到表格中
worksheet.addRows(list)
// 进行样式修改
// 遍历工作表中具有值的所有行
worksheet.eachRow(function (row, rowNumber) {
// 遍历所有行中的所有单元格
row.eachCell(cell => {
// 设置所有单元格的内容居中
cell.alignment = {
vertical: 'middle',
horizontal: 'center'
}
})
})
// 设置首行的格式
const firstrow = worksheet.getRow(1)
firstrow.height = 42.5
firstrow.eachCell(cell => {
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: {
argb: 'FF0000'
},
size: 20
}
})
// 设置第二行格式
const firstrow1 = worksheet.getRow(2)
firstrow1.height = 42.5
firstrow1.eachCell(cell => {
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: {
argb: 'FF0000'
},
size: 20
}
})
// 合并单元格
worksheet.mergeCells('D1:E1')
worksheet.mergeCells('A1:A2')
worksheet.mergeCells('B1:B2')
worksheet.mergeCells('C1:C2')
// 写入数据
workbook.xlsx.writeBuffer().then(data => {
const blob = new Blob([data])
saveAs(blob, '奥特曼.xlsx')
})
}
这里需要注意,如果你的数据是从后台获得的,并且是多层结构 数组包对象结构,那么在写表头结构的时候就需要注意,需要进行遍历,把变成一层数据结构。这样数据才能够显示出来。
这个是导出的excel表格的样式:
如果大家还想设计一些别的样式,可以参考官方文档:
exceljs/README_zh.md at 860b862d122c2645f8b34f0f885a64b104f7a538 · exceljs/exceljs · GitHub