Vue フロントエンドの Excel ファイルのエクスポートの詳細な実装計画

Vue フロントエンドの Excel ファイルのエクスポートの詳細な実装計画

1. 技術の選択

1. vue-json-excelプラグインを使用して実装

利点: シンプルで便利、使いやすく、箱から出してすぐに使用可能。

デメリット: Excel のテーブル スタイル設定をサポートしておらず、サポートされる関数も比較的単純です。

2. sheetJS-xlsx パーサーに基づく xlsx スタイルの実装 (推奨)

利点: 多くの形式をサポートし、Excel のテーブル スタイル設定をサポートし、強力な機能、高い制御性、Excel の読み取りとエクスポートが可能。

デメリット: 使い方が複雑で、開始コストが高く、高度な機能には料金がかかりますが、xlsx スタイルの助けを借りればこの機能を実現できます。

2. 技術的な実装

vue-json-excelプラグインを使用して実装

1. vue-json-excel依存関係をインストールする

npm インストール -S vue-json-excel

2. プラグインをvueインスタンスに登録する

「vue」からVueをインポートします。
「vue-json-excel」からJsonExcelをインポートします。

Vue.component("Excel をダウンロード", JsonExcel);

3. 使用方法

エクスポートイベントをトリガーする必要がある送信パッケージのダウンロードExcelコンポーネント

このコンポーネントでサポートされているプロパティについては、vue-json-excelのgithubドキュメントを参照してください。

<ダウンロード-Excel:data="json_data">
  データをダウンロード
  <img src="download_icon.png" />
</ダウンロード-Excel>

まず、Excel ファイルにエクスポートされた次のデータ コンテンツを処理する必要があります。

  • テーブル ヘッダー名データ json_fields: エクスポートするフィールドを選択し、フィールドにラベルを割り当てることができます。データ型はオブジェクト、キーはラベル、値は JSON フィールドに対応し、データ リストと同じフィールドのデータがエクスポートされます。エクスポートされたデータをカスタマイズする必要がある場合は、コールバック関数を定義できます。
  • テーブル データ json_data: このデータ型は配列であり、エクスポートするデータ コンテンツが格納されます。
json_fields = {とする
  // fieldLabel (テーブル ヘッダー名)、attributeName (対応するフィールド名)
  フィールドラベル: 属性名、
  // コールバックを使用してエクスポートされたデータをカスタマイズする anotherFieldLabel: {
    フィールド: anotherAttributeName、
    コールバック: (値) => {
      `フォーマットされた値 ${value}` を返します。
    },
  },
};

json_data = [ とする
    {
        属性名: 値1、
        別の属性名: 値2
    },
    {
        属性名: 値3、
        別の属性名: 値4
    }
];

データを処理した後、そのデータを download-excel コンポーネントに渡すことができます。このコンポーネントにはスタイルがありません。内部にラップされた要素のスタイルを設定するだけで済みます。

<ダウンロード-Excel
  クラス="btn btn-default"
  :data="json_data"
  :fields="json_fields"
  worksheet="私のワークシート"
  name="ファイル名.xls"
>
  Excel をダウンロードしてください (HTML コードでカスタマイズできます)
</ダウンロード-Excel>

ただし、実際のビジネス シナリオでは、テーブル データをエクスポートすることは通常、テーブル内のすべてのデータをエクスポートすることを意味します。そのため、エクスポート プロセス中に、テーブル内のすべてのデータを取得するために要求インターフェイスを呼び出す必要があります。インターフェイスを呼び出してデータを取得することは、非同期実行プロセスです。このプラグインは、このシナリオに対するソリューションも提供します。

関連事例:

<テンプレート>
    <div id="アプリ">
        <Excelをダウンロード
            クラス = "btn"
            :fetch = "フェッチデータ"
            :fields = "json_fields"
            :before-generate = "ダウンロード開始"
            :before-finish = "ダウンロードを完了">
            Excelをダウンロード
        </ダウンロードエクセル>
    </div>
</テンプレート>

<スクリプト>
「vue-json-excel」からdownloadexcelをインポートします。
'axios' から axios をインポートします。

エクスポートデフォルト{
    名前:「アプリ」、
    コンポーネント:
        Excelをダウンロード、
    },
    データ(){
        戻る {
            json_fields: {
                「完全な名前」: 「名前」,
                「日付」: 「日付」,
            },
        }
    }、 //データ
    方法:{
        非同期フェッチデータ(){
            const レスポンス = axios.get(URL);
            response.data.holidays を返します。
        },
        ダウンロードを開始します(){
            alert('読み込み中を表示');
        },
        ダウンロードを完了します(){
            alert('読み込みを非表示');
        }
    }
};
</スクリプト>

sheetJS-xlsx パーサーに基づく xlsx スタイルの実装 (推奨)

この部分には多くのコンテンツが含まれるため、必要に応じてこの関数は後でカプセル化されます。

ここでは、とりあえず原理については説明せず、パッケージ化された export2Excel の使用方法のみを説明します。

このプラグインは、Excel ファイルのエクスポートだけでなく、ファイルのインポートもサポートしています。また、Excel ファイルのエクスポートでは、JSON データだけでなく、テーブルのエクスポートもサポートしています。

sheetjs-xlsx が提供するツールライブラリの高度な機能は、表のスタイルを変更するなど有料項目であるため、sheetjs-xlsx をベースにした xlsx スタイルのプラグインを選択しました。

互換性:

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

npm インストール -S xlsx
npm インストール -S xlsx スタイル

xlsx スタイルのプラグインを使用するとエラーが報告されます。この問題の正式な解決策は、ルート ディレクトリの vue.config.js 構成ファイルに次のコードを追加することです。

モジュール.エクスポート = {
	Webpack を構成する: {
    	外部: {
      		'./cptable': 'var cptable'
    	}
  	}
}

別の解決策としてはソース コードを変更することですが、これは推奨されないため、ここでは説明しません。

2. 使用方法

Excel ファイルをエクスポートする方法は次のとおりです。ファイルのダウンロード機能を実装するには、次の 2 つのソリューションがあります。

  • a タグのファイルダウンロード機能を使用して、URL.createObjectURL メソッドを使用してダウンロードリンクを生成します (この記事で使用されている方法)
  • ファイルのダウンロード機能は、サードパーティのプラグイン ファイル セーバー プラグインを通じて実現されます。

js-xlsx プラグインには、さまざまなデータ形式の変換を容易にする関連関数が付属しています。

  • aoa_to_sheet は、JS データの配列の配列をワークシートに変換します。
  • json_to_sheet は、JS オブジェクトの配列をワークシートに変換します。
  • table_to_sheet は、DOM TABLE 要素をワークシートに変換します。
  • sheet_add_aoa は、既存のワークシートに JS データの配列の配列を追加します。
  • sheet_add_json は、既存のワークシートに JS オブジェクトの配列を追加します。

以下は、カプセル化された export2Excel 関数の具体的なコードです。作成した export2Excel.js ファイルにコードをコピーするだけです。

/**
 * lwj によって作成
 * @file プラグインパッケージをエクスポート */

'xlsx-style' から styleXLSX として * をインポートします

/**
 * 文字列をArrayBufferに変換する 
 * @method 型変換* @param {String} [s] wordBookコンテンツ* @return {Array} バイナリストリーム配列*/
関数 s2ab(s) {
    buf = null とします。

    if (typeof ArrayBuffer !== 'undefined') {
        buf = 新しいArrayBuffer(s.length);
        view を new Uint8Array(buf) にします。

        (i = 0; i != s.length; ++i とします) {
            ビュー[i] = s.charCodeAt(i) & 0xFF;
        }

        buf を返します。
    }

    buf = 新しい配列(s.length);

    (i = 0 とします; i != s.length; ++i) {

        //バイナリストリームに変換 buf[i] = s.charCodeAt(i) & 0xFF;
    }

    buf を返します。
}

/**
 * オプション 1: URL.createObjectURL を使用してダウンロードする (以下はオプション)
 * 解決策 2: ファイルセーバープラグインを使用してファイルをダウンロードする * @method file download * @param {Object} [obj] コンテンツ Blob オブジェクトをエクスポートする * @param {String} [fileName] ダウンロードするファイル名は生成されたファイル名です * @return {void}
 */ 
関数 saveAs (obj, ファイル名) {
    aLink = document.createElement("a"); とします。

    if (typeof obj == 'object' && obj instanceof Blob) {
        aLink.href = URL.createObjectURL(obj); // BLOB アドレスを作成する}
    
    aLink.download = ファイル名;
    リンクをクリックします。
    setTimeout(関数() {
        URL.revokeObjectURL(obj);
    }, 100);
}

/**
 * @メソッド データ エクスポート Excel
 * @param {Object} [worksheets] ワークシートデータの内容* @param {String} [fileName='ExcelFile'] エクスポートExcelファイル名* @param {String} [type='xlsx'] エクスポートファイルの種類*/
エクスポートデフォルト関数 export2Excel ({
    ワークシート、 
    ファイル名 = 'ExcelFile',
    タイプ = 'xlsx'
} = {}) {

    sheetNames = Object.keys(ワークシート)とします。
    ワークブックを = {
        SheetNames: sheetNames, //保存されたワークシート名 Sheets: worksheets
    };

    // Excelの設定項目 let wopts = {  
        bookType: type, // 生成されるファイルの種類 bookSST: false, // 共有文字列テーブルを生成するかどうか。公式の説明では、生成速度をオンにすると速度は低下しますが、下位バージョンの IOS デバイスとの互換性が向上します。type: 'binary'  
    }

    // ワークブックの書き込みを試みる
    wbout = styleXLSX.write(ワークブック、wopts);
    wbBlob = new Blob([s2ab(wbout)], {
        タイプ: "application/octet-stream"
    });

    saveAs(wbBlob、ファイル名 + '.' + タイプ);
}

注意すべき問題がいくつかあります:

  1. xlsx および xlsx-style のデフォルトのエクスポート関数名は XLSX です。同時にインポートする場合は、関数の上書きの問題を回避するためにエイリアスを設定する必要があります。
  2. xlsx プラグインを使用しない場合は、xlsx スタイルのプラグインを使用することもできます。エクスポートするデータをワークシート形式のオブジェクトに変換するだけです。原則は、エクスポートされたデータをワークシートで指定されたデータ形式に変換することです。詳細については、js-xlsx ドキュメントの説明を参照してください。(自分で実装してみることもできます)

その後は、Excel にエクスポートする必要がある場所でのみ呼び出す必要があります。エクスポート テーブル スタイルに関する要件がある場合は、テーブル スタイルの構成方法を学習できます。具体的な構成方法は、xlsx スタイルのドキュメントで確認できます。

データが json としてエクスポートされる場合は、テーブル ヘッダー名とフィールドをマッピングする必要があります。

関連事例:

'xlsx' から XLSX をインポートします。
'@/assets/utils/export2Excel' から export2Excel をインポートします。

// json 形式 let jsonTable = [{
    "シート1id": 1,
    「ヘッダー 1」: 「データ 11」、
    「ヘッダー2」:「データ12」、
    「ヘッダー3」:「データ13」、
    「ヘッダー4」:「データ14」
}, {
    "シート1id": 2, 
    「ヘッダー1」:「データ21」、
    「ヘッダー2」:「データ22」、
    「ヘッダー3」:「データ23」、
    「ヘッダー4」:「データ24」
}];

// 2次元配列形式 let aoa = [
    ['sheet2id', 'ヘッダー 1', 'ヘッダー 2', 'ヘッダー 3', 'ヘッダー 4'],
    [1, 'データ11', 'データ12', 'データ13', 'データ14'],
    [2、'データ21'、'データ22'、'データ23'、'データ24']
]

関数handleExportExcel() {
    
    // XLSXの組み込みツールライブラリを使用してjsonをシートに変換します
    worksheet1 を XLSX.utils.json_to_sheet(jsonTable) とします。

    // XLSXの組み込みツールライブラリを使用してAOAをシートに変換します
    worksheet2 を XLSX.utils.aoa_to_sheet(aoa) とします。

    // Excelの表スタイルを設定する worksheet1["B1"].s = { 
        フォント: 
            サイズ: 14, 
            太字: 真、 
            色: 
                rgb: "FFFFAA00"
            } 
        }, 
        埋める: { 
            背景色: { 
                インデックス: 64 
            }, 
            fgカラー: { 
                rgb: "FFFF00" 
            } 
        } 
    };

    // セル結合 worksheet1["!merges"] = [{
        s: { c: 1, r: 0 },
        e: { c: 4, r: 0 }
    }];

    エクスポート2Excel({
        ワークシート:
            シート1: ワークシート1、
            シート2: ワークシート2
        }, // Excel データをエクスポートします。キーはワークシート名を表し、値は対応するワークシートのシート データを表します。複数のワークシートのエクスポートをサポートします。fileName: 'My excel', // エクスポート ファイル名 type: 'xlsx' // ファイルのエクスポート タイプ });
}

3. 参考文献

  • vue-json-excel プラグインのドキュメント
  • sheetjs-xlsx ツールライブラリ
  • xlsx 形式のツール ライブラリ

要約する

Vue フロントエンドの Excel ファイルのエクスポートに関するこの記事はこれで終わりです。Vue の Excel ファイルのエクスポートに関する関連記事については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • VueはExcelテーブルをエクスポートする機能を実装します
  • VueプロジェクトでExcelをエクスポートする方法の詳細な説明
  • Vue で Excel テーブルをエクスポートするための実装コード
  • vue.js で Excel テーブルをエクスポートするケース分析
  • Vue を使用して Excel をエクスポートする際の落とし穴と解決策
  • Vue エクスポート Excel 機能の全プロセス記録
  • Vue を Excel にエクスポートする初心者向けの詳細なチュートリアル

<<:  MYSQL の binlog 最適化に関する考察の要約

>>:  Jenkins の docker-compose デプロイメントと構成に関する詳細なチュートリアル

推薦する

CSSテキストシャドウの徐々にぼやける効果の実装

テキストシャドウテキストに影を追加します。テキストとテキスト装飾に複数のシャドウを追加することができ...

MySQL スケジュールバックアップタスクの簡単な分析

導入実稼働環境では、データの損失を回避するために、通常、データベースは定期的にバックアップされます。...

Vueデータ双方向バインディング実装方法

目次1. はじめに2. コードの実装2.1 目的分析2.2 実装プロセス2.2.1 エントリーコード...

MySQL 5.7.9 バージョンの sql_mode=only_full_group_by 問題を解決する

MySQL 5.7.9 バージョンの sql_mode=only_full_group_by の問題...

Vue で wangeditor リッチテキスト編集を使用する際の問題

wangEditor は、JavaScript と CSS に基づいて開発された Web リッチ テ...

WEB2.0の片手ルール

<br />前回のCSSに関する記事は、多くの人にあまり理解されませんでした。そのため、...

docker に php-fpm サービス/拡張機能/構成をインストールする詳細なチュートリアル

macにbrewを使ってphp56をインストールしたところ、 opensslがバージョン1.1だった...

Linux での fuser コマンドの使用法の詳細な説明

説明する: fuser は、現在ディスク上のファイル、マウント ポイント、さらにはネットワーク ポー...

高さ:100% が機能しないのはなぜですか?

高さ:100% が機能しないのはなぜですか?この知識は不人気ではありませんが、使用する際には混乱する...

JS を使用してファイルを操作する (FileReader は --node の fs を読み取ります)

目次JS はファイルを読み取る FileReader書類イベントとメソッド基本的な使い方イベント処理...

ORM モデル フレームワークを使用して MySQL データベースを操作する方法

ORM とは何ですか? ORM は Object Relational Mapping の略で、オブ...

Vue3 を使用して虫眼鏡効果を実現する方法の例

目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. 準備2. 梱包を開始する...

divの適応高さは残りの高さを自動的に埋めます

シナリオ 1: HTML: <div class="outer"> ...

リモートホスト上でスクリプトや命令を実行する Zabbix の詳細な説明

シナリオ要件1. zabbix_server Web インターフェースのスクリプト機能を使用すると、...

JavaScript における継承の 3 つの方法

継承する1. 継承とは何か継承: まず、継承とは関係、つまりクラス間の関係です。JS にはクラスはあ...