参考:(可根据此参考 解决Can't resolve './cptable' in '...' 的问题,我只是对他的方法进行了封装)使用Vue+xlsx+xlsx-style实现导出自定义样式的Excel文件
版本:
"xlsx": "^0.18.5",
"xlsx-style": "^0.8.13"
"vue": "^2.5.10",
删除了一些代码,只保留了表头和边框,顺便加了个合计,合计在页面调用中直接插入到数据中
在libs里创建excel2.js
import * as XLSX from 'xlsx'
import * as XLSX_STYLE from 'xlsx-style' // Vue2 + Webpack
//thList 表头,keyList 对应的字段名
/**
* 导出数据
*/
export function handelExportExcelClick(title,data,thList,keyList) {
// 一、准备数据
const list = getExportDataList(data,thList,keyList)
// yLength用于设置列宽
const yLength = thList.length;
console.log('list =>', list)
// 二、新建一个工作簿
const workBook = XLSX.utils.book_new()
// 三、使用二维数组生成一个工作表
const workSheet = sheet_from_array_of_arrays(list)
// 四、将 "A1" 到 "M1" 的单元格合并为 "A1"
workSheet['!merges'] = [
{
s: { // s ("start"): c = 0 r = 0 -> "A1"
r: 0,
c: 0
},
e: { // e ("end"): c = 0 r = 9 -> "J1"
r: 0,
c: yLength-1
}
}
]
// 五、设置每列的宽度(单位:px)
// const wsCols = [
// { wch: 15 },
// { wch: 15 },
// { wch: 15 },
// { wch: 15 },
// { wch: 15 }
// ]
// 上面的是固定写法
let wsCols = []
for (let i = 0; i < yLength; i++) {
wsCols.push({ wch: 15 })
}
workSheet['!cols'] = wsCols
// 六、设置每行的高度(单位:px)
let wsRows = []
for (let i in list) {
if (i == 0) {
wsRows.push({ hpx: 100 }) // 首行高度为 100px
} else {
// wsRows.push({ hpx: 30 }) // 其他行高度为 30px
}
}
workSheet['!rows'] = wsRows
// 七、设置单元格样式
for (let key in workSheet) {
if (key == '!ref' || key == '!merges' || key == '!cols' || key == '!rows') {
continue
} else {
// 匹配表格第一行(注意 A1 单元已合并为一个单元),设置其样式
if (key == 'A1') {
workSheet[key] = {
t: 's', // 设置单元格类型(type: b Boolean, e Error, n Number, d Date, s Text, z Stub)
v: title, // 这里设置了表头!
// l: { Target: "https://sheetjs.com", Tooltip: "Find us @ SheetJS.com!" }, // 单元格超链接 cell hyperlink / tooltip (More Info)
s: { // 设置单元格样式
fill: { // 设置背景色
fgColor: { rgb: 'ffffff' },
},
font: { // 设置字体
name: '等线', // 字体名称
sz: 35, // 字体大小
bold: true, // 字体是否加粗
color: { rgb: '5e7ce0' }, // 文字颜色
},
alignment: { // 设置居中
horizontal: 'center', // 水平(向左、向右、居中)
vertical: 'center', // 上下(向上、向下、居中)
wrapText: false, // 设置单元格自动换行,目前仅对非合并单元格生效
indent: 0 // 设置单元格缩进
},
},
}
}
else {
workSheet[key].s = {
border: {
top: {
style: 'thin',
},
bottom: {
style: 'thin',
},
left: {
style: 'thin',
},
right: {
style: 'thin',
},
},
fill: { // 设置背景色
fgColor: { rgb: 'ffffff' },
},
font: { // 设置字体
name: '微软雅黑', // 字体名称
sz: 10, // 字体大小
},
alignment: {
horizontal: 'center', // 水平(向左、向右、居中)
vertical: 'center', // 上下(向上、向下、居中)
wrapText: false, // 设置单元格自动换行,目前仅对非合并单元格生效
indent: 0 // 设置单元格缩进
}
}
}
}
}
// console.log('workSheet =>', workSheet)
// 八、在工作簿中添加工作表
XLSX.utils.book_append_sheet(workBook, workSheet, 'sheet')
// 九、使用 xlsx-style 写入文件方式,使得自定义样式生效
const tmpDown = new Blob([
s2ab(
XLSX_STYLE.write(workBook, {
bookType: 'xlsx',
bookSST: true,
type: 'binary',
cellStyles: true,
})
),
])
// 十、导出 Excel 文件
// const date = new Date()
// const formattedDate =
// `` +
// `${date.getFullYear()}` + // 年
// `${(date.getMonth() + 1).toString().padStart(2, '0')}` + // 月
// `${date.getDate().toString().padStart(2, '0')}` + // 日
// `${date.getHours().toString().padStart(2, '0')}` + // 时
// `${date.getMinutes().toString().padStart(2, '0')}` + // 分
// `${date.getSeconds().toString().padStart(2, '0')}` + // 秒
// ``.trim()
downloadExcelFile(tmpDown, title + '.xlsx')
}
/**
* 准备数据
*/
function getExportDataList(data,thList,keyList) {
// const thList = [
// '商品ID',
// '商品名称',
// '商品描述',
// '规格',
// '库存'
// ]
// const keyList = [
// 'id',
// 'name',
// 'desc',
// 'spec',
// 'num'
// ]
const tdList = formatJson(keyList, data) // 过滤字段以及转换数据格式,即:表格数据
tdList.unshift(thList) // 将 thList 数组添加到 tdList 数组开头,即:表格头部
tdList.unshift(['']) // 将空字符串数组添加到 tdList 数组开头,即:表格首行
const list = tdList
return list
}
/**
* 过滤字段以及转换数据格式
*/
function formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(item => {
if (item === 'name') {
if (v['name'] != null && v['name'] != '') {
return v[item].split(';').join('\n')
} else {
return '-'
}
}
// else if (item === 'status') {
// if (v['status'] != null && v['status'] == 0) {
// return '正常'
// } else if (v['status'] != null && v['status'] == 1) {
// return '待上架'
// } else if (v['status'] != null && v['status'] == 2) {
// return '已下架'
// } else {
// return '-'
// }
// }
else {
return v[item]
}
}))
}
/**
* 使用二维数组生成一个工作表
*/
function sheet_from_array_of_arrays(data, opts) {
var ws = {};
var range = {
s: {
c: 10000000,
r: 10000000
},
e: {
c: 0,
r: 0
}
}
for (var R = 0; R != data.length; ++R) {
for (var C = 0; C != data[R].length; ++C) {
if (range.s.r > R) range.s.r = R;
if (range.s.c > C) range.s.c = C;
if (range.e.r < R) range.e.r = R;
if (range.e.c < C) range.e.c = C;
var cell = {
v: data[R][C]
};
if (cell.v == null) continue;
var cell_ref = XLSX.utils.encode_cell({
c: C,
r: R
})
if (typeof cell.v === 'number') cell.t = 'n';
else if (typeof cell.v === 'boolean') cell.t = 'b';
else if (cell.v instanceof Date) {
cell.t = 'n';
cell.z = XLSX.SSF._table[14];
cell.v = date_num(cell.v);
// cell.z = 'YYYY-MM-DD'
cell.z = 'YYYY-MM-DD HH:mm:ss'
} else cell.t = 's'
ws[cell_ref] = cell
}
}
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
return ws
}
/**
* 日期转换
*/
function date_num(v, date1904) {
if (date1904) {
v += 1462;
}
var epoch = Date.parse(v);
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}
/**
* 文件流转换
*/
function s2ab(s) {
if (typeof ArrayBuffer !== 'undefined') {
const buf = new ArrayBuffer(s.length)
const view = new Uint8Array(buf);
for (let i = 0; i != s.length; ++i) {
view[i] = s.charCodeAt(i) & 0xff
}
return buf
} else {
const buf = new Array(s.length)
for (let i = 0; i != s.length; ++i) {
buf[i] = s.charCodeAt(i) & 0xff
}
return buf
}
}
/**
* 使用 a 标签下载文件
*/
function downloadExcelFile(obj, fileName) {
const a_node = document.createElement('a')
a_node.download = fileName
if ('msSaveOrOpenBlob' in navigator) {
window.navigator.msSaveOrOpenBlob(obj, fileName)
} else {
a_node.href = URL.createObjectURL(obj)
}
a_node.click()
setTimeout(() => {
URL.revokeObjectURL(obj)
}, 2000)
}
在页面中调用:
exportExcel(title) {
if (this.list.length) {
this.exportLoading = true
const { thList, keyList } = this.getThList()
let data=JSON.parse(JSON.stringify(this.list));
// 初始化sumObj,所有key对应值设为空字符串
let sumObj = {};
keyList.forEach(key => {
sumObj[key] = '';
});
// 设置第一个item的key值为'合计'
sumObj[keyList[0]]='合计'
// 遍历data并累加数字类型的item[key]
data.forEach(item => {
keyList.forEach(key => {
if (typeof item[key] === 'number') {
sumObj[key] = Number(sumObj[key]) + item[key];
}
});
});
// 将汇总对象推入data数组
data.push(sumObj);
handelExportExcelClick(title, data, thList, keyList)
}else{
this.$Message.info('表格数据不能为空!')
}
},
getThList() {
let thList = []
let keyList = []
this.columns.forEach(item => {
if (item.title) {
thList.push(item.title)
keyList.push(item.key)
}
})
// 将 thList 和 keyList 包装成一个对象返回
return { thList, keyList }
},
运行结果: