前端如何实现将多页数据合并导出到Excel单Sheet页解决方案|内附代码
Posted 葡萄城技术团队
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端如何实现将多页数据合并导出到Excel单Sheet页解决方案|内附代码相关的知识,希望对你有一定的参考价值。
前端与数据展示
前后端分离是当前比较盛行的开发模式,它使项目的分工更加明确,后端负责处理、存储数据;前端负责显示数据.前端和后端开发人员通过接口进行数据的交换。因此前端最重要的能力是需要将数据呈现给用户后,与终端用户进行交互。
在前端拿到数据后,需要将数据在客户端浏览器端进行绘制,最常见的数据呈现方式:
表格类数据呈现:通过为用户提供查询面板,用户输入相关搜索条件后,以二维表的形式呈现数据。
**图表可视化:**表格大都呈现明细的数据,虽然罗列的数据非常多,但数据不够直观无法快速查看数据的汇总分析,以及分布情况,那么前端数据呈现,以可视化的方式展示需求也非常普遍。
**高级的数据呈现:**数据可视化大屏,这种数据呈现往往是为决策者提供的,决策者主要关注宏观的数据报告,并且基于数据报告再进一步做明细数据分析。
前端数据导出及痛点
前端进行数据呈现后,只解决了用户需求的第一步,数据呈现只是解决了数据看得见的问题,但要进一步利用数据才能发挥数据的真正价值。因此对于最终用户看到数据后,往往需要二次分析和存档,所以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张数据可视化大屏模板,按需取用:
https://www.grapecity.com.cn/solutions/wyn/demo
以上是关于前端如何实现将多页数据合并导出到Excel单Sheet页解决方案|内附代码的主要内容,如果未能解决你的问题,请参考以下文章
js-xlsx和file-saver插件前端html的table导出数据到excel的表格合并显示boder
springboot系列(二十五):如何实现单word模板分多页导出?这你得会|超级详细,建议收藏