VisActor
[feature] 表格导出Excel文件，支持行列折叠点击交互
Version
0.19.1
Link to Minimal Reproduction
如下代码即可
Steps to Reproduce
let tableInstance; fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot2_data.json') .then((res) => res.json()) .then((data) => {
const option = { records:data, "rowTree": [ { "dimensionKey": "Category", "value": "Furniture", hierarchyState: 'expand', "children": [ { "dimensionKey": "Sub-Category", "value": "Bookcases", hierarchyState: 'collapse', }, { "dimensionKey": "Sub-Category", "value": "Chairs", hierarchyState: 'collapse', }, { "dimensionKey": "Sub-Category", "value": "Furnishings" }, { "dimensionKey": "Sub-Category", "value": "Tables" } ] }, { "dimensionKey": "Category", "value": "Office Supplies", "children": [ { "dimensionKey": "Sub-Category", "value": "Appliances" }, { "dimensionKey": "Sub-Category", "value": "Art" }, { "dimensionKey": "Sub-Category", "value": "Binders" }, { "dimensionKey": "Sub-Category", "value": "Envelopes" }, { "dimensionKey": "Sub-Category", "value": "Fasteners" }, { "dimensionKey": "Sub-Category", "value": "Labels" }, { "dimensionKey": "Sub-Category", "value": "Paper" }, { "dimensionKey": "Sub-Category", "value": "Storage" }, { "dimensionKey": "Sub-Category", "value": "Supplies" } ] }, { "dimensionKey": "Category", "value": "Technology", "children": [ { "dimensionKey": "Sub-Category", "value": "Accessories" }, { "dimensionKey": "Sub-Category", "value": "Copiers" }, { "dimensionKey": "Sub-Category", "value": "Machines" }, { "dimensionKey": "Sub-Category", "value": "Phones" } ] } ], "columnTree": [ { "dimensionKey": "Region", "value": "West", "children": [ { "value": "Sales", "indicatorKey": "Sales" }, { "value": "Profit", "indicatorKey": "Profit" } ] }, { "dimensionKey": "Region", "value": "South", "children": [ { "value": "Sales", "indicatorKey": "Sales" }, { "value": "Profit", "indicatorKey": "Profit" } ] }, { "dimensionKey": "Region", "value": "Central", "children": [ { "value": "Sales", "indicatorKey": "Sales" }, { "value": "Profit", "indicatorKey": "Profit" } ] }, { "dimensionKey": "Region", "value": "East", "children": [ { "value": "Sales", "indicatorKey": "Sales" }, { "value": "Profit", "indicatorKey": "Profit" } ] } ], "rows": [ { "dimensionKey": "Category", "title": "Catogery", "width": "auto", }, { "dimensionKey": "Sub-Category", "title": "Sub-Catogery", "width": "auto", }, ], "columns": [ { "dimensionKey": "Region", "title": "Region", "headerStyle": { "textStick": true }, "width": "auto", }, ], "indicators": [ { "indicatorKey": "Sales", "title": "Sales", "width": "auto", "showSort": false, "headerStyle":{ fontWeight: "normal", }, "format":(value)=>{ if(value) return '$'+Number(value).toFixed(2); return ''; }, style:{ padding:[16,28,16,28], color(args){ if(args.dataValue>=0) return 'black'; return 'red' } } }, { "indicatorKey": "Profit", "title": "Profit", "width": "auto", "showSort": false, "headerStyle":{ fontWeight: "normal", }, "format":(value)=>{if(value) return '$'+Number(value).toFixed(2); return '';}, style:{ padding:[16,28,16,28], color(args){ if(args.dataValue>=0) return 'black'; return 'red' } } } ], "corner": { "titleOnDimension": "row", "headerStyle": { "textStick": true } }, rowHierarchyType: 'tree', widthMode:'standard', rowHierarchyIndent: 20, rowExpandLevel:1, dragHeaderMode:'all' }; tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID),option); window['tableInstance'] = tableInstance; bindExport(); }) function bindExport() { 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);
exportCsvButton.addEventListener("click", () => { if (window.tableInstance) { downloadCsv(exportVTableToCsv(window.tableInstance), "export"); } });
exportExcelButton.addEventListener("click", async () => { if (window.tableInstance) { downloadExcel(await exportVTableToExcel(window.tableInstance), "export"); } }); }
Current Behavior
- 在使用exportVTableToExcel方法进行导出表格实例时，可以正常导出Excel文件
- 但是在Excel文件中，行维度表头为图片，不可操作，—— 问题1
- 同时Excel文件中，进行横向滚动条拖动操作，无法正常滚动列维度 —— 问题2
Expected Behavior
- 期望导出Excel文件，对可展开折叠的行维度进行操作
- 滚动条滚动操作正常使用
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
目前VTable的Excel导出功能，是基于exceljs库实现的，导出能力只支持文字或图片，exceljs库不支持的复杂Excel能力，目前VTable是无法支持的。我们目前的工作重点还是在丰富表格的功能上，所以一段时间内，VTable的Excel导出功能还是会依赖exceljs库。滚动的问题试了一下，确实滚动条无法触发滚动，目前只能通过鼠标滚轮或触控板来实现滚动，这个问题可能是由于exceljs库的关于行列冻结的实现限制导致的，我们会继续研究，如果有问题我们会给exceljs库提bug issue，如果有更好的解决方案，我们也会考虑使用。 exceljs库地址：https://github.com/exceljs/exceljs
目前VTable的Excel导出功能，是基于exceljs库实现的，导出能力只支持文字或图片，exceljs库不支持的复杂Excel能力，目前VTable是无法支持的。我们目前的工作重点还是在丰富表格的功能上，所以一段时间内，VTable的Excel导出功能还是会依赖exceljs库。滚动的问题试了一下，确实滚动条无法触发滚动，目前只能通过鼠标滚轮或触控板来实现滚动，这个问题可能是由于exceljs库的关于行列冻结的实现限制导致的，我们会继续研究，如果有问题我们会给exceljs库提bug issue，如果有更好的解决方案，我们也会考虑使用。 exceljs库地址：https://github.com/exceljs/exceljs
了解，感谢！