代码如下(生成表格插件):npm install xlsx --save
代码如下(修改表格样式):npm install xlsx-style --save
代码如下(示例):
import * as XLSX from ‘xlsx’
import XLSXD from ‘xlsx-style’
data(){
returen{
//所需数据格式
msgList: [
{ name: '张三', age: 16, sex: '男' },
{ name: '礼思', age: 16, sex: '男' },
{ name: '王五', age: 16, sex: '男' },
],
}
}
//数据格式
methods:{
exportHandler() {
// eslint-disable-next-line prefer-const
let wb = XLSX.utils.book_new()
// eslint-disable-next-line prefer-const
//设置单元格列标题
let headers = {
serialNumber: '序号',
date: '日期',
periodStatistics: '时段统计',
timeInterval: '时段',
hoistingTimes: '吊装次数',
hoistingTonnage: '吊装吨数',
labeaverageHoistingTime: '平均每次吊装时间',
averageHoistingTonnage: '平均吊装吨位',
maxHoistingTime: '最长吊装时间',
minHoistingTime: '最短吊装时间',
maxHoistingTonnage: '最大吊装吨位',
}
this.msgList.unshift(headers)
// eslint-disable-next-line prefer-const
//插入所需数据(这里的this.msgList就是要导出的数据)
let contentWs = XLSX.utils.json_to_sheet(this.msgList, {
header: [
'serialNumber',
'date',
'periodStatistics',
'timeInterval',
'hoistingTimes',
'hoistingTonnage',
'labeaverageHoistingTime',
'averageHoistingTonnage',
'maxHoistingTime',
'minHoistingTime',
'maxHoistingTonnage',
],
skipHeader: true,
origin: 'A1',
})
contentWs['!merges'] = []
//去重方法,因为我所做的项目需要将重复项合并为一行,也就是合并单元格
const dateListSerialNumber = _.uniq(msgList(o => o.serialNumber))
dateListSerialNumber.shift()
dateListSerialNumber.forEach((date, index) => {
//字体样式
const font = {
name: '宋体',
sz: 12,
bold: true,
color: { rgb: '00000000' },
}
//设置文字居中
const alignment = {
horizontal: 'center',
vertical: 'center',
}
//'A1'到 'An'是你想给单元格的样式区域,可以固定写入,下面是只给固定区域修改样式
// contentWs['A1'].s = {
// font,
// alignment,
//}
contentWs['A' + (index * 24 + 2)].s = {
font,
alignment,
}
// 给单元格边框加粗 'thin'为细线 ,'thick'为粗线,因为我这个项目不需要加粗,我就注释了
// const border = {
// top: {
// style: 'thin',
// },
// bottom: {
// style: 'thin',
// },
// left: {
// style: 'thin',
// },
// right: {
// style: 'thin',
// },
// }
//合并单元格,跟上面的单元格样式一样,数据可以固定写
//s为合并的起始位置,e为合并的结束位置
//r为行,c为列
contentWs['!merges'].push({
s: { r: index * 24 + 1, c: 0 },
e: { r: (index + 1) * 24, c: 0 },
})
})
//给单元格设置列宽
contentWs['!cols'] = [
{ wch: 8 },
{ wch: 15 },
{ wch: 20 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
]
//将配置好的数据插入渲染槽种
XLSX.utils.book_append_sheet(wb, contentWs, '单表名')
const tmpDown = new Blob([
this.s2ab(
XLSXD.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'binary',
cellStyles: true,
}),
),
])
const deviceName = '表格1.xlsx'
this.downExcel(
tmpDown,
deviceName ,
)
},
downExcel(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)
},
// 文件流转换
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
}
},
}