vue2.0 + Excelの要素UI ELテーブルデータのエクスポート（適切な多段形、ページング版）

1、依存関係のインストール

NPM --saveのxlsxファイル・セーバーをインストール

図2に示すように、内部のコンポーネントの導入

「ファイル・セーバー」からインポートFileSaver 
「XLSX」からインポートXLSX

図3に示すように、この方法を書き込む組み立て方法

   exportExcel（）{
          / * テーブルからブックオブジェクトを生成する* / 
         VAR WB = XLSX.utils.table_to_book（document.querySelector（ ' #outTable ' ））
          / * 出力としてバイナリ文字列を取得* / 
         VAR wbout = XLSX.write（WB、 {ブックタイプ： 'XLSX'、bookSST：真、タイプ： 'アレイ' }）
          してみてください{ 
             FileSaver.saveAs（新たな BLOB（[wbout]、{タイプ： 'アプリケーション/オクテットストリーム'}）、 ' sheetjs.xlsx ' ）
         } キャッチ（電子）{ 場合（typeof演算コンソール！== '未定義'）にconsole.log（E、wbout）}
          戻りwbout 
     }

注意：XLSX.uitls.table_to_bookを（DOMノードのテーブルに）、sheetjs.xlsxはエクスポート名テーブルを変更することができます！

表4.コード

<EL-テーブル    ID =「outTable」：データ= "jqData"スタイル= "幅：100％"最大高さ= "700"ショー概要> 
</ EL-テーブル>

5.イベントを追加するには、[エクスポート]ボタンをクリックし、exportExcel（）メソッドを実行します

<EL-ボタンタイプ= "主" @ = "exportExcel（）"をクリックし导出</ EL-ボタン>>を

　　

商品に貼付されたコード、使用するためのプロジェクトで使用しているマルチ・レベル・ヘッダを形成する、同じことが適用されます

父内部コンポーネント

 

 

 

 表3コンポーネントサブアセンブリ（多段ヘッダ形式）