乐趣区

关于程序员:基于ABP和Magicodes实现Excel导出操作

jiezi

  前端应用的 vue-element-admin 框架，后端应用 ABP 框架，Excel 导出应用的 Magicodes.IE.Excel.Abp 库。Excel 导入和导出操作简直一样，不再介绍。文本次要介绍 Excel 导出操作和过程中遇到的坑，次要是 Excel 文件导出后无奈关上的问题。

一.Magicodes.IE 库

1.Magicodes.IE 库介绍

  Magicodes.IE 是一个导入导出的通用库，它反对 Dto 导入导出、模板导出、花式导出以及动静导出，反对 Excel、Csv、Word、Pdf 和 Html。总之，根本的和高级的导入和导出操作都是能够满足的。次要特点如下：

2.Magicodes.IE 库的 NuGet 包

Magicodes.IE 库相干的 NuGet 包如下所示：
(1)Magicodes.IE.Core，v2.6.4
(2)Magicodes.IE.Excel，v2.6.4
(3)Magicodes.IE.Excel.NPOI，v2.6.4
(4)Magicodes.IE.Excel.AspNetCore，v2.6.4
(5)Magicodes.IE.Pdf，v2.6.4
(6)Magicodes.IE.Word，v2.6.4
(7)Magicodes.IE.Html，v2.6.4
(8)Magicodes.IE.Csv，v2.6.4
(9)Magicodes.IE.AspNetCore，v2.6.4
(10)Magicodes.IE.EPPlus，v2.6.4
(11)Magicodes.IE.Excel.Abp，v2.6.4
(12)Magicodes.IE.Csv.Abp，v2.6.4
(13)Magicodes.IE.Html.Abp，v2.6.4
(14)Magicodes.IE.Pdf.Abp，v2.6.4
(15)Magicodes.IE.Word.Abp，v2.6.4

3.Magicodes.IE 库的教程

(1)基础教程之导入学生数据 [1]
(2) 基础教程之导出 Excel[2]
(3)基础教程之导出 Pdf 收据 [3]
(4) 在 Docker 中应用 [4]
(5) 动静导出 [5]
(6) 多 Sheet 导入 [6]
(7)Csv 导入导出[7]
(8)Excel 图片导入导出[8]
(9)Excel 模板导出之导出教材订购表[9]
(10) 进阶篇之导入导出筛选器 [10]
(11)Magicodes.IE 之花式导出[11]
(12)Magicodes.IE.AspNetCore 之一行代码多格局导出[12]
(13) 性能测试[13]
(14)Excel 合并行导入[14]
(15)Excel 模板导出之动静导出[15]
(16)Magicodes.IE.Excel.AspNetCore 之疾速导出 Excel[16]

二. 基于 ABP 的 Excel 导出操作

1.Business.Application.Contracts

在该我的项目中增加 Magicodes.IE.Excel.Abp 类库。并且 BusinessApplicationContractsModule 须要依赖 MagicodesIEExcelModule 模块：
(1)ExportActivityDto 类

public class ExportActivityDto : EntityDto<Guid?>
{
    /// <summary>
    /// 姓名或微信昵称
    /// </summary>
    [Required]
    [ExporterHeader(DisplayName = "姓名或微信昵称")]
    public string Name {get; set;}

    /// <summary>
    /// 所在省市区
    /// </summary>
    [Required]
    [ExporterHeader(DisplayName = "所在省市区")]
    public string Address {get; set;}

    /// <summary>
    /// 手机号
    /// </summary>
    [Required]
    [ExporterHeader(DisplayName = "手机号")]
    public string Phone {get; set;}

    /// <summary>
    /// 年龄
    /// </summary>
    [Required]
    [ExporterHeader(DisplayName = "年龄")]
    public string Age {get; set;}

    /// <summary>
    /// 备注
    /// </summary>
    [ExporterHeader(DisplayName = "备注")]
    public string Remark {get; set;}
}

(2)IActivityAppService

public interface IActivityAppService : IApplicationService
{
    // 导出流动列表
    Task<ActionResult> ExportActivity();}

2.Business.Application

(1)ActivityAppService
通过构造函数注入的形式，依赖注入 IExcelExporter：

/// <summary>
/// 通过 Excel 导出流动报名信息
/// </summary>
/// <returns></returns>
public async Task<ActionResult> ExportActivity()
{var query = await _repository.GetQueryableAsync();
    var dto = ObjectMapper.Map<List<Activity>, List<ExportActivityDto>>(query.ToList());
    var result = await _excelExporter.ExportAsByteArray(dto);
    var fs  = new MemoryStream(result);

    return new XlsxFileResult(stream: fs, "流动报名信息表.xlsx");
}

(2)ActivityAutoMapperProfile

public class ActivityAutoMapperProfile : Profile
{public ActivityAutoMapperProfile()
    {CreateMap<Activity, ExportActivityDto>();
    }
}

3.Business.HttpApi

(1)ActivityController

[HttpGet]
[Route("export-activity")]
public Task<ActionResult> ExportActivity()
{return _ActivityAppService.ExportActivity();
}

4.Excel 导出操作 vue 代码

导出按钮相干的 vue 代码如下：

<el-button class="filter-item" size="mini" type="success" icon="el-icon-download" @click="handleExport()"> 导出 </el-button>

导出函数的 vue 代码如下：

handleExport() {
  var that = this;
  that.$axios.get('/api/app/activity/export-activity').then(res => {
    this.$notify({
      title: '胜利',
      message: '导出胜利',
      type: 'success',
      duration: 2000
    });
    var blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
    let url = window.URL.createObjectURL(blob); // 创立下载的链接
    let a = document.createElement("a"); // 生成一个 a 标签
    a.setAttribute("href", url);
    a.setAttribute("download", that.$activityExcelName);
    a.style.display = "none"; // 将 a 标签暗藏
    document.body.appendChild(a); // 将 a 标签增加到 body 中
    a.click(); // 触发 a 标签的点击事件
    window.URL.revokeObjectURL(url); // 开释掉 blob 对象
    a.remove() // 将 a 标签从 body 中移除}).catch(() => {
    this.$message({
      type: 'info',
      message: '没有权限导出'
    });
  });
  }

其中 that.$axios.get 中的 get()代码如下：

get(url) {return new Promise((resolve, reject) => {axios.get(url, { responseType: "blob"})
      .then(response => {resolve(response.data)
      }, err => {
        // Message({
        //   message: err.error.message,
        //   type: 'error',
        //   duration: 5 * 1000
        // })
        reject(err)
      })
      .catch((error) => {reject(error)
      })
  })
}

阐明：肯定要特地留神加上 responseType: “blob”，否则就会报文件格式或者文件扩展名有效的谬误。本人尝试了下，换成 responseType: “arraybuffer” 也是能够的。

三.MagicodesIEXXXModule 模块源码

1.MagicodesIEExcelModule 源码

 public class MagicodesIEExcelModule: AbpModule
{public override void ConfigureServices(ServiceConfigurationContext context)
    {context.Services.AddScoped<IExcelExporter, ExcelExporter>();
        context.Services.AddScoped<IExcelImporter, ExcelImporter>();
        context.Services.AddScoped<IExportFileByTemplate, ExcelExporter>();
        //TODO: 解决筛选器
    }
}

2.MagicodesIECsvModule 源码

public class MagicodesIECsvModule: AbpModule
{public override void ConfigureServices(ServiceConfigurationContext context)
    {context.Services.AddScoped<ICsvExporter, CsvExporter>();
        context.Services.AddScoped<ICsvImporter, CsvImporter>();}
}

3.MagicodesIEHtmlModule 源码

public class MagicodesIEHtmlModule: AbpModule
{public override void ConfigureServices(ServiceConfigurationContext context)
    {context.Services.AddScoped<IHtmlExporter, HtmlExporter>();
    }
}

4.MagicodesIEPdfModule 源码

public class MagicodesIEPdfModule: AbpModule
{public override void ConfigureServices(ServiceConfigurationContext context)
    {context.Services.AddScoped<IPdfExporter, PdfExporter>();
    }
}

5.MagicodesIEWordModule 源码

public class MagicodesIEWordModule: AbpModule
{public override void ConfigureServices(ServiceConfigurationContext context)
    {context.Services.AddScoped<IWordExporter, WordExporter>();
    }
}

参考文献：
[1]基础教程之导入学生数据：https://urlify.cn/neI7Vz
[2]基础教程之导出 Excel：https://urlify.cn/yiei6f
[3]基础教程之导出 Pdf 收据：https://urlify.cn/7FjuA3
[4]在 Docker 中应用：https://github.com/dotnetcore… 在 Docker 中应用.md
[5]动静导出：https://github.com/dotnetcore… 动静导出.md
[6]多 Sheet 导入：https://github.com/dotnetcore… 多 Sheet 导入.md
[7]Csv 导入导出：https://github.com/dotnetcore… 导入导出.md
[8]Excel 图片导入导出：https://urlify.cn/Ybyey2
[9]Excel 模板导出之导出教材订购表：https://urlify.cn/vqyQnq
[10]进阶篇之导入导出筛选器：https://urlify.cn/Nzmmim
[11]Magicodes.IE 之花式导出：https://urlify.cn/QRZRN3
[12]Magicodes.IE.AspNetCore 之一行代码多格局导出：https://github.com/dotnetcore… 之一行代码多格局导出.md
[13]性能测试：https://github.com/dotnetcore… 性能测试.md
[14]Excel 合并行导入：https://github.com/dotnetcore… 合并行导入.md
[15]Excel 模板导出之动静导出：https://github.com/dotnetcore… 模板导出之动静导出.md
[16]Magicodes.IE.Excel.AspNetCore 之疾速导出 Excel：https://github.com/dotnetcore… 之疾速导出 Excel.md
[17]麦扣官网文档：https://docs.xin-lai.com/
[18]增加对 Abp Vnext 模块的封装和反对：https://github.com/dotnetcore…
[19]abp 框架 Excel 导出 – 基于 vue：https://www.cnblogs.com/Jerry…
[20]abp-vue 导入导出 excel：https://cloud.tencent.com/dev…
[21]应用 Magicodes.IE 疾速导出 Excel：https://www.cnblogs.com/codel…
[22]dotnetcore/Magicodes.IE：https://github.com/dotnetcore…

本文由 mdnice 多平台公布

退出移动版