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

30次阅读

共计 3099 个字符,预计需要花费 8 分钟才能阅读完成。

前端与数据展现

前后端拆散是以后比拟流行的开发模式,它使我的项目的分工更加明确, 后端负责解决、存储数据; 前端负责显示数据. 前端和后端开发人员通过接口进行数据的替换。因而前端最重要的能力是须要将数据出现给用户后,与终端用户进行交互。

在前端拿到数据后,须要将数据在客户端浏览器端进行绘制,最常见的数据出现形式:

表格类数据出现:通过为用户提供查问面板,用户输出相干搜寻条件后,以二维表的模式出现数据。

图表可视化:表格大都出现明细的数据,尽管列举的数据十分多,但数据不够直观无奈疾速查看数据的汇总剖析,以及散布状况,那么前端数据出现,以可视化的形式展现需要也十分广泛。

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

前端数据导出及痛点

前端进行数据出现后,只解决了用户需要的第一步,数据出现只是解决了数据看得见的问题,但要进一步利用数据能力施展数据的真正价值。因而对于最终用户看到数据后,往往须要二次剖析和存档,所以 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…

后端实现形式:

我这边是采纳 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/…

正文完
 0