純粋なフロントエンドの Excel エクスポート、テーブル データのレンダリングが繰り返される
ビジネスニーズ
このページには表 table に複数のデータが含まれており、ページネーションはありません。デマンドは、インターフェイスが呼び出されず、純粋なフロントエンドがエクスポート機能を実現するための Excel ファイルを生成することを望んでいます。
レンダリング
1. 依存関係 (xlsx とファイルセーバー) をインストールします。
npm install --save xlsx file-saver
2. HTMLコードブロック
誰もがはっきりとわかるように、テーブルのヘッダー構造もすべてリリースしました (主に el-table に ID を追加し、見つけやすくしました)
<!-- 主要给导出的表格添加id，方便找到-->
<el-table id="out-table" height="450" :data="tableData">
<el-table-column width="120" prop="zhonglei" fixed></el-table-column>
<el-table-column type="index" label="序号" width="50"></el-table-column>
<el-table-column
v-for="item in columns"
:key="item.prop"
:label="item.label"
:prop="item.prop"
:min-width="item.minWidth"
></el-table-column>
<!-- 这块为多级表头的写法，具体可以查看element ui文档 -->
<el-table-column label="自营网络平台渠道" >
<el-table-column
v-for="item in columns1"
:key="item.prop"
:label="item.label"
:prop="item.prop"
>
</el-table-column>
</el-table-column>
<el-table-column label="第三方网络平台渠道">
<el-table-column
v-for="item in columns1"
:key="item.prop"
:label="item.label"
:prop="item.prop"
>
</el-table-column>
</el-table-column>
</el-table>
3.jsコードブロック
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
exportExcel() {
//找到要导出对应的table表格
var exportTable = XLSX.utils.table_to_book(document.querySelector('#out-table'))
var exportTableOut = XLSX.write(exportTable, {
bookType: 'xlsx', bookSST: true, type: 'array' })
//sheetjs.xlsx为导出表格的标题名称
try {
FileSaver.saveAs(new Blob([exportTableOut], {
type: 'application/octet-stream' }), 'sheetjs.xlsx')
} catch (e) {
if (typeof console !== 'undefined') console.log(e, exportTableOut) }
return exportTableOut
},
4. エクスポートが完了しました（ただし、エクスポートされた Excel テーブルのデータが 2 回表示されることがわかります）。
その理由は、el-table で固定属性を使用すると、テーブルダムが 2 つ作成され、一方を非表示にし、もう一方を表示することでインタラクティブな効果を実現できるからです。el-table 全体をエクスポートすると、2 つの div 内のテーブルがエクスポートされ、データの重複が発生します。
5. 固定テーブルを判定・削除するためのjsロジックを修正
exportExcel() {
//不加判断table表格导出会有两份数据，是因为fixed造成的，所以要筛选去重
// 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
var fix = document.querySelector('.el-table__fixed');
var exportTable;
if (fix) {
exportTable = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix));
document.querySelector('#out-table').appendChild(fix);
} else {
exportTable = XLSX.utils.table_to_book(document.querySelector('#out-table'));
}
var exportTableOut = XLSX.write(exportTable, {
bookType: 'xlsx', bookSST: true, type: 'array' })
//sheetjs.xlsx为导出表格的标题名称
try {
FileSaver.saveAs(new Blob([exportTableOut], {
type: 'application/octet-stream' }), 'sheetjs.xlsx')
} catch (e) {
if (typeof console !== 'undefined') console.log(e, exportTableOut) }
return exportTableOut
},
6. この時点で再度エクスポートすると、記事の冒頭のエフェクト画像が表示され、純粋なフロントエンドの Excel へのエクスポートが完全に実現されます。
制限事項: 現在のページのデータのみをエクスポートでき、ページごとのエクスポートを区別することはできません。したがって、完璧なエクスポートを実現したい場合は、バックグラウンドでインターフェイス呼び出しを行わせます。