idea中怎么新建vue项目_vue项目中页面表格数据导出excel功能

在当下比较普遍的后台管理项目中，关于页面数据导出excel这个功能是相当普遍的，那么在vue项目中，如果页面的表格数据得到渲染之后，我们如何实现页面excel表格的导出，步骤如下：

first one:

安装几个依赖，命令如下：

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

first two:

在src 下新建文件夹，我们这里文件夹名字暂定为excel,这里需要放两个js文件，分别是Blob.js 和 export2Excel.js 可以去gitHub自行下载，也可以在以下链接下载。

链接: https://pan.baidu.com/s/12vmY689PRFBRH1wo2u2TdA 提取码: rxuu

first three:

在build/webpack.base.config.js 做如下修改

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'scss_vars': '@/styles/vars.scss',
      'excel': path.resolve(__dirname, '../src/excel'),//主要就是新增这一行就行
    }
  },

first four:

//数据写入excel

由此，vue中一个简单的表格导出功能就完成了