VueでExcelファイルをエクスポートするにはどうすればよいですか?

今日開発中に遭遇したのは、既存のデータを使用して Excel ファイルをエクスポートする方法です。インターネット上には多くの方法があり、データ フローの使用について話しているものもあります (https://) www .cnblogs.com/yeqrblog/p/9758981.html ですが、今の私の考えは、配列データを使用するだけで、データ フローを使用して実装することではありません。事実はそれが可能であることを証明しています:

1 .依存関係をインストールします

//npm 
npm install -S file-saver xlsx
npm install -D script-loader

2. main.js に Bolb.js と Export2Excel.js

をインポートします。2 つの js ファイル アドレス:

リンク: https://pan.baidu.com/s/1ib2Ox18FngVlhKxs6l8OZQ
抽出コード: sirm

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

3. コンポーネントでの使用

//导出的方法
exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../excel/Export2Excel');
        const tHeader = ['序号', '昵称', '姓名'];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ['index', 'nickName', 'name'];
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.tableData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '列表excel');
      })
    },

    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))

tHeader はテーブル ヘッダー、filterVal のデータはテーブルのフィールド、tableData はテーブルにデータを格納し、型は配列で、オブジェクトはその中に格納されます。テーブルはオブジェクトです。 ＃＃＃＃＃＃それでおしまい。

関連する推奨事項:

2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアル推奨事項: 2020 年最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、

プログラミング教育

をご覧ください。 ！

以上がVueでExcelファイルをエクスポートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。