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

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

文章图片

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后通过

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

3.开始使用

methods: { exportExcel3() { //数据形式 let __data = https://www.it610.com/article/[ ['订单号', '产品名称', '供应商信息', '采购单价', '币种', '退税率', '关税', '付款方式'], //标题 ['内容', '内容', '内容', '内容', '内容', '内容', '内容', '内容'], ['内容', '内容', '内容', '内容', '内容', '内容', '内容', '内容'], ['内容', '内容', '内容', '内容', '内容', '内容', '内容', '内容'], ['内容', '内容', '内容', '内容', '内容', '内容', '内容', '内容'] ] 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 = https://www.it610.com/article/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.点击按钮导出，大功告成，给大家看看效果图 【javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等】