el-table带格式导出Excel
参考文章：https://blog.csdn.net/Jackchen9900/article/details/125747215
1.实现效果
前端页面
导出效果
2.el-table部分
<template>
<div class="hello">
<h1>使用js完成el-table带格式导出Excel</h1>
<el-button
type="success"
@click="downloadExcel">
导出为Excel
</el-button>
<el-table
id="download-excel"
:data="tableData"
border
style="width: 700px">
<!-- el-table一定要加一个id-->
<el-table-column
prop="date"
label="日期"
width="200"
align="center">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="200"
align="center">
</el-table-column>
<el-table-column
prop="address"
label="地址"
align="center">
</el-table-column>
</el-table>
</div>
</template>
划重点：el-table组件一定要加一个id
3.数据可调用接口获取
<script>
import OMS from '../utils/exportTools'
export default {
name: 'HelloWorld',
data () {
return {
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: {
downloadExcel () {
OMS.downLoadXlsx({
dom: 'download-excel',
name: '导出为Excel',
ColumnWdth: [20, 20, 35]
})
}
}
}
</script>
import OMS from '../utils/exportTools'引入工具方法
downloadExcel()
dom: 'download-excel',这里是el-table的id，用于获取表格的数据
name: '导出为Excel',这里是导出后的文件名
ColumnWdth: [20, 20, 35]这里是导出后表格每列的宽度
4.在src→utils中新建exportTools.js文件
exportTools
import FileSaver from 'file-saver'
// import XLSX from 'xlsx'
import * as XLSX from 'xlsx'
import XLSXStyle from 'xlsx-style-medalsoft'
const OMS = {}
// 导出Excel-单表格Excel 带样式
OMS.downLoadXlsx = ({ dom = 'gx_table', name = '文件', ColumnWdth = [] }) => {
const table = document.getElementById(dom)
// 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
if (table.querySelector('.el-table__fixed-right')) { table.removeChild(table.querySelector('.el-table__fixed-right')) }
if (table.querySelector('.el-table__fixed')) { table.removeChild(table.querySelector('.el-table__fixed')) }
const et = XLSX.utils.table_to_book(table, { raw: true }) // 此处传入table的DOM节点,raw为true表示单元格为文本格式(未加工)
const wbs = et.Sheets.Sheet1
const arrA = Object.keys(wbs)
arrA.forEach((item, index) => {
// eslint-disable-next-line eqeqeq
if (wbs[item].v == '') {
delete wbs[item]
}
})
// 设置表格宽度
if (ColumnWdth.length === 0) {
for (let i = 0; i < 30; i++) {
wbs['!cols'][i] = { wch: 12.5 }
}
} else {
ColumnWdth.forEach((item, i) => {
wbs['!cols'][i] = { wch: item }
})
}
// 循环遍历每一个表格，设置样式
for (const key in wbs) {
if (key.indexOf('!') === -1) {
// eslint-disable-next-line eqeqeq
if (key == 'A1' || key == 'B1' || key == 'C1' || key == 'D1' || key == 'E1' || key == 'F1' || key == 'G1' || key == 'H1' || key == 'I1') {
// console.log('key', key)
wbs[key].s = {
font: {
sz: 13, // 字体大小
bold: true, // 加粗
name: '宋体', // 字体
color: {
rgb: '000000' // 十六进制，不带#
}
},
alignment: {
// 文字居中
horizontal: 'center',
vertical: 'center',
wrapText: false// 文本自动换行
},
border: {
// 设置边框
top: { style: 'thin' },
bottom: { style: 'thin' },
left: { style: 'thin' },
right: { style: 'thin' }
}
}
} else {
wbs[key].s = {
font: {
sz: 11, // 字体大小
bold: false, // 加粗
name: '宋体', // 字体
color: {
rgb: '000000' // 十六进制，不带#
}
},
alignment: {
// 文字居中
horizontal: 'center',
vertical: 'center',
wrapText: false// 文本自动换行
},
border: {
// 设置边框
top: { style: 'thin' },
bottom: { style: 'thin' },
left: { style: 'thin' },
right: { style: 'thin' }
}
}
}
}
}
const arr = [
'A',
'B',
'C',
'D',
'E',
'F',
'G',
'H',
'I',
'J',
'K',
'L',
'M',
'N',
'O',
'P',
'Q',
'R',
'S',
'T',
'U',
'V',
'W',
'X',
'Y',
'Z'
]
const range = wbs['!merges']
if (range) {
range.forEach((item) => {
const startColNumber = Number(item.s.r)
const endColNumber = Number(item.e.r)
const startRowNumber = Number(item.s.c)
const endRowNumber = Number(item.e.c)
const test = wbs[arr[startRowNumber] + (startColNumber + 1)]
for (let col = startColNumber; col <= endColNumber; col++) {
for (let row = startRowNumber; row <= endRowNumber; row++) {
wbs[arr[row] + (col + 1)] = test
}
}
})
}
const etout = XLSXStyle.write(et, {
bookType: 'xlsx',
type: 'buffer'
})
try {
FileSaver.saveAs(
new Blob([etout], { type: 'application/octet-stream' }), `${name}.xlsx`) // 导出的文件名
// eslint-disable-next-line no-empty
} catch (e) {
}
return etout
}
export default OMS
划重点
安装依赖
npm install --save xlsx file-saver
其他依赖根据控制台提示依次安装即可
5.小问题
由于需求要求导出表格第一行表头需要实现加粗效果，所以我在样式设置中加了一重判断
if (key.indexOf('!') === -1) {
// eslint-disable-next-line eqeqeq
if (key == 'A1' || key == 'B1' || key == 'C1' || key == 'D1' || key == 'E1' || key == 'F1' || key == 'G1' || key == 'H1' || key == 'I1') {
// console.log('key', key)
//设置表头样式
} else {
//设置其他样式
}
}
具体代码可见exportExcel.js文件
