ElementuiはデータをxlsxとExcelテーブルにエクスポートします

最近、Vue プロジェクトについて知り、ElementUI でデータを xlsx および Excel テーブルにエクスポートする方法を見つけました。今日はこれを紹介し、簡単にクエリできるようにメモを残しておきます。

生徒が理解しやすいように、すべての要素を 1 ページに書きました。

1. 最初のステップはプラグインをインストールすることです

npm インストール ファイルセーバー
npm インストール xlsx

2. 2番目のステップは、main.jsでグローバルを設定することです。

// Vue で Excel テーブル テンプレートをエクスポートします。import FileSaver from 'file-saver'
'xlsx' から XLSX をインポート
 
Vue.prototype.$FileSaver = FileSaver; //グローバルに設定 Vue.prototype.$XLSX = XLSX; //グローバルに設定

3. 3番目のステップは、

<テンプレート>
  <div class="daochu">
      <el-button @click="o" type="success" round>エクスポート</el-button>
      <el-テーブル
    id="ou"
    :data="テーブルデータ"
    スタイル="幅: 100%"
    :default-sort="{ プロパティ: '日付'、順序: '降順' }"
     >
    <el-table-column prop="date" label="日付" ソート可能な幅="180">
    </el-table-column>
    <el-table-column prop="name" label="名前" sortable width="180">
    </el-table-column>
    <el-table-column prop="address" label="住所" :formatter="フォーマッタ">
    </el-table-column>
  </el-table>
 
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      テーブルデータ: [
        {
          日付: "2016-05-02",
          名前: 「王小湖」、
          住所:「上海市普陀区金沙江路1518号」
        },
        {
          日付: "2016-05-04",
          名前: 「王小湖」、
          住所:「上海市普陀区金沙江路1517号」
        }
      ]、
    };
  },
  方法:{
    o() {
      テーブルを document.getElementById("ou"); にします。
      table_book を this.$XLSX.utils.table_to_book(tables) とします。
      var table_write = this.$XLSX.write(table_book, {
        書籍タイプ: "xlsx",
        bookSST: 本当です、
        タイプ: "配列",
      });
      試す {
        this.$FileSaver.saveAs(
          新しいBlob([table_write], { タイプ: "application/octet-stream" }),
          「シートjs.xlsx」
        );
      } キャッチ (e) {
        if (typeof console !== "undefined") console.log(e, table_write);
      }
      table_write を返します。
    },
  }
}
</スクリプト>

エクスポートされたことがわかります

実際の作業では、エクスポートボタンを分離して再利用できるようにする方が合理的です。

これで、elementui による xlsx および excel テーブルへのデータのエクスポートに関するこの記事は終了です。elementui による xlsx および excel テーブルへのデータのエクスポートに関する関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: