提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
系列文章目录前言一、用Xlsx xlsx-style 导出excel表格二、使用步骤 1.安装插件2.引入总结前言
刚加入前端开发这个行业，学着发布一篇关于我工作上我用到的知识
一、打开编辑器
二、使用步骤
1.安装插件
代码如下（生成表格插件）：npm install xlsx --save
代码如下（修改表格样式）：npm install xlsx-style --save
2.引入
代码如下（示例）：
mport * as XLSX from 'xlsx'
import XLSXD from 'xlsx-style'
3.基础代码
data(){returen{//所需数据格式msgList: [{ name: '张三', age: 16, sex: '男' },{ name: '礼思', age: 16, sex: '男' },{ name: '王五', age: 16, sex: '男' },],}}//数据格式methods:{exportHandler() {// eslint-disable-next-line prefer-constlet 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 = fileNameif ('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}},}
用Xlsx xlsx-style 导出excel表格 附带合并单元格 文字居中 文字颜色字体大小等样式 (复制即可实现)
