前端如何实现将多页数据合并导出到 Excel 单 Sheet 页解决方案|内附代码
GrapeCityChina · 2023-02-10 10:52:00 +08:00 · 781 次点击这是一个创建于 685 天前的主题，其中的信息可能已经有所发展或是发生改变。
前端与数据展示
前后端分离是当前比较盛行的开发模式，它使项目的分工更加明确,后端负责处理、存储数据;前端负责显示数据.前端和后端开发人员通过接口进行数据的交换。因此前端最重要的能力是需要将数据呈现给用户后，与终端用户进行交互。
在前端拿到数据后，需要将数据在客户端浏览器端进行绘制，最常见的数据呈现方式：
表格类数据呈现：通过为用户提供查询面板，用户输入相关搜索条件后，以二维表的形式呈现数据。
图表可视化：表格大都呈现明细的数据，虽然罗列的数据非常多，但数据不够直观无法快速查看数据的汇总分析，以及分布情况，那么前端数据呈现，以可视化的方式展示需求也非常普遍。
高级的数据呈现：数据可视化大屏，这种数据呈现往往是为决策者提供的，决策者主要关注宏观的数据报告，并且基于数据报告再进一步做明细数据分析。
前端数据导出及痛点
前端进行数据呈现后，只解决了用户需求的第一步，数据呈现只是解决了数据看得见的问题，但要进一步利用数据才能发挥数据的真正价值。因此对于最终用户看到数据后，往往需要二次分析和存档，所以 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 合并，然后再返回文件流供前端下载。
后端程序可以部署到服务器上，如果是 windows 服务器，可以直接下载 exe ，在服务器上运行。
下载链接: https://pan.baidu.com/s/191K-txbS-H03ux3JAl-R-g 提取码: f7gk
Linux 服务器的话需要将源码拷贝到服务器去运行，源码如下，也可以根据自己需要进行调整和修改， 大家可以自己来尝试下：
另附 前端 100 张数据可视化大屏模板，按需取用：
目前尚无回复
Select Language