失眠网 > vue使用js-xlsx xlsx xlsxStyle导出excel 可合并表格修改格子样式例如背景颜色字体大小列宽等

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

时间：2020-02-23 11:04:59

开始之前先上效果图，觉得不错的可以点个赞（有合并表格的需求可看文章底部链接）

1.需要用到的js

(1)js-xlsx.js

/Ctrl-Ling/XLSX-Style-Utils或者/SheetJS/js-xlsx

里面的xlsx.core.min.js或xlsx.full.min.js

(2)xlsxStyle.js

/Ctrl-Ling/XLSX-Style-Utils

里面的xlsxStyle.core.min.js

(3)xlsxStyle.utils.js

/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">导出excel3</button>

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] = sheetvar wbout = xlsxStyle.write(wb, {bookType: '', bookSST: false, type: 'binary' })var blob = new Blob([s2ab(wbout)], {type: "" },sheetName)// 字符串转ArrayBufferfunction 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) & 0xffreturn 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 = urlaLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效var eventif (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);}}