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

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

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

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

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

json_fields = {とする
  // fieldLabel (テーブル ヘッダー名)、attributeName (対応するフィールド名)
  フィールドラベル: 属性名、
  // コールバックを使用してエクスポートされたデータをカスタマイズする anotherFieldLabel: {
    フィールド: anotherAttributeName、
    コールバック: (値) => {
      `フォーマットされた値 ${value}` を返します。
    },
  },
};

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

<ダウンロード-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('読み込みを非表示');
        }
    }
};
</スクリプト>

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

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

/**
 * 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、ファイル名 + '.' + タイプ);
}

'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' // ファイルのエクスポート タイプ });
}