vue前端实现导出表格

第一种方法：
首先安装两个依赖
1.npm install -S file-saver xlsx

2.npm install -D script-loader

然后下载两个文件 下载地址http://files.cnblogs.com/files/wangyunhui/vendor.rar

将这两个文件加入项目中，新建一个文件夹，我这里叫vendor

image.png

在项目目录下的build下的 webpack.base/conf.js这个webpack的配置文件中的
resolve的alias中加入：
'vendor':path.resolve(__dirname,'../src/views/account/vendor'), 此处路径写你自己真实的文件路径

vue3.0以上的项目放在 image.png
image.png

vue.config.js

module.exports = {
configureWebpack() {
    return {
      resolve: {
        alias: {
          '@': resolve('src'),
          vendor: path.resolve(
            __dirname,
            'src/views/orderManagement/successOrder/vendor'
          ),
        },
      },
    }
  },
}

路径一定要正确，不然等会儿启动项目会报错
接下来写点击事件 在导出的按钮上绑定个点击事件
首先要去调后台接口获取这些数据，这个事件就不写了。
下面是生成表格的方法，在拿到后台数据后调用此方法即可

methods: {
 
      export2Excel() {
 
        require.ensure([], () => {
 
          const { export_json_to_excel } = require('vendor/Export2Excel');
 
          const tHeader =
 
            ['账单名称', '订单编号', '交易编号','交易类型',
 
              '交易方式','交易金额','交易前金额', '交易后金额'
 
            ];  //创建表头
 
          const filterVal =
 
            ['transactionName', 'orderNum','transactionNum','transactionTypeName',
 
             'payType','payPrice', 'transactionFrontPrice', 'transactionAftertPrice',
 
            ]; //这里是和表头对应的内容的字段，要和后台返回的数据的字段对应上
 
 
 
          const list = this.exportList;  //这是从后台拿到的数据
 
          const data = this.formatJson(filterVal, list);
 
          export_json_to_excel(tHeader, data, '**报表'); //三个参数，表头，经过排序后的数据，表格的名字
 
        })
 
      },
 
      formatJson(filterVal, jsonData) {
 
        return jsonData.map(v => filterVal.map(j => v[j]))
 
      },
}

第二种：
利用 vue-json-excel 插件到处

npm  install vue-json-excel --save

全局引入或者局部引入都可以，下面例子为全局引入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel'，JsonExcel ）

页面使用

/**
 * data:表格数据  fields：表头 name：表格名称
*/
<download-excel  :data="dataList" :fields="json_fields"  worksheet="My Worksheet" name="表格名称">导出明细列表</download-excel>

json_fields: {  //导出Excel表格的表头设置
                '姓名':'name',
                '年龄':'age',
                            '性别':'sex',
}，
dataList:[
{
  name:'张三'，
age:'18',
sex:'男'
}，
{
  name:'张三'，
age:'18',
sex:'男'
}，
{
  name:'张三'，
age:'18',
sex:'男'
}，
]

以上即可实现前端的导出表格功能。数据量过于庞大还是建议后端实现导出。