前端如何实现将多页数据合并导出到Excel单Sheet页解决方案|内附代码_资讯

前端如何实现将多页数据合并导出到Excel单Sheet页解决方案|内附代码

创始人

2024-05-25 01:28:10

0次

前端与数据展示

前后端分离是当前比较盛行的开发模式，它使项目的分工更加明确,后端负责处理、存储数据;前端负责显示数据.前端和后端开发人员通过接口进行数据的交换。因此前端最重要的能力是需要将数据呈现给用户后，与终端用户进行交互。

在前端拿到数据后，需要将数据在客户端浏览器端进行绘制，最常见的数据呈现方式：

表格类数据呈现：通过为用户提供查询面板，用户输入相关搜索条件后，以二维表的形式呈现数据。

**图表可视化：**表格大都呈现明细的数据，虽然罗列的数据非常多，但数据不够直观无法快速查看数据的汇总分析，以及分布情况，那么前端数据呈现，以可视化的方式展示需求也非常普遍。

**高级的数据呈现：**数据可视化大屏，这种数据呈现往往是为决策者提供的，决策者主要关注宏观的数据报告，并且基于数据报告再进一步做明细数据分析。

前端数据导出及痛点

前端进行数据呈现后，只解决了用户需求的第一步，数据呈现只是解决了数据看得见的问题，但要进一步利用数据才能发挥数据的真正价值。因此对于最终用户看到数据后，往往需要二次分析和存档，所以98%的项目都需要用到纯前端的导出，而导出Excel 和PDF 又是最为普遍的两种格式，这篇文章我们先来分享导出Excel 常见的痛点问题：

无法在前端将多页的表格数据导出到Excel 中的单 Sheet，即数据在展示时有多少页，那么在导出到Excel就会产出多少个Sheet表单。

如果数据量过大，在前端纯导出Excel会容易导致客户端浏览器崩溃，内存溢出等性能问题，导致用户体验非常不好。

解决方法：

ActiveReportsJS 是纯前端的报表控件，可以用ActiveReportsJS 来解决前端的数据呈现，分页等问题，在使用ActiveReportsJS报表时，常常有明细清单展示类报表的需求，对于这种报表基本都会有导出Excel的需要，目前不支持直接导出成一个Sheet页的Excel，默认导出的是多Sheet页Excel；针对这种需求，我们验证一个解决改问题的方案，本贴就来介绍该方案如何实现；

实现思路如下：
后端实现一个接口，接收Blob类型Excel流，然后将Excel多Sheet页合并成一个Sheet页，然后通过文件流返回给前端
前端利用ACTIVEREPORTSJS自带的导出Excel，导出Blob类型，然后通过POST请求调用后端接口将Blob流传给后端，下载后端返回的流

具体实现步骤：

前端两种方式：
第一种：
利用ActiveReportsJS的Viewer.Export导出Excel，该接口返回的result包含data属性和download方法，然后调用后端接口，将result.data传递给后端。

Viewer.export("xlsx", settings, { cancel: cancelCallback }).then((result) => {let formData = new FormData();formData.append("file", result.data);let url = "http://localhost:8088/ExcelMergerSheet";fetch(url, {method: 'POST',mode: 'cors',body: formData}).then(function (response) {return response.blob();}).then(blob => {console.log(blob)let downloadElement = document.createElement('a');let href = window.URL.createObjectURL(blob); //创建下载的链接downloadElement.href = href;downloadElement.download = reportName + '.XLSX'; //下载后文件名document.body.appendChild(downloadElement);downloadElement.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传递给后端。

function runExcel() {var ACTIVEREPORTSJS = GC.ActiveReports.Core;var Excel = GC.ActiveReports.XlsxExport;var settings = {sheetName: "test",pageSettings: {size: "A4",orientation: "portrait",},};var pageReport = new ACTIVEREPORTSJS.PageReport();pageReport.load("1.rdlx-json").then(function () {return pageReport.run();}).then(function (pageDocument) {return Excel.exportDocument(pageDocument, settings);}).then(function (result) {let formData = new FormData();formData.append("file", result.data);fetch("http://localhost:8088/ExcelMergerSheet", {method: 'POST',mode: 'cors',body: formData}).then((response) => {return response.blob()}).then((blob) => {const link = 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/activereportsjs/demos/api/export/purejs

后端实现方式：

我这边是采用python实现了一个接口，接收前端传递的Blob文件流，然后进行多Sheet页的Excel合并，然后再返回文件流供前端下载。