Vue前端导出表格到Excel的实现

1.安装依赖

npm install -S file-saver xlsx
npm install -D script-loader

2.下载两个文件

Blob.js和 Export2Excel.js 。
新建src/vendor目录，将这两个文件放进去。

3.修改配置文件

在build/webpack.base.conf.js中resolve的alias中加入一行：
'vendor': path.resolve(__dirname, '../src/vendor'),

4.使用

<button @click="handleDownload">导出</button>

methods:{
    handleDownload() {
        require.ensure([], () => {
            const {
                export_json_to_excel
            } = require('vendor/Export2Excel');
            const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间'];
            const filterVal = ['id', 'title', 'author', 'views', 'display_time'];
            const list = [
                {id: 1, title: 2, author: 3, pageviews: 4, display_time: 5},
                {id: 6, title: 7, author: 8, pageviews: 9, display_time: 10},
                {id: 11, title: 12, author: 13, pageviews: 14, display_time: 15},
            ];
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, '列表excel');
        })
    },
    // 参数过滤
    formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
    },
  }