VUE ---エクセルの輸出JSON方法

データ・テーブル・レンダリング、しばしば遭遇したニーズをやって、それは次のような方法VUEのプロジェクトデータのエクスポートを使用して、Excelをエクスポートすることです。

まず、依存関係をインストール

仰角および-Sファイル- セーバー
高度及び -S XLSX

第二に、srcフォルダのutilsl、新json2excel.js、および依存性の導入に新しいディレクトリを作成します

{}のsaveAsインポートから ' ファイル・セーバー' 
インポートXLSX から ' XLSX / DISTは/ xlsx.full.min ' 

// データ処理フォーマットXLSXのJSON所望の
関数関数datenum（V、date1904）{
     IF（date1904）= V +の1462 
    せエポック = Date.parse（V）
     リターン（エポック- 新しい新しい日付（として、Date.UTC（1899、11、30）））/（24 * 60 * 60 * 1000年）
} 
 
関数data2ws（データ）{ 
    CONST WS = { }
    CONST範囲= {S：{C：10000000、R：10000000 }、E {C：0、R：0 }}
     のための（R =せ0 ; R = data.length; ++！R）{
         ため（LET C = 0 ;！C =データ[R] .LENGTH; ++ C）{
             場合（range.sr> R）range.sr = R
             であれば（range.sc> C）range.sc = C
             であれば（range.er <R）range.er = R
             であれば（range.ec <C）range.ec = C
             CONSTセル= {V：データ[R] [C]}
            もし（cell.v == NULLで）継続
            CONST cell_ref = XLSX.utils.encode_cell（{C：C、R：Rを}）
 
            場合（typeof演算 cell.v === ' 番号'）cell.t = ' N ' 
            さもなければ もし（typeof演算 cell.v === ' ブール'）cell.t = ' B ' 
            そう であれば（日instanceofのcell.v）{ 
                cell.t = ' N ' 
                cell.z = XLSX.SSF._table [ 14 ]
                cell.v = 関数datenum（cell.v）
            } 
            他 cell.tの= ' S ' 
 
            WS [cell_ref] = セル
        } 
    } 
    もし（range.sc < 10000000）WS [ ' ！REF ' ] = XLSX.utils.encode_range（範囲）
     戻りWS 
} 
// 导出Excelの
関数ワークブック（）{
     場合（！（この instanceofはワークブック））を返す 新しいワークブックを（）
     この .SheetNames = []
     この.Sheets = {} 
} 
 
関数s2ab（S）{ 
    CONST BUF = 新しいArrayBuffer（s.length）
     CONSTビュー= 新しいUint8Array（BUF）
     のための（I =せて0 ;！私= s.length; ++ I）ビュー[ I] = s.charCodeAt（I）＆0xFFの
    リターンBUF 
} 
 
/ * 
*番目=>表头
*データ=>数据
* fileNameに=>文件名
*たfileType =>文件类型
* SHEETNAME =>シート页名
* / 
エクスポートデフォルト関数toExcel（{番目、データ、ファイル名、引数fileType、SHEETNAME}）{ 
    data.unshift（TH）
    CONST = WB 新しいですブック（）、WS = data2ws（データ）
    SHEETNAME = SHEETNAME || ' シート1 ' 
    wb.SheetNames.push（SHEETNAME）
    wb.Sheets [SHEETNAME] = WS 
    たfileType =たfileType || ' XLSX ' 
    VAR wbout = XLSX.write（WB、{ブックタイプ：たfileType、bookSST：偽、タイプ：' バイナリ' }）
    fileNameに = fileNameに|| ' 列表' 
    のsaveAs（新たな BLOB（[s2ab（wbout）]、{タイプ：" アプリケーション/オクテットストリーム"  }。）、 `$ {fileNameに} $ {たfileType}`）
}

具体的な使用：

最初の方法：導入アセンブリ

<テンプレート> 
  <divのスタイル= "パディング：40ピクセル;"> 
    <EL-ボタンタイプ= "主"サイズ= "小さな" @クリック= "downExcel">导出EXCEL </ EL-ボタン> 
  </ div> 
</テンプレート> 

<スクリプト> 
からの輸入toExcel '@ / utilsの/ json2excel' 
輸出のデフォルト{ 
  名： "着陸ページ" 、
  データ（）{ 
    リターン{ 
      excelData：[ 
        {名： '张三'、誕生日：新しい日付（ '1990- 01-01 '）、性別： '男'、年齢：28 }、
        {名： '李四'、誕生日：新しい日付（' 1991年1月1日'）、性別：'女',age: 27}
      ]
    };
  },
  搭載（）{}、
  メソッド：{ 
     downExcel（）{ 
      CONST TH = [ '名前'、「生年月日""性別""年齢」] 
      CONST filterVal = [ '名前'、 '誕生日'、 'セックス'、」年齢' ] 
      CONSTデータ = この .excelData.map（V => filterVal.map（K => V [K]））
      CONST [ファイル名、引数fileType、SHEETNAME] = ['試験ダウンロード'' XLSX ''テストページ' ] 
      ToExcel（{TH、データ、ファイル名、引数fileType、SHEETNAME}）
    } 
  } 
};
 </ SCRIPT>

第二：グローバルマウントを使用

グローバルマウントtoExcel法main.jsで1、

'@ /エクセル/ json2excel'からインポートtoExcel 
Vue.prototype。$ toExcel = toExcel

2、toExcelの輸出がアセンブリに秀でるメソッドを呼び出します

<テンプレート> 
  <divのスタイル= "パディング：40ピクセル;"> 
    <EL-ボタンタイプ= "主"サイズ= "小さな" @クリック= "downExcel">导出EXCEL </ EL-ボタン> 
  </ div> 
</テンプレート> 

<スクリプト> 
からの輸入toExcel '@ / utilsの/ json2excel' 
輸出のデフォルト{ 
  名： "着陸ページ" 、
  データ（）{ 
    リターン{ 
      excelData：[ 
        {名： '张三'、誕生日：新しい日付（ '1990- 01-01 '）、性別： '男'、年齢：28 }、
        {名： '李四'、誕生日：新しい日付（' 1991年1月1日'）、性別：'女',age: 27}
      ]
    };
  },
  搭載（）{}、
  メソッド：{ 
     downExcel（）{ 
      CONST TH = [ '名前'、「生年月日""性別""年齢」] 
      CONST filterVal = [ '名前'、 '誕生日'、 'セックス'、」年齢' ] 
      CONSTデータ = この .excelData.map（V => filterVal.map（K => V [K]））
      CONST [ファイル名、引数fileType、SHEETNAME] = ['試験ダウンロード'' XLSX ''テストページ' ]
       この$ ToExcel（{TH、データ、ファイル名、引数fileType、SHEETNAME}）
    } 
  } 
};
 </ SCRIPT>

技術サポート：昆明キティテクノロジー

VUE ---エクセルの輸出JSON方法

おすすめ