vue使用xlsx修改樣式導出excel

npm install --save xlsx
npm install --save xlsx-style  //如果需要修改樣式，則需要安裝
   1.解決引入xlsx-style報錯問題 
   2.找到：node_modules\xlsx-style\dist\xlsx.full.min.js 並把這個js文件拷貝到static文件夾下
   3.再index.html中引入 <script src="static/xlsx.full.min.js"></script>

新建downExcel.js文件

import XLSX from "xlsx"
// 配置
const wopts = {
    bookType: "xlsx",
    bookSST: true,
    type: "binary",
    cellStyles: true
};

function downloadExl(json, config, type) {
    var tmpdata = json[0];
    json.unshift({});
    var keyMap = []; //獲取keys
    for (var k in tmpdata) {
        keyMap.push(k);
        json[0][k] = k;
    }
    var tmpdata = []; //用來保存轉換好的json
    let border = {
        bottom: {
            style: "thin",
            color: {
                rgb: "000000"
            }
        },
        top: {
            style: "thin",
            color: {
                rgb: "000000"
            }
        },
        left: {
            style: "thin",
            color: {
                rgb: "000000"
            }
        },
        right: {
            style: "thin",
            color: {
                rgb: "000000"
            }
        }
    };

    let style0 = {
        border: border,
        alignment: {
            horizontal: "center",
            wrapText: true,
            vertical: "center"
        },
        font: {
            sz: 18,
            bold: true,
            color: {
                rgb: "000000"
            },
            outline: true
        },
        fill: {
            bgColor: {
                indexed: 64
            }
        }
    };
    let style1 = {
        border: border,
        alignment: {
            horizontal: "center",
            wrapText: true,
            vertical: "center"
        },
        font: {
            sz: 12,
            bold: true,
            color: {
                rgb: "000000"
            },
            outline: true
        },
        fill: {
            bgColor: {
                indexed: 64
            }
        }
    };
    json
        .map((v, i) =>
            keyMap.map((k, j) =>
                Object.assign({}, {
                    v: v[k],
                    position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) +
                        (i + 1)
                })
            )
        )
        .reduce((prev, next) => prev.concat(next))
        .forEach((v, i) => {
            // 在遍歷時修改樣式
            let s = {
                font: {
                    sz: 10,
                    name: "微軟雅黑"
                },
                alignment: {
                    horizontal: "center",
                    wrapText: true,
                    vertical: "center"
                }
            };
            // 判斷是否是標題
            if (config._this.title.includes(v.v) && v.position.length == 2 && v.position[1] == "1") {
                s.fill = {
                    fgColor: {
                        rgb: "008000"
                    }
                };
                s.border = {
                    right: {
                        style: "thin",
                        color: {
                            rgb: "000000"
                        }
                    }
                };
                // 判斷是否是需要紅色字體的標題字段
                if (config._this.redTitle.includes(v.v)) {
                    s.font.color = {
                        rgb: "ff0000"
                    };
                }
            }
            tmpdata[v.position] = {
                v: v.v || "",
                s
            };
        });
    var outputPos = Object.keys(tmpdata); //設置區域,比如表格從A1到D10
    //設置每列對應的寬度
    tmpdata["!margins"] = [{ //工作表單元格合並配置項 可選
            s: { //s start 開始
                c: 0, //cols 開始列
                r: 0 //rows 開始行
            }, //開始 A1
            e: { //e end  結束
                c: 4, //cols 結束列
                r: 0 //rows 結束行
            }
        },
        {
            s: {
                c: 0,
                r: 1
            }, //開始 A2
            e: {
                c: 1,
                r: 1
            } //結束B2
        },
        {
            s: {
                c: 2,
                r: 1
            }, //開始 C2
            e: {
                c: 3,
                r: 1
            } //結束D2
        },
    ]
    // !cols工作表列寬配置項 可選
    tmpdata["!cols"] = config.colwidth;

    
    //        第一二行樣式
    tmpdata["A1"].s = style0;
    tmpdata["A2"].s = style1;
    tmpdata["C2"].s = style0;
    var tmpWB = {
        SheetNames: ["mySheet"], //工作表名數組
        Sheets: {
            mySheet: Object.assign({},
                tmpdata, //!ref設置工作表的范圍 如 必須 否則不顯示
                {
                    "!ref": outputPos[0] + ":" + outputPos[outputPos.length - 1] //設置填充區域
                }
            )
        }
    };
    const tmpDown = new Blob(
        [
            s2ab(
                XLSX.write(
                    tmpWB, {
                        bookType: type == undefined ? "xlsx" : type,
                        bookSST: false,
                        type: "binary"
                    } //這里的數據是用來定義導出的格式類型
                )
            )
        ], {
            type: ""
        }
    );
    // 數據處理完后傳入下載
    saveAs(
        tmpDown,
        config._this.fileName +
        "." +
        (wopts.bookType == "biff2" ? "xls" : wopts.bookType)
    );
}
// 獲取26個英文字母用來表示excel的列
function getCharCol(n) {
    let temCol = "",
        s = "",
        m = 0;
    while (n > 0) {
        m = (n % 26) + 1;
        s = String.fromCharCode(m + 64) + s;
        n = (n - m) / 26;
    }
    return s;
}

function s2ab(s) {
    if (typeof ArrayBuffer !== "undefined") {
        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;
    } else {
        var buf = new Array(s.length);
        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
        return buf;
    }
}
// 下載功能
function saveAs(obj, fileName) {
    var tmpa = document.createElement("a");
    tmpa.download = fileName || "未命名";
    // 兼容ie 火狐 下載文件
    if ("msSaveOrOpenBlob" in navigator) {
        window.navigator.msSaveOrOpenBlob(obj, fileName);
    } else if (window.navigator.userAgent.includes("Firefox")) {
        var a = document.createElement("a");
        a.href = URL.createObjectURL(obj);
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
    } else {
        tmpa.href = URL.createObjectURL(obj);
    }
    tmpa.click();
    setTimeout(function () {
        URL.revokeObjectURL(obj);
    }, 100);
}
export default downloadExl;

使用：import downloadfn from "@/config/downExcel
 data(){
   return{

            fileName:"testExcel",

            xmindJSON: [

                {

                    Code: 1,

                    Name: "里斯",

                    GBPerfix: "ABC-F",

                    stop: "測試"

                },

                {

                    Code: 2,

                    Name: "里斯1",

                    GBPerfix: "ABC-B",

                    stop: "測試1"

                },

                {

                    Code: 3,

                    Name: "里斯2",

                    GBPerfix: "ABC-D",

                    stop: "測試1"

                }

            ],

            config: {

                colwidth: [

                    { wpx: 169 },

                    { wpx: 63 },

                    { wpx: 203 },

                    { wpx: 128 },

                ],

                _this: this

            },

            title: ["功能模塊與路徑", "用例編號", "前置條件"]

   
   }
 }
methods:{

    export() {

            downloadfn(this.xmindJSON, this.config);

        }

}