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

最新推荐文章于 2025-03-24 15:57:32 发布
最新推荐文章于 2025-03-24 15:57:32 发布
阅读量594 收藏 1
点赞数 8
分类专栏： VTable 文章标签： VTable 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44231698/article/details/139983221
版权

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

  1. 表格先显示的全量数据，导出后再恢复当前页。
  2. 新建一个隐藏的表格实例显示全量数据导出这个隐藏的表格实例。
    在这里插入图片描述
    下面是全量代码：
<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.export

let 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>
Windows Shell 编程学习总结
bcbobo21cn的专栏
03-19 8970
Windows Shell 编程 http://blog.csdn.net/chchzh/article/details/2210729 序言：        看过一些对windows 外壳的扩展程序，在使用上一般都是直接利用windows的外壳API做一些工作 ，因为外壳操作需要一些比较专业的知识，因此，大部分编程人员特别是使用集成编程环境的程序人员 对wind
IO_FILE——FSOP、house of orange
「 虚幻私塾」
01-20 417
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 FSOP 是 File Stream Oriented  Programming 的缩写。所有的 _IO_FILE 结构会由 _chain 字段连接形成一个链表，由 _IO_list_all 来维护。而 FSOP 的核心思想就是劫持通过 _IO_list_all 的值
tableExport导出
02-26
Jquery tableExcel.js ，实现导出功能所需要的js 导出的格式可以是：JSON、XML、PNG、CSV、TXT、SQL、MS-Word、Ms-Excel、Ms-Powerpoint、PDF
导出页面数据
weixin_49758946的博客
10-27 668
页面如下; 当我点击”导出当前数据到Excel”时需要将数据导出; 按钮:<buttonclass="layui-btn layui-btn-sm"onclick="exportExcel()">导出当前数据到Excel</button> 当我点击时触发点击事件 //导出考生成绩信息; functionexportExcel() { varAcadeneId = $("#sltAcademe").val()...
虚函数表（vtable）底层原理与内存布局
最新发布
陈子青的博客
03-24 447
虚函数表（vtable）是C++实现运行时多态的核心机制。每个含有虚函数的类都会生成一个vtable，存储虚函数地址，对象通过vptr（虚表指针）访问vtable。单继承时，对象只有一个vptr；多重继承时，对象有多个vptr，分别指向不同基类的vtable；虚继承则引入虚基表（vbptr），解决菱形继承中的基类重复问题。
C/C++编译器中虚表是如何完成的 The virtual table
adermxl的专栏
09-13 3639
<br />To implement virtual functions, C++ uses a special form of late binding known as the virtual table. The virtual table is a lookup table of functions used to resolve function calls in a dynamic/late binding manner. The virtual table sometimes goes by
页面数据导出（非模板）
qq_42457857的博客
06-13 293
无模板直接导出
关于页面信息导出
小小大青春
08-28 573
页面效果就是如下 当我们对其点击订单导出 及信息导出 重点开始 可能逻辑有点麻烦,请注意每一个细节 有些代码无法上传完整,但只是倾诉一个过程和一个思想 Controller 接口一马当先 @RequestMapping(name = "导出订单详情", value = {"/download"}, method = RequestMethod.GET) public void...
VisActor/VTable - 自定义图标
觉醒法师的专栏
03-05 689
在 VTable 中，我们可以使用自定义图标功能来提高表格的可读性和视觉效果。可以通过 icon 和 headerIcon 来分别分别配置表头及 body 显示的单元格图标。配置具体内容为ColumnIconOption类型的对象，也可以通过传递一个自定义函数，动态设置单元格的图标样式。在VTable中更新自定义排序图标，可以使用register.icon() 方法注册新的排序图标。
9 COM组件
史D芬周
01-06 501
ATL是活动(动态)模板库(ActiveX Template Library)的缩写，它是一套C++模版；使COM开发尽可能自动化，这个基本目标决定了ATL只面向COM开发提供支持。编译型语言在编译之前引入类型库(tlb文件)，编译器编译的时候就知道如何编译接口函数的调用了，这种方式我们称为前绑定；而脚本语言是解释执行的，它执行的时候不会知道具体的函数地址，自动化为此诞生了后绑定；自动化组件其实就是实现了IDispatch（自动化）接口的组件；
腾讯MIG实习技术成长日记集
晓风残月xj
08-21 2892
有幸在这样一家国内顶级的互联网公司实习，由于在校期间主要时间都投在ACM上，对于windows编程比较生疏，工作方面职位为PC客户端开发，所以职场导师推荐了基本专业书籍，在完成自己的任务之余，我把时间放在慢慢咀嚼这些经典书籍上。由于相关积累有限，故有些地方怕表达不当，所以以摘抄经典为主。在此说明，由于工作原因，有些技术需要保密，程序代码就不提供了，具体做些什么就不宜多说了。实习很快结束了，在这两个多月里真的很愉快，学到很多在学校学不到的东西，只是马上快开学了，得回学校继续自己的学习生活。由衷的感谢实习期间帮
vtable
hulefei29的专栏
09-23 267
 frome:http://www.learncpp.com/cpp-tutorial/125-the-virtual-table/
vxeTable怎么导出excel文件
qq_34082921的博客
06-12 1694
在 vxe-table 中，columnFilterMethod 方法用于在导出数据时过滤列。方法接收一个参数，这个参数是一个对象，包含了列的信息。如果这个方法返回 true，那么这一列会被导出；如果返回 false，那么这一列会被过滤掉，不会被导出。如果你想过滤掉操作列，你可以在 columnFilterMethod 方法中检查列的 field 或 title 属性，然后根据这个属性的值来决定是否过滤这一列。例如，如果你的操作列的 field 属性是 ‘operation’。
vxe-table导出xlsx，当前数据，全量数据
老黑的博客
12-06 3645
vxe-table导出全量数据，导出xlsx格式数据
Java多态中的关键的技术——Vtable
kxkxyzyz的博客
12-14 1363
Vtable，计算机术语，中文译名虚函数表，简称虚表。每一个有虚函数的类都有这样一个东西。实际上记录了本类中所有虚函数的函数指针，也就是说是个函数指针数组的起始位置。Vtable虚表。比如virtual void TheSecondFun()记录在数组的第二个元素，当一个该类的对象实例调用TheSecondFun时就根据对应关系把第二个函数指针取出来，再去执行该函数，这种行为叫晚绑定，也就是说在运...
Vue--表格导出excel（导出table表格所有数据）
热门推荐
weixin_44791115的博客
09-28 1万+
还是继续前几天那个表格的需求，之前用纯前端做完了分页功能和筛选功能之后，我们再来完善一下一键导出Excel表格功能； 其实iview组件库的table部分也可以调用 exportCsv() 方法，可以将数据导出为 .csv 的表格文件，但是我们日常使用的是Excel .xlsx格式 的表格，因此仍需要用到插件来完成我们的需求。网上相关代码很多，但是目前这个是我见过最好理解方便的处理方式了。 一、 ...
vtable演示
kongkong的专栏
11-20 612
初始数据 AA public class AA { public static final int PAGE = 20; private int num = 10; public void name(){ System.out.println("AA"); } public void add() { } } BB public class BB extends AA{ public void name(){
探索数据的艺术：VTable - 高效多维数据分析表
gitblog_00021的博客
05-18 482
探索数据的艺术：VTable - 高效多维数据分析表 VTableVTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.项目地址:https://gitcode.com/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值