今回は、vueを使用してv-for内のテーブルをエクスポートする手順について詳しく説明します。以下は、vueを使用する際の注意点です。見て。 。
1. 次の依存関係をインストールする必要があります
1 2 | npm install -S file-saver xlsx
npm install -D script-loader
|
ログイン後にコピー
2. プロジェクト内に新しいフォルダーを作成します: (ベンダー --- 名前はオプションです)
2 つのファイル Blob を配置します.js と Export2Excel.js。 E 3: これら 2 つのメソッドを .vue ファイルに記述します: このうち、List はテーブルの内容です
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | export2Excel() {
require .ensure([], () => {
const { export_json_to_excel } = require ( '../../vendor/Export2Excel' );
const tHeader = [ '序号' , 'IMSI' , 'MSISDN' , '证件号码' , '姓名' ];
const filterVal = [ 'ID' , 'imsi' , 'msisdn' , 'address' , 'name' ];
const list = this.tableData;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel' );
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
|
ログイン後にコピー
この記事のメソッドを習得したと思います。さらに刺激的な場合は、他の pHP 中国語ネットワークに注目してください。 。 関連記事!
推奨書籍: JS を使用してドメイン間で POST を実装する方法
ES6 で Promise を使用する手順の詳細な説明
以上がvueを使用してv-forでテーブルをエクスポートする手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。