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 = {とする // 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 つのソリューションがあります。
js-xlsx プラグインには、さまざまなデータ形式の変換を容易にする関連関数が付属しています。
以下は、カプセル化された 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、ファイル名 + '.' + タイプ); } 注意すべき問題がいくつかあります:
その後は、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 フロントエンドの Excel ファイルのエクスポートに関するこの記事はこれで終わりです。Vue の Excel ファイルのエクスポートに関する関連記事については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MYSQL の binlog 最適化に関する考察の要約
>>: Jenkins の docker-compose デプロイメントと構成に関する詳細なチュートリアル
バージョンチェーンInnoDB エンジン テーブルでは、クラスター化インデックス レコードに 2 つ...
この記事では、参考までに、簡単な英中辞典を実装するためのjsの具体的なコードを紹介します。具体的な内...
RGBAは色の値と透明度を設定できるCSSカラーです以下は、rgba() を使用して白色を 50% ...
マーキー要素を使用すると、単純なフォント(画像など)のスライドやその他の効果を実現できます。コードを...
JDKダウンロードアドレス: http://www.oracle.com/technetwork/j...
目次不変の値とは何ですか?不変の値を使用するのはなぜですか? Reactのパフォーマンス最適化は不変...
最近、nginx をリバース プロキシとして使用し、docker で nginx を実行するシステム...
この記事では、アニメーション効果の非表示と表示を実現するためのJQueryの具体的なコードを参考まで...
<a> タグは主に、ハイパーリンクまたはアンカー リンクとも呼ばれるリンクとブックマーク...
この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。...
目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...
ミニネットMininet は軽量のソフトウェア定義ネットワークおよびテスト プラットフォームです。軽...
目次1. 配列の分離割り当て1.1 配列分離割り当てとは何ですか? 1.2 配列分離割り当てに失敗し...
LNMPのようなアーキテクチャを持つウェブサイトは、一般的にPHPフレームワークに基づいて開発されて...
nginx の設定命令のスコープは、main、server、location の 3 種類に分けられ...