如何經過xlsx-style 修改導出excel的樣式

如何經過xlsx-style 修改導出excel的樣式

實現導出的excel是帶有邊框的，知足打印的時候能夠儘量的鋪滿A4紙

安裝 xlsx-style

npm install xlsx-style --save複製代碼

修改xlsx-style 源碼 解決報錯

在\node_modules\xlsx-style\dist\cpexcel.js  
var cpt = require('./cpt' + 'able');  改成   var cpt = cptable; 
複製代碼

修改vue中的代碼

import XLSX from "xlsx";
import XLSXS from "xlsx-style"

        methods:{
            toExcel(){
                let wb = XLSX.utils.table_to_book(this.$refs.table,{sheet:'分組表'})
                this.setExlStyle(wb['Sheets']['分組表'])
                //合併單元格邊框補齊
                this.addRangeBorder(wb['Sheets']['分組表']['!merges'],wb['Sheets']['分組表'])
                var ws = XLSXS.write(wb, {
                    type: "buffer"
                });
                try {
                    FileSaver.saveAs(
                        new Blob([ws], { type: "application/octet-stream" }),
                        `5.xlsx`
                    );
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, ws);
                }
                return ws;
            },
            setExlStyle(data) {
                let borderAll = {  //單元格外側框線
                    top: {
                        style: 'thin',
                    },
                    bottom: {
                        style: 'thin'
                    },
                    left: {
                        style: 'thin'
                    },
                    right: {
                        style: 'thin'
                    }
                };
                data['!cols'] = [];
                for (let key in data) {
                    if (data[key] instanceof Object) {
                        data[key].s = {
                            border: borderAll,
                            alignment: {
                                horizontal: 'center',   //水平居中對齊
                                vertical:'center'
                            },
                            font:{
                                sz:11
                            },
                            bold:true,
                            numFmt: 0
                        }
                        data['!cols'].push({wpx: 115});
                    }
                }
                return data;
            },
            addRangeBorder(range,ws){
                let arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
                range.forEach(item=>{
                    let startRowNumber = Number(item.s.c),
                        endRowNumber = Number(item.e.c);
                    for(let i = startRowNumber;i<= endRowNumber;i++){
                        for( let j = Number(item.s.r)+1;j<=Number(item.e.r);j++){
                            ws[`${arr[i]}${j+1}`] = {s:{border:{top:{style:'thin'}, left:{style:'thin'},bottom:{style:'thin'},right:{style:'thin'}}}};
                        }
                    }

                })
                return ws;

            },
        }複製代碼