Vue中使用js-xlsx導出Data數據到Excel

需要引入的第三方JS有：export.js、xlsx.extendscript.js、xlsx.full.min.js

JS太大不貼出來，放一個可下載百度雲連接: https://pan.baidu.com/s/1jmu9UktuEZVnZ5B0ZWOb8w 提取碼:pn6x 

 

拜讀兩位大佬的文章：

文章參考： http://blog.haoji.me/js-excel.html

文章設置單元格樣式： https://www.cnblogs.com/toyNotes/articles/9264998.html

 

HTML部分：

 <button type="button" class="bt_css_s" @click="btn_export">導出</button>

 

JS部分：

  btn_export: function () {
                var that = this;
                //要導出去的標題
                var arry = [['項目進度ID', '項目詳情ID', '項目名稱', '計划進度', '開始時間', '結束時間', '本年投資計划完成', '進度描述', '進度差異原因']];         
                // that.Data指要導出的數據
                that.Data.map(a => {
                    var _arry = [];
                    _arry.push(a.ID.toString());
                    _arry.push(a.JHPID.toString());
                    _arry.push(a.NAME.toString());
                    _arry.push(a.JHJD.toString());
                    _arry.push(a.KSSJ == null ? "" : a.KSSJ.format('yyyy-MM-dd'));  //格式化日期沒有就返回空
                    _arry.push(a.JSSJ == null ? "" : a.KSSJ.format('yyyy-MM-dd'));  //格式化日期沒有就返回空
                    _arry.push(a.BNWC.toString());
                    _arry.push(a.JDMS.toString());
                    _arry.push(a.CYYY.toString());
                    return _arry;
                }).forEach(a => {
                    arry.push(a);
                });
                var sheet = XLSX2.utils.aoa_to_sheet(arry);
                //循環單元格設置樣式
                var s = sheet['!ref'];
                sheet["A2"].s = {
                    font: {
                        name: '宋體',
                        sz: 18,
                        color: { rgb: "#FFFF0000" },
                        bold: true,
                        italic: false,
                        underline: false
                    },
                    alignment: {
                        horizontal: "center",
                        vertical: "center"
                    }
                };
                var rows = s.substr(s.length - 1, 1);
                var cloums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
                for (var j = 0; j < cloums.length; j++) {
                    for (var i = 1; i <= rows; i++) {
                        if (i == 1) {
                            sheet[cloums[j] + i].s = { //樣式  
                                font: {
                                    bold: true,
                                    italic: false,
                                    underline: false
                                },
                                alignment: {
                                    horizontal: "left",
                                    vertical: "left",
                                    wrap_text: false
                                }
                            };
                        }
                        else {
                            sheet[cloums[j] + i].s = { //樣式  
                                alignment: {
                                    horizontal: "left",
                                    vertical: "left",
                                    wrap_text: false
                                }
                            };
                        }
                    }
                }
                sheet["!cols"] = [{
                    wpx: 90
                }, {
                    wpx: 90
                }, {
                    wpx: 90
                }, {
                    wpx: 90
                }, {
                    wpx: 150
                }, {
                    wpx: 150
                }, {
                    wpx: 180
                }, {
                    wpx: 150
                }, {
                    wpx: 150
                }, {
                    wpx: 150
                }, {
                    wpx: 70
                }, {
                    wpx: 150
                }, {
                    wpx: 120
                }]; //單元格列寬   
                openDownloadDialog(sheet2blob(sheet), that.format(new Date()) + '進度導出管理.xlsx');
            }