abp框架Excel导出——基于vue
abp框架Excel导出——基于vue
1.技术栈
1.1 前端采用vue,官方提供
UI套件用的是iview
1.2 后台是abp——aspnetboilerplate
即abp v1,https://github.com/aspnetboilerplate/aspnetboilerplate。下载时选择的是net core 3.1。
2. Excel导出需求
管理后台系统,主要以图表统计形式归档数据,用户经常会有Excel导出报表的需求。可以以文件形式保存,更加地直观,符合使用习惯。
3. 升级日志Excel导出
物联网中的设备是核心资产,而维护设备经常需要一些升级割接操作,因此,升级日志(升级失败,升级成功,升级时间)等是用户比较关心的数据。
4. 技术实现方案
4.1 后台
4.1.1 EPPlus导出静态方法
需要nuget安装EPPlus.Core库。运用了委托的方法方便地实现了对导出表单进行添加标题,填充内容数据,渲染单元格样式,委托的一大优势就是方便调用,层次感很明显。该方法如果看得还不是很明白,请耐心继续往下看。
public abstract class EPPlusExcelExporterBase : AbpServiceBase, ITransientDependency
{
protected EPPlusExcelExporterBase( )
{}
public static byte[] CreateExcelPackage(string fileName, Action<ExcelPackage> creator)
{
var excelPackage = new ExcelPackage();
creator(excelPackage);
using (var stream = new MemoryStream())
{
excelPackage.SaveAs(stream);
excelPackage.Dispose();
return stream.ToArray();
}
}
public static void AddHeader(ExcelWorksheet sheet, params string[] headerTexts)
{
if (headerTexts.IsNullOrEmpty())
{
return;
}
for (var i = 0; i < headerTexts.Length; i++)
{
AddHeader(sheet, i + 1, headerTexts[i]);
}
}
protected static void AddHeader(ExcelWorksheet sheet, int columnIndex, string headerText)
{
sheet.Cells[1, columnIndex].Value = headerText;
sheet.Cells[1, columnIndex].Style.Font.Bold = true;
}
public static void AddObjects<T>(ExcelWorksheet sheet, int startRowIndex, IList<T> items, params Func<T, object>[] propertySelectors)
{
if (items.IsNullOrEmpty() || propertySelectors.IsNullOrEmpty())
{
return;
}
for (var i = 0; i < items.Count; i++)
{
for (var j = 0; j < propertySelectors.Length; j++)
{
sheet.Cells[i + startRowIndex, j + 1].Value = propertySelectors[j](items[i]);
}
}
}
}
4.1.2 生成升级日志列表
此部分代码与主业务相关,因为原本业务与区域权限有关,简化起见,故删除其他无关代码,主要就是从数据库获取了升级列表,并且按照了升级时间进行了倒序排列。读者不同的业务可进行不同操作。需要转义的转义,联表的联表,过滤的过滤,排序的排序。
var dbQuery = from upgradeLog in _fsuUpgradeResultRepository.GetAll();
var UpgradeLogDtoList = await dbQuery
.OrderByDescending(x => x.Updatetime)
.ToListAsync();
4.1.3 将升级日志列表放到Excel导出静态方法中去
var data= EPPlusExcelExporterBase.CreateExcelPackage(
"UpgradeLog.xlsx",
excelPackage =>
{
var sheet = excelPackage.Workbook.Worksheets.Add("UpgradeLog");
sheet.OutLineApplyStyle = true;
EPPlusExcelExporterBase.AddHeader(
sheet,
"Fsu资产编码",
"升级结果",
"是否反馈",
"Fsu IP地址",
"更新时间"
);
EPPlusExcelExporterBase.AddObjects(
sheet, 2, UpgradeLogDtoList,
_ => _.FsuId,
_ => _.Result,
_ => _.IsReport,
_ => _.FsuIp,
_ => _.Updatetime
);
//Formatting cells
var UpdatetimeColumn = sheet.Column(5);
UpdatetimeColumn.Style.Numberformat.Format = "yyyy-mm-dd-hh:mm:ss";
for (var i = 1; i <= 5; i++)
{
sheet.Column(i).AutoFit();
}
});
委托里面流程分下:添加报表表头,添加内容,设置显示样式(时间格式),添加样式(设置单元格自适应内容大小)。
通过CreateExcelPackage方法放回了文件比特流。
4.1.4 abp框架中前后端分离模式文件流传输
以FileResult形式返回前端传来的请求。需要注意的是FileResult是 Microsoft.AspNetCore.Mvc.Core中的一个类。
public async Task<FileResult> GetUpgradeReport()
{
var dbQuery = from upgradeLog in _fsuUpgradeResultRepository.GetAll();
var UpgradeLogDtoList = await dbQuery
.OrderByDescending(x => x.Updatetime)
.ToListAsync();
foreach (var item in UpgradeLogDtoList)
{
ConvertDto(item);//对升级结果,是否上报铁塔平台进行解析
}
var data= EPPlusExcelExporterBase.CreateExcelPackage(
"UpgradeLog.xlsx",
excelPackage =>
{
var sheet = excelPackage.Workbook.Worksheets.Add("UpgradeLog");
sheet.OutLineApplyStyle = true;
EPPlusExcelExporterBase.AddHeader(
sheet,
"Fsu资产编码",
"升级结果",
"是否反馈",
"Fsu IP地址",
"更新时间"
);
EPPlusExcelExporterBase.AddObjects(
sheet, 2, UpgradeLogDtoList,
_ => _.FsuId,
_ => _.Result,
_ => _.IsReport,
_ => _.FsuIp,
_ => _.Updatetime
);
//Formatting cells
var UpdatetimeColumn = sheet.Column(5);
UpdatetimeColumn.Style.Numberformat.Format = "yyyy-mm-dd-hh:mm:ss";
for (var i = 1; i <= 5; i++)
{
sheet.Column(i).AutoFit();
}
});
var fileContentResult = new FileContentResult(data, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
{
FileDownloadName = "升级日志报表.xlsx"
};
return fileContentResult;
}
4.2 前端
4.2.1 vuex的action中添加请求方法
代码如下:
actions = {
async getUpgradeLogReport(context: ActionContext<UpgradeLogState, any>) {
let data= await Ajax.get('/api/services/app/Upgrade/GetUpgradeReport',{
responseType: 'blob',
headers: {
'Content-Type': 'application/json'
}});
return data;
}
}
告诉后台以blob形式返回。当然请求方法你也可以直接普通形式封装,不一定封装在vuex里,这里封装在vuex的一个好处是有些状态数据可以保存在vuex,所有页面可以共享该数据。
4.2.2 upgradeLog.vue升级页面
4.2.2.1 增加下载方法
async downloadUpgradeLogReport(){
await this.$store.dispatch({
type: "upgradelog/getUpgradeLogReport"
}).then(res => {
if (res.status == "200") {
var excelBlob = new Blob([res.data], {
type: "application/vnd.ms-excel"
});
var fileName = "升级日志报表.xlsx";
var oa = document.createElement("a");
oa.href = URL.createObjectURL(excelBlob);
oa.download = fileName;
document.body.appendChild(oa);
oa.click();
}
});
}
创建一个blob对象,以创建url方式将此对象下载。
4.2.2.2 点击导出报表按钮调用下载方法
<Button @click="downloadUpgradeLogReport()">导出升级日志报表</Button>
5. 最终效果
5.1 点击按钮
5.2 报表展示
6.小结
- 笔者下载使用过多个开源方案导出Excel,此种方式方法比较轻量,使用比较简洁;
- 在abp中返回Excel的形式需要思考,因为如果无法继承ControllerBase,就无法使用ActionResult这种万能返回形式(C#中只能继承一个基类,可以继承多个接口);
- vue中ajax接收Excel返回数据时需要注意设置返回类型为Blob,否则将会下载不成功;
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/JerryMouseLi/p/13399027.html
abp框架Excel导出——基于vue的更多相关文章
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
- 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
- yii框架 excel导出
环境: yii框架 basic版 1.下载 PHPexcel (我用的是PHPExcel-1.8.1) 2.将下载的文件夹 (PHPExcel-1.8.1)放至 vender下 (路径:basic ...
- 基于ABP和Magicodes实现Excel导出操作
前端使用的vue-element-admin框架,后端使用ABP框架,Excel导出使用的Magicodes.IE.Excel.Abp库.Excel导入和导出操作几乎一样,不再介绍.文本主要介绍E ...
- 开发基于vue前端框架下的系统的UI自动化,记录总结踩的坑
在使用了pytest完成了一个系统的UI自动化后,因为系统的前端框架,是 基于VUE写的,这就让我编写脚本的时候踩了些坑. 无法用JS 修改标签属性,从而进行的操作 比如上传图片,我们的上传是这样子的 ...
- 利用代码生成工具生成基于ABP框架的代码
在前面随笔,我介绍了整个ABP优化过框架的分层模型,包括尽量简化整个ABP框架的各个层的关系,以及纳入一些基类的辅助处理,使得我们对应业务分层类或者接口尽可能减少代码,并具有生产环境所需要的基类接口, ...
- 【技术博客】基于vue的前端快速开发(工具篇)
一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...
- 使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面
世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍.我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息, ...
随机推荐
- python抓取头条文章
python抓取头条美文并存储到mongodb # Author:song from multiprocessing import Pool from urllib.parse import urle ...
- 5000+字硬核干货!Redis 分布式集群部署实战
原理: Redis集群采用一致性哈希槽的方式将集群中每个主节点都分配一定的哈希槽,对写入的数据进行哈希后分配到某个主节点进行存储. 集群使用公式(CRC16 key)& 16384计算键key ...
- CSS居中对齐
CSS实现居中对齐的几种方式 页面布局中,居中对齐是我们经常遇到的场景,现在总结几个常用的方式供大家参考. 场景一:按钮文字居中对齐,line-height + text-align html代码: ...
- angular入门--列表排序
首先,先上代码 <html ng-app="app1"> <head> <meta charset='utf-8' /> <meta na ...
- Java 项目创建 -- 统一结果处理、统一异常处理、统一日志处理
一.IDEA 插件使用 1.说明 此处使用 SpringBoot 2.2.6 .JDK 1.8 .mysql 8.0.18 作为演示. 使用 IDEA 作为开发工具. 2.IDEA 插件 -- Lom ...
- bzoj1339[Baltic2008]Mafia*
bzoj1339[Baltic2008]Mafia 题意: 匪徒准备从一个车站转移毒品到另一个车站,警方准备进行布控.对于每个车站进行布控都需要一定的代价,现在警方希望使用最小的代价控制一些车站,使得 ...
- 自动生成和安装requirements.txt依赖
在查看别人的Python项目时,经常会看到一个requirements.txt文件,里面记录了当前程序的所有依赖包及其精确版本号.这个文件有点类似与Rails的Gemfile.其作用是用来在另一台PC ...
- Ethical Hacking - NETWORK PENETRATION TESTING(16)
ARP Poisoning - MITMf MITMf is a framework that allows us to launch a number of MITM attacks. MITMf ...
- 实践使用nodejs获取用户真实IP?
先上代码 var http = require('http') var server = http.createServer(function (req,res) { console.log(req. ...
- Linux好学吗?怎么自学Linux?6个值得你去学习Linux的理由!
两个多月前,我对日常工作做出了一个非常重要的决定-我决定从Windows切换到Linux,将其作为个人和办公笔记本电脑的主要系统.除了开始时一些小的驱动程序问题之外,切换非常平稳,我不会考虑返回.如果 ...