云计算之VUE-Django开发——数据导出到Excel表

项目开发需要用到VUE框架，还要将数据导出到Excel表中，之前使用ExcelGen框架，现在整合到VUE中后无法使用，顾切换以下VUE框架来实现生产需求。

1、安装3个依赖包并导入2个js包：

cnpm install -S file-saver xlsx（这里其实安装了2个依赖）
cnpm install -D script-loader

2、在src目录下新建一个excel文件夹引入Blob.js和expor2Excal.js:

3、在main.js中全局引入： 

import Blob from './excel/Blob.js'
import Export2Excel from './excel/Export2Excel.js'

4、webpack.base.conf.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'),//新增加一行
    }
  },

5、在页面中导出的时候调用outExe：

... ...
methods:{
            outExe:function(env) {
                var y = confirm('此操作将导出excel文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });
                if(y){
                    this.excelData = this.gray_version['deploys']; //你要导出的数据list。
                    this.export2Excel(env)
                }
            },
            export2Excel:function(env) {
                var that = this;
                require.ensure([], () => {
                    const { export_json_to_excel } = require('../../excel/Export2Excel'); //这里必须使用绝对路径
                    const tHeader = ['编号',	'所属中心',	'服务名称',	'当前版本',	'主机组',	'更新时间',	'环境']; // 导出的表头名
                    const filterVal = ['v_id',	'v_gps',	'v_proj',	'v_tag',	'v_hosts',	'v_time',	'v_env']; // 导出的表头字段名
                    const list = that.excelData;
                    const data = that.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, `${env}-服务基线数据`);// 导出的表格名称，根据需要自己命名
                })
            },
            formatJson:function(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },
            ... ...
}
... ...

6、结果验证

# cnpm run dev

 DONE  Compiled successfully in 1041ms   3:16:25 PM
 I  Your application is running here: http://192.168.89.133:81

点击按钮导出数据成功