vue-element-admin プロジェクトのインポートとエクスポートの実装

npm と xlsx

'./CommonTools' から CommonTools をインポートします
'./UploadExcel' から UploadExcel をインポートします。
エクスポートデフォルト{
  インストール(Vue) {
    Vue.component('CommonTools', CommonTools) // ツールバー コンポーネントを登録します Vue.component('UploadExcel', UploadExcel) // Excel インポート コンポーネントを登録します }
}

<テンプレート>
  <div class="アップロード-エクセル">
    <div class="btn-upload">
      <el-button :loading="読み込み中" size="mini" type="primary" @click="handleUpload">
        クリックしてアップロード</el-button>
    </div>

    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      <i class="el-icon-upload" />
      <span>ファイルをここにドラッグ</span>
    </div>
  </div>
</テンプレート>

<スクリプト>
'xlsx' から XLSX をインポート

エクスポートデフォルト{
  小道具: {
    beforeUpload: 関数、// eslint-disable-line
    onSuccess: 関数 // eslint-disable-line
  },
  データ（） {
    戻る {
      読み込み中: false、
      エクセルデータ: {
        ヘッダー: null、
        結果: null
      }
    }
  },
  メソッド: {
    generateData({ ヘッダー、結果 }) {
      this.excelData.header = ヘッダー
      this.excelData.results = 結果
      this.onSuccess && this.onSuccess(this.excelData)
    },
    ハンドルドロップ(e) {
      e.stopPropagation()
      e.preventDefault()
      if (this.loading) 戻り値
      定数ファイル = e.dataTransfer.files
      ファイルの長さが 1 の場合
        this.$message.error('アップロードできるのは 1 つのファイルのみです!')
        戻る
      }
      const rawFile = files[0] // files[0]のみ使用

      if (!this.isExcel(rawFile)) {
        this.$message.error('.xlsx、.xls、.csv 拡張子のファイルのアップロードのみサポートされます')
        偽を返す
      }
      this.upload(rawFile)
      e.stopPropagation()
      e.preventDefault()
    },
    handleDragover(e) {
      e.stopPropagation()
      e.preventDefault()
      e.dataTransfer.dropEffect = 'コピー'
    },
    アップロード処理() {
      this.$refs['excel-upload-input'].click()
    },
    ハンドルクリック(e) {
      定数ファイル = e.target.files
      const rawFile = files[0] // files[0]のみ使用
      if (!rawFile) 戻り値
      this.upload(rawFile)
    },
    アップロード(rawFile) {
      this.$refs['excel-upload-input'].value = null // 同じ Excel を選択できない問題を修正

      アップロード前に
        this.readerData(rawFile)
        戻る
      }
      定数 before = this.beforeUpload(rawFile)
      （前）の場合{
        this.readerData(rawFile)
      }
    },
    リーダーデータ(rawFile) {
      this.loading = true
      新しい Promise を返します ((resolve, reject) => {
        const リーダー = 新しい FileReader()
        リーダー.onload = e => {
          定数データ = e.target.result
          const ワークブック = XLSX.read(データ、{ 型: '配列' })
          const firstSheetName = ワークブック.SheetNames[0]
          const ワークシート = workbook.Sheets[最初のシート名]
          const ヘッダー = this.getHeaderRow(ワークシート)
          const 結果 = XLSX.utils.sheet_to_json(ワークシート)
          this.generateData({ ヘッダー、結果 })
          this.loading = false
          解決する（）
        }
        リーダー.readAsArrayBuffer(rawFile)
      })
    },
    getHeaderRow(シート) {
      定数ヘッダー = []
      定数範囲 = XLSX.utils.decode_range(シート['!ref'])
      Cを
      定数 R = 範囲.sr
      /* 最初の行から開始します */
      for (C = range.sc; C <= range.ec; ++C) { /* 範囲内のすべての列を調べる */
        定数セル = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
        /* 最初の行のセルを検索します */
        let hdr = 'UNKNOWN ' + C // <-- 希望するデフォルト値に置き換えます
        if (セル && cell.t) hdr = XLSX.utils.format_cell(セル)
        ヘッダーをプッシュします(hdr)
      }
      リターンヘッダー
    },
    isExcel(ファイル) {
      /\.(xlsx|xls|csv)$/.test(ファイル名) を返します
    }
  }
}
</スクリプト>

<スタイル スコープ lang="scss">
.アップロード-エクセル{
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
   上マージン: 100px;
   .excelアップロード入力{
       表示: なし;
        zインデックス: -9999;
     }
   .btn-upload、.drop{
      境界線: 1px 破線 #bbb;
      幅: 350ピクセル;
      高さ: 160px;
      テキスト配置: 中央;
      行の高さ: 160px;
   }
   。落とす{
       行の高さ: 80px;
       色: #bbb;
      私 {
        フォントサイズ: 60px;
        表示: ブロック;
      }
   }
}
</スタイル>

    パス: '/import',
    コンポーネント: レイアウト、
    hidden: true, // 左メニューでは非表示 children: [{
      path: '', // セカンダリルーティングパスがない場合は、セカンダリのデフォルトルーティングコンポーネントを意味します: () => import('@/views/import')
    }]
  },

<テンプレート>
  <!-- パブリックインポートコンポーネント --> 
  <upload-excel :on-success="成功" />
</テンプレート>

エクスポート関数 importUser(data) {
  リクエストを返す({
    url: 'ユーザー/バッチ',
    メソッド: 'post'、
    データ
  })
}

 非同期成功({ ヘッダー、結果 }) {
      // ユーザーをインポートする場合 const userRelations = {
          'ジョブ日付': 'create_time',
          「携帯電話番号」: 「携帯電話」,
          'ユーザー名': 'ユーザー名',
          'パスワード': 'パスワード',
          「メール」: 「メール」,
          「部門」: 「部門」
        }
        定数arr = []
       結果.forEach(item => {
          定数ユーザー情報 = {}
          Object.keys(item).forEach(キー => {
            userInfo[userRelations[キー]] = item[キー]
          })
         arr.push(ユーザー情報) 
        })
        await importUser(arr) //インポートインターフェースを呼び出す this.$router.back()
    }

 データ（） {
    戻る {
      タイプ: this.$route.query.type
    }
  },

formatDate(数値、フォーマット) {
      定数時間 = 新しい日付((数値 - 1) * 24 * 3600000 + 1)
      time.setYear(time.getFullYear() - 70)
      定数年 = time.getFullYear() + ''
      定数月 = time.getMonth() + 1 + ''
      定数日付 = time.getDate() - 1 + ''
      if (format && format.length === 1) {
        年 + 形式 + 月 + 形式 + 日付を返す
      }
      年 + (月 < 10 ? '0' + 月 : 月) + (日 < 10 ? '0' + 日付 : 日) を返します
    }

 非同期成功({ ヘッダー、結果 }) {
      if (this.type === 'ユーザー') {
        定数ユーザーリレーション = {
          'ジョブ日付': 'create_time',
          「携帯電話番号」: 「携帯電話」,
          'ユーザー名': 'ユーザー名',
          'パスワード': 'パスワード',
          「メール」: 「メール」,
          「部門」: 「部門」
        }
        定数arr = []
        // すべての配列を走査する results.forEach(item => {
        // 各データの中国語を英語に変更する必要があります const userInfo = {}
          Object.keys(item).forEach(キー => {
          // キーは対応する英語名を見つけるための現在の中国語名です if (userRelations[key] === 'timeOfEntry' || userRelations[key] === 'correctionTime') {
              userInfo[userRelations[key]] = new Date(this.formatDate(item[key], '/')) // この方法でのみデータベースに保存できます return
            }
            userInfo[userRelations[キー]] = item[キー]
          })
          // 最終的にuserInfoはすべて英語になります arr.push(userInfo)
        })
        importUser(arr) を待機します。
        this.$message.success('インポートに成功しました')
      }
      this.$router.back() // 前のページに戻る},
    formatDate(数値、フォーマット) {
      定数時間 = 新しい日付((数値 - 1) * 24 * 3600000 + 1)
      time.setYear(time.getFullYear() - 70)
      定数年 = time.getFullYear() + ''
      定数月 = time.getMonth() + 1 + ''
      定数日付 = time.getDate() - 1 + ''
      if (format && format.length === 1) {
        年 + 形式 + 月 + 形式 + 日付を返す
      }
      年 + (月 < 10 ? '0' + 月 : 月) + (日 < 10 ? '0' + 日付 : 日) を返します
    }

<el-button type="warning" size="small" @click="$router.push('/import?type=user')">インポート</el-button>

npm インストール xlsx ファイルセーバー -S
npm スクリプトローダーをインストール -S -D

import('@/vendor/Export2Excel').then(excel => {
  excel.export_json_to_excel({
    header: tHeader, //テーブルヘッダーに必須 data, //特定のデータに必須 filename: 'excel-list', //オプション autoWidth: true, //オプション bookType: 'xlsx' //オプション})
})

/* eslint を無効にする */
'file-saver' から { saveAs } をインポートします
'xlsx' から XLSX をインポート

関数generateArray(テーブル) {
  var out = [];
  var 行 = table.querySelectorAll('tr');
  var 範囲 = [];
  (var R = 0; R < 行数.長さ; ++R) の場合 {
    var outRow = [];
    var 行 = 行[R];
    var 列 = row.querySelectorAll('td');
    (var C = 0; C < columns.length; ++C) の場合 {
      var セル = columns[C];
      var colspan = cell.getAttribute('colspan');
      var rowspan = cell.getAttribute('rowspan');
      var セル値 = cell.innerText;
      セル値 !== "" && セル値 == + セル値の場合、セル値 = + セル値;

      //範囲をスキップ
      ranges.forEach(関数 (範囲) {
        R >= range.sr && R <= range.er && outRow.length >= range.sc && outRow.length <= range.ec) の場合 {
          (var i = 0; i <= range.ec - range.sc; ++i) の場合、outRow.push(null);
        }
      });

      //行スパンを処理する
      if (行範囲 || 列範囲) {
        行スパン = 行スパン || 1;
        列範囲 = 列範囲 || 1;
        範囲.push({
          s: {
            r: R,
            c: 出力行の長さ
          },
          e: {
            r: R + 行範囲 - 1、
            c: 出力行の長さ + 列範囲 - 1
          }
        });
      };

      //ハンドル値
      outRow.push(セル値 !== "" ? セル値 : null);

      //Colspan を処理する
      if (colspan)
        (var k = 0; k < colspan - 1; ++k) の場合、outRow.push(null);
    }
    out.push(outRow);
  }
  [out, ranges]を返します。
};

関数 datenum(v, date1904) {
  (date1904) v += 1462 の場合;
  var エポック = Date.parse(v);
  (エポック - 新しい日付(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000) を返します。
}

関数 sheet_from_array_of_arrays(データ, opts) {
  var ws = {};
  var 範囲 = {
    s: {
      c: 10000000,
      r: 10000000
    },
    e: {
      c: 0,
      r: 0
    }
  };
  (var R = 0; R != data.length; ++R) の場合 {
    (var C = 0; C != data[R].length; ++C) {
      range.sr > R の場合、range.sr = R;
      range.sc > C の場合、range.sc = C;
      range.er < R の場合、range.er = R;
      range.ec < C の場合、range.ec = C;
      var セル = {
        v: データ[R][C]
      };
      cell.v == null の場合、続行します。
      var cell_ref = XLSX.utils.encode_cell({
        c: C、
        r: r
      });

      cell.v の type が 'number' の場合、 cell.t は 'n' になります。
      そうでない場合、(typeof cell.v === 'boolean') cell.t = 'b';
      そうでない場合 (cell.v インスタンスの日付) {
        セル.t = 'n';
        セル.z = XLSX.SSF._table[14];
        セル.v = datenum(セル.v);
      } そうでない場合、cell.t = 's';

      ws[cell_ref] = セル;
    }
  }
  range.sc < 10000000の場合、ws['!ref'] = XLSX.utils.encode_range(range);
  ws を返します。
}

関数ワークブック() {
  if (!(このインスタンスの Workbook)) return new Workbook();
  this.SheetNames = [];
  this.Sheets = {};
}

関数 s2ab(s) {
  var buf = 新しいArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  (var i = 0; i != s.length; ++i) の場合、view[i] = s.charCodeAt(i) & 0xFF;
  buf を返します。
}

エクスポート関数 export_table_to_excel(id) {
  var theTable = document.getElementById(id);
  var oo = generateArray(theTable);
  var 範囲 = oo[1];

  /* 元のデータ */
  var データ = oo[0];
  var ws_name = "SheetJS";

  var wb = 新しいワークブック(),
    ws = sheet_from_array_of_arrays(データ);

  /* ワークシートに範囲を追加する */
  // ws['!cols'] = ['apple', 'banan'];
  ws['!merges'] = 範囲;

  /* ワークシートをワークブックに追加 */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {
    書籍タイプ: 'xlsx',
    bookSST: 偽、
    タイプ: 'バイナリ'
  });

  saveAs(新しいBlob([s2ab(wbout)], {
    タイプ: "application/octet-stream"
  })、"test.xlsx")
}

エクスポート関数 export_json_to_excel({
  マルチヘッダー = [],
  ヘッダ、
  データ、
  ファイル名、
  マージ = [],
  自動幅 = true、
  ブックタイプ = 'xlsx'
} = {}) {
  /* 元のデータ */
  ファイル名 = ファイル名 || 'excel-list'
  データ = [...データ]
  data.unshift(ヘッダー);

  (let i = multiHeader.length - 1; i > -1; i--) {
    data.unshift(マルチヘッダー[i])
  }

  var ws_name = "SheetJS";
  var wb = 新しいワークブック(),
    ws = sheet_from_array_of_arrays(データ);

  マージの長さが0より大きい場合
    if (!ws['!merges']) ws['!merges'] = [];
    マージします。各項目を => {
      ws['!merges'].push(XLSX.utils.decode_range(item))
    })
  }

  if (自動幅) {
    /*各ワークシート列の最大幅を設定する*/
    const colWidth = data.map(row => row.map(val => {
      /*まずnull/undefinedかどうかを判断します*/
      （値 == null）の場合{
        戻る {
          'wch': 10
        };
      }
      /*中国語かどうか判断する*/
      そうでない場合 (val.toString().charCodeAt(0) > 255) {
        戻る {
          'wch': val.toString().length * 2
        };
      } それ以外 {
        戻る {
          'wch': val.toString().length
        };
      }
    }))
    /*最初の行を初期値として使用します*/
    結果をcolWidth[0]とします。
    (i = 1 とします; i < colWidth.length; i++) {
      (j = 0; j < colWidth[i].length; j++) の場合 {
        結果[j]['wch'] < 列幅[i][j]['wch']) の場合 {
          結果[j]['wch'] = colWidth[i][j]['wch'];
        }
      }
    }
    ws['!cols'] = 結果;
  }

  /* ワークシートをワークブックに追加 */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {
    書籍タイプ: 書籍タイプ、
    bookSST: 偽、
    タイプ: 'バイナリ'
  });
  saveAs(新しいBlob([s2ab(wbout)], {
    タイプ: "application/octet-stream"
  })、`${filename}.${bookType}`);
}

 定数ヘッダー = {
        'ジョブ日付': 'create_time',
        「携帯電話番号」: 「携帯電話」,
        'ユーザー名': 'ユーザー名',
        '役割': 'role_name',
        「メール」: 「メール」,
        '部門': '部門名'
      }

'@/filters' から { formatDate } をインポートします
// データをエクスポートする exportData() {
      定数ヘッダー = {
        'ジョブ日付': 'create_time',
        「携帯電話番号」: 「携帯電話」,
        'ユーザー名': 'ユーザー名',
        '役割': 'role_name',
        「メール」: 「メール」,
        '部門': '部門名'
      }
      import('@/vendor/Export2Excel').then(非同期Excel => {
        const res = await getUserList({ クエリ: '', ページ番号: 1, ページサイズ: this.page.total })
        // コンソール.log(res)
        const データ = this.formatJson(ヘッダー、res.users)
        コンソール.log(データ)
        excel.export_json_to_excel({
          ヘッダー: Object.keys(headers),
          データ、
          ファイル名: 'ユーザー情報テーブル',
          自動幅: true、
          書籍タイプ: 'xlsx'

        })
      })
    }    
    }

   // このメソッドは配列を2次元配列に変換する役割を担います formatJson(headers, rows) {
      戻り値: rows.map(item => {
        Object.keys(headers).map(key => { を返します。
          if (headers[key] === 'create_time') {
            return formatDate(item[headers[key]]) // formatDate関数は定義されたフィルターです}
          アイテム[ヘッダー[キー]]を返す
        })
      })

'moment' から moment をインポートする
エクスポート関数formatTime(値) {
  moment(値 * 1000).format('YYYY-MM-DD HH:mm:ss') を返します。
}
エクスポート関数formatDate(値) {
  moment(値 * 1000).format('YYYY-MM-DD') を返します
}