要素 UI から Excel をエクスポートする方法

今回は、要素 UI から Excel をエクスポートする方法と、要素 UI から Excel をエクスポートするための注意事項について説明します。実際のケースを見てみましょう。

1. 関連する依存関係をインストールします

主に 2 つの依存関係

npm install --save xlsx file-saver

2 つのプラグインの使用方法を詳しく知りたい場合は、github にアクセスしてください。

https://github.com/SheetJS/js-xlsx

https://github.com/eligrey/FileSaver.js

2.

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

をコンポーネントに導入します

3. コンポーネントメソッドにメソッドを書く

exportExcel () {
 /* generate workbook object from table */
 var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
 /* get binary string as output */
 var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
 try {
  FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
 } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
 return wbout
},

注: XLSX.uitls.table_to_book (テーブルの DOM ノードが配置されます)、sheetjs.xlsx はエクスポートされた

table の名前であり、変更できます。

4. [エクスポート] ボタン をクリックして、exportExcel メソッドを実行します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue-dplayer hls 再生を実装する詳細な手順

vue スロットが子コンポーネントに親コンポーネントの配信を表示する方法

以上が要素 UI から Excel をエクスポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。