前端与数据展现
前后端拆散是以后比拟流行的开发模式，它使我的项目的分工更加明确,后端负责解决、存储数据;前端负责显示数据.前端和后端开发人员通过接口进行数据的替换。因而前端最重要的能力是须要将数据出现给用户后，与终端用户进行交互。
在前端拿到数据后，须要将数据在客户端浏览器端进行绘制，最常见的数据出现形式：
表格类数据出现：通过为用户提供查问面板，用户输出相干搜寻条件后，以二维表的模式出现数据。
图表可视化：表格大都出现明细的数据，尽管列举的数据十分多，但数据不够直观无奈疾速查看数据的汇总剖析，以及散布状况，那么前端数据出现，以可视化的形式展现需要也十分广泛。
高级的数据出现：数据可视化大屏，这种数据出现往往是为决策者提供的，决策者次要关注宏观的数据报告，并且基于数据报告再进一步做明细数据分析。
前端数据导出及痛点
前端进行数据出现后，只解决了用户需要的第一步，数据出现只是解决了数据看得见的问题，但要进一步利用数据能力施展数据的真正价值。因而对于最终用户看到数据后，往往须要二次剖析和存档，所以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/…
发表回复