VTable导出当前页和导出所有页数据

表格导出的是当前显示的表格，如果是分页表格想导出全部的数据话。有两种方法可以实现

表格先显示的全量数据，导出后再恢复当前页。
新建一个隐藏的表格实例显示全量数据导出这个隐藏的表格实例。

下面是全量代码：

<template><div><div ref="listTableExport" id = "CONTAINER_ID" style="width: 1580px; height: 800px"></div><div id = "CONTAINER_HiDE" style="display : none"></div><div style="width: 1580px; height: 50px" class="right-align"><button id="first-buttom" > 首页</button><button id="prev-buttom" > 上一页</button><span id="page-namber">第1页</span><input id="cpnr" type="hidden"><span>/</span><span id="total-page">共 页</span><input id="mpnr" type="hidden"><button id="next-buttom">下一页</button><button id="tail-buttom" > 尾页</button><span id="total-num">共 条</span><input  id="spn" type="number" ><button id="skip-buttom"> 跳转</button></div></div></template><script setup>import * as VTable from '@visactor/vtable';
// 使用时需要引入插件包@visactor/vtable-export
import {downloadCsv,exportVTableToCsv,downloadExcel,exportVTableToExcel,
} from "@visactor/vtable-export";
// umd引入时导出工具会挂载到VTable.exportlet tableInstance;
let tableInstance_hide;
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_data.json').then(res => res.json()).then(data => {const option = {records: data,rows: [{dimensionKey: 'City',title: 'City',headerStyle: {textStick: true},width: 'auto'}],columns: [{dimensionKey: 'Category',title: 'Category',headerStyle: {textStick: true},width: 'auto'}],indicators: [{indicatorKey: 'Quantity',title: 'Quantity',width: 'auto',showSort: false,headerStyle: {fontWeight: 'normal'},style: {padding: [16, 28, 16, 28],color(args) {if (args.dataValue >= 0) return '#000000';return 'red';}}},{indicatorKey: 'Sales',title: 'Sales',width: 'auto',showSort: false,headerStyle: {fontWeight: 'normal'},format: rec => {return '$' + Number(rec).toFixed(2);},style: {padding: [16, 28, 16, 28],color(args) {if (args.dataValue >= 0) return '#000000';return 'red';}}},{indicatorKey: 'Profit',title: 'Profit',width: 'auto',showSort: false,headerStyle: {fontWeight: 'normal'},format: rec => {return '$' + Number(rec).toFixed(2);},style: {padding: [16, 28, 16, 28],color(args) {if (args.dataValue >= 0) return '#000000';return 'red';}}}],corner: {titleOnDimension: 'row',headerStyle: {textStick: true}},dataConfig: {sortRules: [{sortField: 'Category',sortBy: ['Office Supplies', 'Technology', 'Furniture']}]},widthMode: 'standard',pagination:{perPageCount:10,currentPage:0,},};tableInstance = new VTable.PivotTable(document.getElementById("CONTAINER_ID"), option);const option_hide = {records: data,rows: [{dimensionKey: 'City',title: 'City',}],columns: [{dimensionKey: 'Category',title: 'Category',}],indicators: [{indicatorKey: 'Quantity',title: 'Quantity',},{indicatorKey: 'Sales',title: 'Sales',},{indicatorKey: 'Profit',title: 'Profit',}],dataConfig: {sortRules: [{sortField: 'Category',sortBy: ['Office Supplies', 'Technology', 'Furniture']}]},};  tableInstance_hide = new VTable.PivotTable(document.getElementById("CONTAINER_HiDE"), option_hide);//分页相关代码let pageNumber = 0;// const totalNum = option.records.length;const totalNum = option.pagination.totalCount;const pageSize =option.pagination.perPageCount;const pageNumberSpan = document.getElementById("page-namber");const totalPageSpan = document.getElementById("total-page");const totalNumSpan = document.getElementById("total-num");const totalPg = Math.ceil(totalNum/pageSize);//总页数totalPageSpan.innerHTML='共'+totalPg+'页';totalNumSpan.innerHTML='共'+totalNum+'条';document.getElementById("prev-buttom").addEventListener("click", () => {if (pageNumber === 0) {return;}pageNumber--;tableInstance.updatePagination({currentPage: pageNumber});pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';});document.getElementById("first-buttom").addEventListener("click", () => {pageNumber=1;pageNumber--;tableInstance.updatePagination({currentPage: pageNumber});pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';document.getElementById("spn").value ='';});document.getElementById("tail-buttom").addEventListener("click", () => {pageNumber=totalPg-1;tableInstance.updatePagination({currentPage: pageNumber});pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';document.getElementById("spn").value ='';});document.getElementById("next-buttom").addEventListener("click", () => {if (pageNumber === (totalPg-1)) {return;}pageNumber++;tableInstance.updatePagination({currentPage: pageNumber});pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';});document.getElementById("skip-buttom").addEventListener("click", () => {let specificPageNum = document.getElementById("spn").value;//要跳转的页if (specificPageNum > totalPg) {pageNumber=totalPg-1;document.getElementById("spn").value=totalPg;}else{pageNumber = specificPageNum-1}if (specificPageNum <= 0) {pageNumber=0;document.getElementById("spn").value =1;}tableInstance.updatePagination({currentPage: pageNumber});pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';});window['tableInstance'] = tableInstance;window['tableInstance_hide'] = tableInstance_hide;bindExport(totalNum,pageNumber);});function bindExport(totalNum,pageNumber) {let exportContainer = document.getElementById('export-buttom');if (exportContainer) {exportContainer.parentElement.removeChild(exportContainer);}exportContainer = document.createElement('div');exportContainer.id = 'export-buttom';exportContainer.style.position = 'absolute';exportContainer.style.bottom = '0';exportContainer.style.right = '0';window['tableInstance'].getContainer().appendChild(exportContainer);const exportCsvButton = document.createElement('button');exportCsvButton.innerHTML = '全量CSV-export';const exportExcelButton = document.createElement('button');exportExcelButton.innerHTML = '全量Excel-export';exportContainer.appendChild(exportCsvButton);exportContainer.appendChild(exportExcelButton);const exportCsvButton_currentPage = document.createElement('button');exportCsvButton_currentPage.innerHTML = '当页CSV-export';const exportExcelButton_currentPage = document.createElement('button');exportExcelButton_currentPage.innerHTML = '当页Excel-export';exportContainer.appendChild(exportCsvButton_currentPage);exportContainer.appendChild(exportExcelButton_currentPage);const exportCsvButton_hide = document.createElement('button');exportCsvButton_hide.innerHTML = '隐藏全量CSV-export';const exportExcelButton_hide = document.createElement('button');exportExcelButton_hide.innerHTML = '隐藏全量Excel-export';exportContainer.appendChild(exportCsvButton_hide);exportContainer.appendChild(exportExcelButton_hide);exportCsvButton.addEventListener('click', () => {window.tableInstance.updatePagination({perPageCount:totalNum,currentPage: pageNumber});if (window.tableInstance) {downloadCsv(exportVTableToCsv(window.tableInstance), 'export');}window.tableInstance.updatePagination({perPageCount:10,currentPage: pageNumber});});exportExcelButton.addEventListener('click', async () => {window.tableInstance.updatePagination({perPageCount:totalNum,currentPage: 0});if (window.tableInstance) {downloadExcel(await exportVTableToExcel(window.tableInstance, {formatExportOutput: ({ cellType, cellValue, table, col, row }) => {          }
} ), 'export');}window.tableInstance.updatePagination({perPageCount:10,currentPage: pageNumber});});exportCsvButton_currentPage.addEventListener('click', () => {if (window.tableInstance) {downloadCsv(exportVTableToCsv(window.tableInstance), 'export');}});exportExcelButton_currentPage.addEventListener('click', async () => {if (window.tableInstance) {downloadExcel(await exportVTableToExcel(window.tableInstance, {formatExportOutput: ({ cellType, cellValue, table, col, row }) => {           }
} ), 'export');}});exportCsvButton_hide.addEventListener('click', () => {if (window.tableInstance_hide) {downloadCsv(exportVTableToCsv(window.tableInstance_hide), 'export');}});exportExcelButton_hide.addEventListener('click', async () => {if (window.tableInstance_hide) {downloadExcel(await exportVTableToExcel(window.tableInstance_hide, {formatExportOutput: ({ cellType, cellValue, table, col, row }) => {         }
} ), 'export');}});
}
</script>