利用vue将表格数据导出为Excel表格

vue如何将表格数据直接导出呢？多的不用详说了，直接贴步骤看：

1、依赖包安装

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

-S === --save     -D === --save-dev

##注意：当出现安装报错  则可以换成cnpm进行安装

2、下载两个文件Blob.js和 Export2Excel.js 目录可以这样创建src/vendor，将这个两个文件放在这里面。
上面两个js文件下载地址：https://github.com/7metamorphosis/study/tree/vendor

3、webpack的配置文件需要做一些额外设置。

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

##注意：配置完成后 直接运行npm run dev  则会出现报错  此时需要将依赖包node_modules直接删除 重新用cnpm install 进行安装。 最后再运行npm run dev 即可

4、实现的代码

<template>
    <div>
          <el-button type="primary" @click="handleDownload">下载</el-button>
    </div>
</template>

<script>
  export default {
      name:'order',
      data() {
          return {
              name: '',
              todoList: []
              }
           },
      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]))

        }

      }

  }

</script>

<style scoped>

</style>