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 デプロイメントと構成に関する詳細なチュートリアル

推薦する

MySQL の簡単な分析 - MVCC

バージョンチェーンInnoDB エンジン テーブルでは、クラスター化インデックス レコードに 2 つ...

jsはシンプルな英語-中国語辞書を実装します

この記事では、参考までに、簡単な英中辞典を実装するためのjsの具体的なコードを紹介します。具体的な内...

RGBA の「a」は何を意味するのでしょうか? CSS RGBA カラー ガイド

RGBAは色の値と透明度を設定できるCSSカラーです以下は、rgba() を使用して白色を 50% ...

マーキー要素は、スクロールするフォントや画像などの効果を実装します。

マーキー要素を使用すると、単純なフォント(画像など)のスライドやその他の効果を実現できます。コードを...

Linux環境で環境変数を設定する方法

JDKダウンロードアドレス: http://www.oracle.com/technetwork/j...

Reactにおける不変値の説明

目次不変の値とは何ですか?不変の値を使用するのはなぜですか? Reactのパフォーマンス最適化は不変...

Dockerコンテナを使用してホストネットワークにアクセスする方法

最近、nginx をリバース プロキシとして使用し、docker で nginx を実行するシステム...

JQueryはアニメーション効果の非表示と表示を実装します

この記事では、アニメーション効果の非表示と表示を実現するためのJQueryの具体的なコードを参考まで...

HTML リンク アンカー タグと SEO におけるその役割の概要

<a> タグは主に、ハイパーリンクまたはアンカー リンクとも呼ばれるリンクとブックマーク...

ブラインドの特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。...

Dockerの匿名マウントと名前付きマウントの具体的な使用法

目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...

Ubuntu 16.04.4LTS に mininet をインストールする際に発生する問題と解決策

ミニネットMininet は軽量のソフトウェア定義ネットワークおよびテスト プラットフォームです。軽...

JS ES の新機能、変数分離割り当て

目次1. 配列の分離割り当て1.1 配列分離割り当てとは何ですか? 1.2 配列分離割り当てに失敗し...

Nginx サーバーで URL リンクを設定する方法

LNMPのようなアーキテクチャを持つウェブサイトは、一般的にPHPフレームワークに基づいて開発されて...

Nginx 構成の場所の一致ルールの例の説明

nginx の設定命令のスコープは、main、server、location の 3 種類に分けられ...