Vue+ElementUI 导出table数据为Excel文件（非npm的方式引入js文件）

        最近项目有个需求，将页面中的table导出为excel文件。本来最初的想法的是将数据传输到后台，在使用apache的POI组件导出excel，但是当前项目的框架版本比较老，而且是自研框架，无法调用后台代码。所有这条路走不通，然后转为使用前端组件导出excel文件。

        这里面前端用的是Vue框架+ElementUI。根据网上搜索的资料，都需要引入两个依赖，分别为xlsx和file-saver，然后网上写的都是通过npm的方式下载依赖，但是我压根就看不懂（最近才开始接触Vue）。

所以请教了一下公司的前端同事，装了一个NodeJs，然后通过命令行下载该依赖。

下载依赖（js文件）：

（1）首先在桌面新建一个文件夹，并进入该文件夹

（2）打开power shell，执行命令 npm init

（3）执行命令 npm -i xlsx ，执行完成后会发现 在 npm\node_modules\xlsx 目录下已经下载好了xlsx.js 文件

（4）执行命令 npm -i file-saver ，执行完成后会发现在 npm\node_modules\file-saver\dist 目录下已经下载好了FileSaver.js 文件

html页面引用依赖：

（5）最后把这两个文件通过

    <script type="text/javascript" src="/assets/js/FileSaver.js"></script>
    <script type="text/javascript" src="/assets/js/xlsx.js"></script>

引入到html文件中。

定义变量（我也不知道是干嘛的）：

（6）在script标签内 定义以下列代码

    Vue.prototype.$XLSX = XLSX;

如下图所示：

 在html文件中定义table（声明id）：

 编写导出excel的JavaScript代码：

var vm = new Vue({
        el: '#app',
        data() {
            return {
                tableDataList: [],
                total: 0,
            }
        },
        methods: {
            //导出excel文件
            exportExcel() {
                //根据id获取table
                let tables = document.getElementById("exportTable");
                //固定写法
                let wb = this.$XLSX.utils.table_to_sheet(tables, {raw: true});
                for (var i = 0; i < 11; i++) {
                    //设置前10列宽度为130
                    wb["!cols"][i] = {
                        wpx: 130
                    }
                }
                //设置文字颜色、居中显示
                for (const key in wb) {
                    if (key.indexOf('!') === -1 && wb[key].v) {
                        wb[key].s = {
                            font: { //字体设置
                                sz: 13,
                                bold: false,
                                color: {
                                    rgb: '000000' //十六进制，不带#
                                }
                            },
                            alignment: { //文字居中
                                horizontal: 'center',
                                vertical: 'center',
                                wrap_text: true
                            }
                        }
                    }
                }
                //设置sheet名称，将为转为blob
                var filedata = this.sheet2blob(wb, "铅封运用完成率详情");
                //设置下载文件名称，并下载
                this.openDownloadDialog(filedata, "铅封运用完成率详情.xlsx")
            },
            sheet2blob(sheet, sheetName) {
                sheetName = sheetName || 'sheet1';
                var workbook = {
                    SheetNames: [sheetName],
                    Sheets: {}
                };
                workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

                var wopts = {
                    bookType: 'xlsx', // 要生成的文件类型
                    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
                    type: 'binary'
                };
                var wbout = XLSX.write(workbook, wopts);
                var blob = new Blob([s2ab(wbout)], {
                    type: "application/octet-stream"
                }); // 字符串转ArrayBuffer
                function 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) & 0xFF;
                    return buf;
                }
                return blob;
            },
            //设置下载文件名称，并下载
            openDownloadDialog(url, saveName) {
                if (typeof url == 'object' && url instanceof Blob) {
                    url = URL.createObjectURL(url); // 创建blob地址
                }
                var aLink = document.createElement('a');
                aLink.href = url;
                aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
                var event;
                if (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);
            },
            handleSizeChange(val) {
                pageSize = val;
                console.log('每页 ' + val + '条');
                var factory_id = parent.window.factory_id;
                var line_code = parent.window.line_code;
                var date_from = parent.window.date_from;
                var date_to = parent.window.date_to;
                this.searchModData(factory_id, line_code, date_from, date_to, pageSize, currentPage);
            }, handleCurrentChange(val) {
                currentPage = val;
                var factory_id = parent.window.factory_id;
                var line_code = parent.window.line_code;
                var date_from = parent.window.date_from;
                var date_to = parent.window.date_to;
                this.searchModData(factory_id, line_code, date_from, date_to, pageSize, currentPage);
                console.log('当前页: ' + val);
            },
            searchModData(factory_id, line_code, date_from, date_to) {
                parent.axios.post("/api/query/W030Query/action/getW037Data", {
                    aux: {
                        factory_id: factory_id,
                        line_code: line_code,
                        date_from: date_from,
                        date_to: date_to,
                        pageSize: pageSize,
                        currentPage: currentPage
                    }
                }, {
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(response => {
                    var res = response.data.data;
                    this.tableDataList = res.dataList;
                    this.total = res.total;
                });
            }, tableCellClick(row, column, cell, event) {

            }, timeStyle(row, column, rowIndex, columnIndex) {

            }, tableCellClassName({row, column, rowIndex, columnIndex}) {
                // 把每一行的索引放进row
                row.index = rowIndex
                column.index = columnIndex;
            }, objectSpanMethod({row, column, rowIndex, columnIndex}) {

            }, open(row) {

            }
        }, created() {
            var factory_id = parent.window.factory_id;
            var line_code = parent.window.line_code;
            var date_from = parent.window.date_from;
            var date_to = parent.window.date_to;
            this.searchModData(factory_id, line_code, date_from, date_to, pageSize, currentPage);
        },
    });

大部分代码全是从网上扒过来的，都是非是用import关键字引入的。

主要逻辑：

（1）进入页面先渲染table表格

（2）点击导出按钮，执行exportExcel方法

（3）根据id获取table对象，然后设置excel的一些样式，最后导出。