vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等

开始之前先上效果图，觉得不错的可以点个赞

1.需要用到的js

(1)js-xlsx.js
https://github.com/Ctrl-Ling/XLSX-Style-Utils或者https://github.com/SheetJS/js-xlsx
里面的xlsx.core.min.js或xlsx.full.min.js
(2)xlsxStyle.js
https://github.com/Ctrl-Ling/XLSX-Style-Utils
里面的xlsxStyle.core.min.js
(3)xlsxStyle.utils.js
https://github.com/Ctrl-Ling/XLSX-Style-Utils
里面的xlsxStyle.utils.js

2.下载js后通过

  <script src="./vue.js"></script> 
  <script src="./xlsx.core.min.js"></script>
  <script src="./xlsxStyle.core.min.js"></script>
  <script src="./xlsxStyle.utils.js"></script>

3.开始使用

<button @click="exportExcel3">导出excel3button>

methods: {
	exportExcel3() {
		//数据形式
		let __data = [
			['订单号', '产品名称', '供应商信息', '采购单价', '币种', '退税率', '关税', '付款方式'], //标题
			['内容', '内容', '内容', '内容', '内容', '内容', '内容', '内容'],
			['内容', '内容', '内容', '内容', '内容', '内容', '内容', '内容'],
			['内容', '内容', '内容', '内容', '内容', '内容', '内容', '内容'],
			['内容', '内容', '内容', '内容', '内容', '内容', '内容', '内容']
		]
		var sheet = XLSX.utils.json_to_sheet(__data, {
		            skipHeader: true,
		          });
		          
		//第一次使用的朋友可以添加一句输出看看sheet的数据结构
		//console.log(sheet)
		
		//遍历每个格子
		for(const key in sheet) {
		//给每个格子修改样式
			sheet[key].s = {
			  border: {//添加边框
			    bottom: {
			      style: 'thin',
			      color: '000000'
			    },
			    left: {
			      style: 'thin',
			      color: '000000'
			    },
			    right: {
			      style: 'thin',
			      color: '000000'
			    },
			    top: {
			      style: 'thin',
			      color: '000000'
			    }
			  },
			  //字体水平居中、垂直居中、自动换行、缩进
			  alignment:{
			    horizontal:'center', //水平居中
			    vertical: 'center',
			    wrapText: 1,
			    indent: 0
			  },
			  //字体类型、大小、是否加粗
			  font: {//字体
			    name: '等线',
			    sz: 9,
			    bold: false
			  }
			}
			//给特定格子（带'1'的，即首行 标题）添加样式，下面同理
			if (key.replace(/[^0-9]/ig, '') === '1') {
			  sheet[key].s = {
			    ...sheet[key].s,
			    fill: { //背景色
			      fgColor: { rgb: 'EBF1DE' }
			    },
			    font: {//覆盖字体
			      name: '等线',
			      sz: 11,
			      bold: true
			    },
			  }
			}
			if (key === 'A1') {
			  sheet[key].s = {
			    ...sheet[key].s,
			    fill: { //背景色
			      fgColor: { rgb: 'E4DFEC' }
			    }
			  }
			}
			if (key === 'C1' || key === 'D1' || key === 'E1' || key === 'F1' || key === 'G1' || key === 'H1' ) {
			  sheet[key].s = {
			    ...sheet[key].s,
			    fill: { //背景色
			      fgColor: { rgb: 'FDE9D9' }
			    }
			  }
			}
		}
		//列宽
		let colsP = [
			{
			  'wch' : 8.11 //A
			},
			{
			  'wch' : 12.67//B
			},
			{
			  'wch' : 8.11//C
			},
			{
			  'wch' : 8.11//D
			},
			{
			  'wch' : 8.11//E
			},
			{
			  'wch' : 6.78//F
			},
			{
			  'wch' : 8.11//G
			},
			{
			  'wch' : 8.11//H
			},
		]
		sheet['!cols'] = colsP
		//console.log('1111:', sheet)
		//打印
		let excelName = '汇报单.xlsx' //excel文件名
		this.openDownload(this.sheet2blob(sheet,'汇报单详细'), excelName);
	},
	//下面两个函数是处理数据流的，可以直接拿来用
	//导出excel辅助函数
   sheet2blob(sheet, sheetName) {
     let wb = XLSX.utils.book_new()
     wb.SheetNames.push(sheetName)
     wb.Sheets[sheetName] = sheet
     var wbout = xlsxStyle.write(wb, { bookType: '', bookSST: false, type: 'binary' })
     var blob = new Blob([s2ab(wbout)], { type: "" },sheetName)
     // 字符串转ArrayBuffer
     function s2ab(s) {
       var buf = new ArrayBuffer(s.length)
       var view = new Uint8Array(buf)
       for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
       return buf
     }
     return blob
   },
   //导出excel辅助函数
   openDownload(url, saveName) {
     if (typeof url == "object" && url instanceof Blob) {
       url = URL.createObjectURL(url) // 创建blob地址
     }
     var aLink = document.createElement("a")
     aLink.href = url
     aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
     var event
     if (window.MouseEvent) event = new MouseEvent("click")
     else {
       event = document.createEvent("MouseEvents")
       event.initMouseEvent("click",true,false,window,0,0,0,0,0,false,false,false,false,0,null)
     }
     aLink.dispatchEvent(event);
   }
}

4.点击按钮导出，大功告成，给大家看看效果图