前端和数据展示前后端分离是目前比较流行的开发模式，使得项目分工更加明确，后端负责用于处理，存储数据；前端负责显示数据。前后端开发者通过接口交换数据。因此，前端最重要的能力就是将数据呈现给用户后与终端用户进行交互。在前端拿到数据后，需要在客户端浏览器端绘制数据。最常见的数据呈现方式：表格数据呈现：通过为用户提供查询面板，在用户输入相关搜索条件后，二维表格以表格形式呈现数据。图表可视化：大多数表格都提供了详细的数据。虽然列出的数据很多，但是数据不够直观，无法快速查看数据的汇总分析和分布。因此，前端的数据呈现和可视化展示需求也很普遍。高级数据呈现：数据可视化的大屏，这种数据呈现往往是为决策者提供的，决策者主要关注宏观数据报告，并在数据报告的基础上进一步分析细节数据。前端数据导出和痛点数据呈现后，前端只解决用户需求的第一步。数据呈现只是解决了数据可见性的问题，而数据的真正价值只有通过对数据的进一步利用才能发挥出来。因此，终端用户在看到数据后，往往需要二次分析和归档，所以98%的项目都需要使用纯前端导出，Excel和PDF的导出是最常见的两种格式。在本文中，我们首先分享一下导出Excel的常见痛点：前端无法将多页表格数据导出到Excel中的单个Sheet，即数据导出时有多少页显示，导出Excel时会生成多少Sheet。如果数据量过大，单纯在前端导出Excel，很容易导致客户端浏览器崩溃、内存溢出等性能问题，导致用户体验非常差。解决方案：ActiveReportsJS是一个纯前端报表控件。可以使用ActiveReportsJS解决前端数据展示、分页等问题。在使用ActiveReportsJS报表的时候，经常会有明细列表显示报表的需求。对于这种报表，基本上都会导出到Excel。目前不支持将Excel直接导出为单表，默认导出为多表Excel；针对这个需求，我们验证了一个问题的解决方案，本文将介绍如何实现该方案；实现思路如下：后端实现一个接口，接收Blob类型的Excel流，然后将Excel多个Sheet页面合并为一个Sheet页面，再通过文件流返回给前端。调用后端接口将Blob推流到后端，下载后端返回的流。具体实现步骤：前端两种方法：第一种方法：使用ActiveReportsJSViewer.Export导出Excel，该接口返回的结果包括data属性和download方法，然后调用后端接口传递结果.data到后端。Viewer.export("xlsx",settings,{cancel:cancelCallback}).then((result)=>{letformData=newFormData();formData.append("file",result.data);leturl="http://localhost:8088/ExcelMergerSheet";fetch(url,{method:'POST',mode:'cors',body:formData}).then(function(response){returnresponse.blob();}).then(blob=>{console.log(blob)letdownloadElement=document.createElement('a');lethref=window.URL.createObjectURL(blob);//创建下载链接downloadElement.href=href;down??loadElement.download=reportName+'.XLSX';//下载后的文件名document.body.appendChild(downloadElement);down??loadElement.click();//点击下载document.body.removeChild(downloadElement);//删除后下载元素window.URL.revokeObjectURL(href);//释放blob对象})});具体的Viewer.export可以参考文档：https://demo.grapecity.com.cn/ac...dExportExcel/purejs第二种类型：使用Excel.exportDocument导出Excel不带预览。该接口返回的result中包含data属性和download方法，然后调用后端接口将result.data传给后端。函数runExcel(){varACTIVEREPORTSJS=GC.ActiveReports.Core;varExcel=GC.ActiveReports.XlsxExport;varsettings={sheetName:"test",pageSettings:{size:"A4",orientation:"portrait",},};varpageReport=newACTIVEREPORTSJS.PageReport();pageReport.load("1.rdlx-json").then(function(){returnpageReport.run();}).then(function(pageDocument){returnExcel.exportDocument(pageDocument,settings);}).then(function(result){letformData=newFormData();formData.append("file",result.data);fetch("http://localhost:8088/ExcelMergerSheet",{method:'POST',mode:'cors',body:formData}).then((response)=>{returnresponse.blob()}).then((blob)=>{constlink=document.createElement('a');link.href=URL.createObjectURL(blob);link.setAttribute('download','excel.xlsx')link.click();link.remove();URL.revokeObjectURL(link.href);})});}工具Excel.exportDocument可以参考文档：https://demo.grapecity.com.cn...后端实现方法：我这里用python实现一个接口，接收前端传过来的Blob文件流，然后对多个Sheet页面进行Excel合并，然后返回文件流给前端-结束下载。后台程序可以部署到服务器上，如果是windows服务器，直接下载exe在服务器上运行即可。下载链接：https://pan.baidu.com/s/191K-...提取码：f7gk对于Linux服务器，需要将源码复制到服务器上运行。源码如下，大家也可以根据自己的需要进行调整修改。你可以自己试试：https://gcdn.grapecity.com.cn...附100个前端数据可视化大屏模板，点播即可：https://www.grapecity.com.cn/。..
