大家好,今天来为大家解答abp-171这个问题的一些问题点,包括abp框架Excel导出也一样很多人还不知道,因此呢,今天就来为大家分析分析,现在让我们一起来看看吧!如果解决了您的问题,还望您关注下本站哦,谢谢~
目录
abp框架Excel导出——基于vue1.技术栈1.1前端采用vue,官方提供1.2后台是abp——aspnetboilerplate2.Excel导出需求3.升级日志Excel导出4.技术实现方案4.1后台4.1.1EPPlus导出静态方法4.1.2生成升级日志列表4.1.3将升级日志列表放到Excel导出静态方法中去4.1.4abp框架中前后端分离模式文件流传输4.2前端4.2.1vuex的action中添加请求方法4.2.2upgradeLog.vue升级页面4.2.2.1增加下载方法4.2.2.2点击导出报表按钮调用下载方法5.最终效果5.1点击按钮5.2报表展示6.小结1.技术栈1.1前端采用vue,官方提供UI套件用的是iview
1.2后台是abp——aspnetboilerplate即abpv1,https://github.com/aspnetboilerplate/aspnetboilerplate。下载时选择的是netcore3.1。
2.Excel导出需求管理后台系统,主要以图表统计形式归档数据,用户经常会有Excel导出报表的需求。可以以文件形式保存,更加地直观,符合使用习惯。
3.升级日志Excel导出物联网中的设备是核心资产,而维护设备经常需要一些升级割接操作,因此,升级日志(升级失败,升级成功,升级时间)等是用户比较关心的数据。
4.技术实现方案4.1后台4.1.1EPPlus导出静态方法需要nuget安装EPPlus.Core库。运用了委托的方法方便地实现了对导出表单进行添加标题,填充内容数据,渲染单元格样式,委托的一大优势就是方便调用,层次感很明显。该方法如果看得还不是很明白,请耐心继续往下看。
publicabstractclassEPPlusExcelExporterBase:AbpServiceBasen{nprotectedEPPlusExcelExporterBase()n{}npublicstaticbyte[]CreateExcelPackage(stringfileName,Action<ExcelPackage>creator)n{nvarexcelPackage=newExcelPackage();ncreator(excelPackage);nusing(varstream=newMemoryStream())n{nexcelPackage.SaveAs(stream);nexcelPackage.Dispose();nreturnstream.ToArray();n}n}nnpublicstaticvoidAddHeader(ExcelWorksheetsheet,paramsstring[]headerTexts)n{nif(headerTexts.IsNullOrEmpty())n{nreturn;n}nfor(vari=0;i<headerTexts.Length;i++)n{nAddHeader(sheet,i+1,headerTexts[i]);n}n}nnprotectedstaticvoidAddHeader(ExcelWorksheetsheet,intcolumnIndex,stringheaderText)n{nsheet.Cells[1,columnIndex].Value=headerText;nsheet.Cells[1,columnIndex].Style.Font.Bold=true;n}nnpublicstaticvoidAddObjects<T>(ExcelWorksheetsheet,intstartRowIndex,IList<T>items,paramsFunc<T,object>[]propertySelectors)n{nif(items.IsNullOrEmpty()||propertySelectors.IsNullOrEmpty())n{nreturn;n}nnfor(vari=0;i<items.Count;i++)n{nfor(varj=0;j<propertySelectors.Length;j++)n{nsheet.Cells[i+startRowIndex,j+1].Value=propertySelectors[j](items[i]);n}n}n}n}n4.1.2生成升级日志列表
此部分代码与主业务相关,因为原本业务与区域权限有关,简化起见,故删除其他无关代码,主要就是从数据库获取了升级列表,并且按照了升级时间进行了倒序排列。读者不同的业务可进行不同操作。需要转义的转义,联表的联表,过滤的过滤,排序的排序。
vardbQuery=fromupgradeLogin_fsuUpgradeResultRepository.GetAll();nnvarUpgradeLogDtoList=awaitdbQueryn.OrderByDescending(x=>x.Updatetime)n.ToListAsync();nn4.1.3将升级日志列表放到Excel导出静态方法中去
vardata=EPPlusExcelExporterBase.CreateExcelPackage(n"UpgradeLog.xlsx",nexcelPackage=>n{nvarsheet=excelPackage.Workbook.Worksheets.Add("UpgradeLog");nsheet.OutLineApplyStyle=true;nnEPPlusExcelExporterBase.AddHeader(nsheet,n"Fsu资产编码",n"升级结果",n"是否反馈",n"FsuIP地址",n"更新时间"n);nnEPPlusExcelExporterBase.AddObjects(nsheet,2,UpgradeLogDtoList,n_=>_.FsuId,n_=>_.Result,n_=>_.IsReport,n_=>_.FsuIp,n_=>_.Updatetimen);nn//FormattingcellsnvarUpdatetimeColumn=sheet.Column(5);nUpdatetimeColumn.Style.Numberformat.Format="yyyy-mm-dd-hh:mm:ss";nnfor(vari=1;i<=5;i++)n{nsheet.Column(i).AutoFit();n}n});n
委托里面流程分下:添加报表表头,添加内容,设置显示样式(时间格式),添加样式(设置单元格自适应内容大小)。通过CreateExcelPackage方法放回了文件比特流。
4.1.4abp框架中前后端分离模式文件流传输以FileResult形式返回前端传来的请求。需要注意的是FileResult是Microsoft.AspNetCore.Mvc.Core中的一个类。
publicasyncTask<FileResult>GetUpgradeReport()n{nvardbQuery=fromupgradeLogin_fsuUpgradeResultRepository.GetAll();nnvarUpgradeLogDtoList=awaitdbQueryn.OrderByDescending(x=>x.Updatetime)n.ToListAsync();nnforeach(variteminUpgradeLogDtoList)n{nConvertDto(item);//对升级结果,是否上报铁塔平台进行解析n}nnvardata=EPPlusExcelExporterBase.CreateExcelPackage(n"UpgradeLog.xlsx",nexcelPackage=>n{nvarsheet=excelPackage.Workbook.Worksheets.Add("UpgradeLog");nsheet.OutLineApplyStyle=true;nnEPPlusExcelExporterBase.AddHeader(nsheet,n"Fsu资产编码",n"升级结果",n"是否反馈",n"FsuIP地址",n"更新时间"n);nnEPPlusExcelExporterBase.AddObjects(nsheet,2,UpgradeLogDtoList,n_=>_.FsuId,n_=>_.Result,n_=>_.IsReport,n_=>_.FsuIp,n_=>_.Updatetimen);nn//FormattingcellsnvarUpdatetimeColumn=sheet.Column(5);nUpdatetimeColumn.Style.Numberformat.Format="yyyy-mm-dd-hh:mm:ss";nnfor(vari=1;i<=5;i++)n{nsheet.Column(i).AutoFit();n}n});nnvarfileContentResult=newFileContentResult(data,"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")n{nFileDownloadName="升级日志报表.xlsx"n};nnreturnfileContentResult;n}n4.2前端4.2.1vuex的action中添加请求方法
代码如下:
actions={nasyncgetUpgradeLogReport(context:ActionContext<UpgradeLogState,any>){nletdata=awaitAjax.get('/api/services/app/Upgrade/GetUpgradeReport',{nresponseType:'blob',nheaders:{n'Content-Type':'application/json'n}});nreturndata;n}n}nn
告诉后台以blob形式返回。当然请求方法你也可以直接普通形式封装,不一定封装在vuex里,这里封装在vuex的一个好处是有些状态数据可以保存在vuex,所有页面可以共享该数据。
4.2.2upgradeLog.vue升级页面4.2.2.1增加下载方法asyncdownloadUpgradeLogReport(){nawaitthis.$store.dispatch({ntype:"upgradelog/getUpgradeLogReport"n}).then(res=>{nif(res.status=="200"){nvarexcelBlob=newBlob([res.data],{ntype:"application/vnd.ms-excel"n});nvarfileName="升级日志报表.xlsx";nnvaroa=document.createElement("a");noa.href=URL.createObjectURL(excelBlob);noa.download=fileName;ndocument.body.appendChild(oa);noa.click();nn}n});n}n
创建一个blob对象,以创建url方式将此对象下载。
4.2.2.2点击导出报表按钮调用下载方法<Button@click="downloadUpgradeLogReport()">导出升级日志报表</Button>n5.最终效果5.1点击按钮5.2报表展示6.小结笔者下载使用过多个开源方案导出Excel,此种方式方法比较轻量,使用比较简洁;在abp中返回Excel的形式需要思考,因为如果无法继承ControllerBase,就无法使用ActionResult这种万能返回形式(C#中只能继承一个基类,可以继承多个接口);vue中ajax接收Excel返回数据时需要注意设置返回类型为Blob,否则将会下载不成功;这里Excel导出是借鉴了AbpZero8.1的思路,他是类以瞬时模式注入容器,我是写成了静态方法。但是AbpZeroExcel导出的思路大有不同,首先是生成文件在Cache里,然后返回文件GUID(Token),用户再拿着GUID(Token)通过fileController从cache导出需要下载的文件。缓存有效期1分钟,目的是为了防止有人拿到链接攻击,不停下载。
版权声明:本文为博主原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文出处链接和本声明。本文链接:https://www.cnblogs.com/JerryMouseLi/p/13399027.html
原文地址:https://www.cnblogs.com/JerryMouseLi/p/13399027.html
如果你还想了解更多这方面的信息,记得收藏关注本站。
还没有评论,来说两句吧...