Vue エクスポート Excel 機能の全プロセス記録

正式に「エクスポート」ボタンをクリックすると、ベンダーフォルダのExport2Excelモジュールが読み込まれます。import('@/vendor/Export2Excel').then(excel => {
  // Excel はインポートされたモジュール オブジェクトを表します // import メソッドは実行後に promise オブジェクトを返します。
                                 // then メソッドでは、使用されるモジュール オブジェクトを取得できます console.log(excel)
  excel.export_json_to_excel({
    ヘッダー: ['name', 'salary'], // ヘッダーに必要なデータ: [
      ['Liu Bei', 100], //データの構成部分に注目すると、厳密な2次元配列が必要であることがわかります ['Guan Yu', 500]
    ], // 必要な特定のデータ filename: 'excel-list', // ファイル名 autoWidth: true, // 幅が適応的かどうか bookType: 'xlsx' // 生成されるファイルの種類 })
})

定数マップ = {
        'id': '番号',
        'パスワード': 'パスワード',
        'mobile': '携帯電話番号',
        'ユーザー名': '名前',
        'timeOfEntry': '求人エントリー日',
        'formOfEmployment': '雇用形態',
        'correctionTime': '訂正日',
        'workNumber': '作業番号',
        'departmentName': '部門',
        'staffPhoto': 'アバターアドレス'
      }

ヘッダー = ['id', 'mobile', 'username',……]

定数 1 = リスト[0]
      もし(!1) {
        { ヘッダー、データ } を返す
      }

ヘッダー = Object.keys(one).map(キー => {
        マップ[キー]を返す
      })

// データはリスト内の各オブジェクトを対応する値の配列に変換します // hireTypEnmu:{1:'formal', '2':'informal' }
      データ = list.map(obj => {
        // Obj['formOfEmployment']: 1, 2 ---> 'formal'、'informal'
        const key = obj['formOfEmployment'] // 1, 2
        obj['formOfEmployment'] = hireTypEnmu[キー]
 
        Object.values(obj) を返します。
      })

{ ヘッダー、データ } を返す

hエクスポート() {
      import('@/vendor/Export2Excel').then(非同期Excel => {
        // データを取得するために Ajax リクエストを送信します const res = await getEmployee(this.page, this.size)
        定数リスト = res.data.rows
        console.log('バックエンドから取得したデータ', リスト)
 
        const { ヘッダー、データ } = this.formatData(リスト)
        // Excel はインポートされたモジュール オブジェクトを表します console.log(header, data)
        excel.export_json_to_excel({
          // ヘッダー: ['name', 'salary'], // ヘッダーは必須 ヘッダー: header, // ヘッダーは必須 データ: data,
          filename: 'excel-list', // ファイル名 autoWidth: true, // 幅が適応的かどうか bookType: 'xlsx' // 生成されたファイルの種類 })
      })
    },

# git clone https://github.com/panjiachen/vue-element-admin.git # github からコードをプルします$ git clone https://gitee.com/mirrors/vue-element-admin.git # コードクラウドからプルします$ cd vue-element-admin # 特定のディレクトリに切り替えます$ npm install # すべての依存関係をインストールします$ npm run dev # 開発およびデバッグモードを開始します。起動コマンドを確認するには、package.json ファイル内のスクリプトを確認してください。