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');
            }