雲計算之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

點擊按鈕導出數據成功