abp框架Excel导出——基于vue

admin • 2020年7月29日 19:57 • 时事新闻 • 阅读 19

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
    {
        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 天生升级日志列表

此部门代码与主营业相关，由于原本营业与区域权限有关，简化起见，故删除其他无关代码，主要就是从数据库获取了升级列表，而且按照了升级时间举行了倒序排列。读者差别的营业可举行差别操作。需要转义的转义，联表的联表，过滤的过滤，排序的排序。

IntelliJ IDEA 2020.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中添加请求方式

abp框架Excel导出——基于vue

代码如下：

    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 点击按钮

abp框架Excel导出——基于vue

5.2 报表展示

abp框架Excel导出——基于vue

6.小结

  • 笔者下载使用过多个开源方案导出Excel，此种方式方式对照轻量，使用对照简练；
  • 在abp中返回Excel的形式需要思索，由于若是无法继续ControllerBase，就无法使用ActionResult这种万能返回形式（C#中只能继续一个基类，可以继续多个接口）；
  • vue中ajax吸收Excel返回数据时需要注重设置返回类型为Blob，否则将会下载不乐成；
  • 这里Excel导出是借鉴了Abp Zero 8.1的思绪，他是类以瞬时模式注入容器，我是写成了静态方式。然则Abp Zero Excel导出的思绪大有差别，首先是天生文件在Cache里，然后返回文件GUID（Token），用户再拿着GUID（Token）通过fileController从cache导出需要下载的文件。缓存有效期1分钟，目的是为了防止有人拿到链接攻击，一直下载。

版权声明：本文为博主原创文章，遵照 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://www.cnblogs.com/JerryMouseLi/p/13399027.html

原创文章，作者：admin，如若转载，请注明出处：https://www.2lxm.com/archives/25677.html

赞 (0)
admin admin
0 0
女子开保时捷当街故意冲撞路人被刑拘，因双方积怨致冲突
« 上一篇 2020年7月29日 19:50
中国民航局完成1397架波音737飞机排查工作
下一篇 » 2020年7月29日 20:23

相关推荐