原作者csdn博客链接：https://blog.csdn.net/liang04273/article/details/135423618
方法已经封装好，使用该方法能快速实现将表格导出excel文件。在原作者基础上，我的表格组件不一样，也没有用一些合并单元格的功能。
1. 相关依赖安装
npm install xlsx@0.16.8
npm install file-saver
npm install xlsx-style-medalsoft
2.封装公共导出功能 tool.js
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import XLSXStyle from 'xlsx-style-medalsoft'
const OMS = {}
// 导出Excel-单表格Excel 带样式
OMS.downLoadXlsx = ({
dom = 'mg-easy-table', // 不同表格组件，替换需要导出的dom即可
name = '文件',
ColumnWidth = [],
rowName = null
}) => {
const table = document.getElementById(dom)
const et = XLSX.utils.table_to_book(table, { raw: true }) // 此处传入table的DOM节点,raw为true表示单元格为文本格式(未加工)
const wbs = et.Sheets.Sheet1
// 删掉末尾空行
Object.keys(wbs).forEach((item, index) => {
if (!item.startsWith('!') && wbs[item].v === '') {
delete wbs[item]
}
if (rowName !== '') {
if (item.includes(rowName)) {
delete wbs[item]
}
}
})
console.log(wbs, 'wbs')
// debugger;
// 设置表格列行高
// 设置表格列宽度
if (ColumnWidth.length === 0) {
for (let i = 0; i < 30; i++) {
wbs['!cols'][i] = { wch: 12.5 }
// wbs['!rows'][i] = { hpt: 60 }
}
} else {
ColumnWidth.forEach((item, i) => {
// 这里设置全部行高
wbs['!cols'][i] = { wch: item }
wbs['!rows'][i] = { hpt: item }
})
}
// 循环遍历每一个表格，设置样式
for (const key in wbs) {
if (!key.startsWith('!')) {
wbs[key].s = {
font: {
sz: 11, // 字体大小
bold: false, // 加粗
name: '宋体', // 字体
color: {
rgb: '000000' // 十六进制，不带#
}
},
alignment: {
// 文字居中
horizontal: 'center',
vertical: 'center',
wrapText: false, // 文本自动换行
textIndent: 1 // 设置文本溢出时的自动缩进，单位为字符数
}
}
}
}
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'
})
// eslint-disable-next-line no-useless-catch
try {
FileSaver.saveAs(
new Blob([etout], { type: 'application/octet-stream' }),
`${name}.xlsx`
) // 导出的文件名
} catch (e) {
throw e
}
}
export default OMS
3.引入tool.js，给表格绑定一个id，通过id获取dom来导出
handleExport () {
OMS.downLoadXlsx({
dom: 'kuTable',
name: '文件',
// ColumnWidth: [
// 10, 15, 20, 30, 15, 16, 25, 10, 10, 12, 30, 15
// ] // 每一列的宽度，需要直接指定，接受数字
rowName: 'M' // 哪列不要的
})
}
