??前端使用的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/Magicodes.IE/blob/master/docs/4.在Docker中使用.md
[5]動態導出：https://github.com/dotnetcore/Magicodes.IE/blob/master/docs/5.動態導出.md
[6]多Sheet導入：https://github.com/dotnetcore/Magicodes.IE/blob/master/docs/6.多Sheet導入.md
[7]Csv導入導出：https://github.com/dotnetcore/Magicodes.IE/blob/master/docs/7.Csv導入導出.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/Magicodes.IE/blob/master/docs/12.Magicodes.IE.AspNetCore之一行代碼多格式導出.md
[13]性能測試：https://github.com/dotnetcore/Magicodes.IE/blob/master/docs/13.性能測試.md
[14]Excel合并行導入：https://github.com/dotnetcore/Magicodes.IE/blob/master/docs/Excel合并行導入.md
[15]Excel模板導出之動態導出：https://github.com/dotnetcore/Magicodes.IE/blob/master/docs/Excel模板導出之動態導出.md
[16]Magicodes.IE.Excel.AspNetCore之快速導出Excel：https://github.com/dotnetcore/Magicodes.IE/blob/master/docs/AspNetCore之快速導出Excel.md
[17]麥扣官方文檔：https://docs.xin-lai.com/
[18]添加對Abp Vnext模塊的封裝和支持：https://github.com/dotnetcore/Magicodes.IE/issues/318
[19]abp框架Excel導出--基于vue：https://www.cnblogs.com/JerryMouseLi/p/13399027.html
[20]abp-vue導入導出excel：https://cloud.tencent.com/developer/article/1552255
[21]使用Magicodes.IE快速導出Excel：https://www.cnblogs.com/codelove/p/15117226.html
[22]dotnetcore/Magicodes.IE：https://github.com/dotnetcore/Magicodes.IE