ホームページ > 記事 > ウェブフロントエンド > 要素 UI から Excel をエクスポートする方法
今回は、要素 UI から Excel をエクスポートする方法と、要素 UI から Excel をエクスポートするための注意事項について説明します。実際のケースを見てみましょう。
1. 関連する依存関係をインストールします
主に 2 つの依存関係npm install --save xlsx file-saver2 つのプラグインの使用方法を詳しく知りたい場合は、github にアクセスしてください。
https://github.com/SheetJS/js-xlsx
https://github.com/eligrey/FileSaver.js2.
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 サイトの他の関連記事を参照してください。