1.安装包
Install-Package Magicodes.IE.AspNetCore
2.开始配置
在Startup.cs
的Configure()方法中,在UseRouting()中间件之后,注册如下中间件
public void Configure(IApplicationBuilder app)
{
app.UseRouting();
app.UseMagiCodesIE();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
上面这种以中间件形式可以为我们提供导出服务,那么我们再看一下另一种方式如下所示:
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers(options=>options.Filters.Add(typeof(MagicodesFilter)));
}
上面两种方式都可以为我们提供导出服务,我们只需要对我们的控制器进行配置我们的特性,在这边呢 特性主要做的是一个标识作用,标识他的一些相关的内容数据,同时标识他可以当成文件导出。
[HttpGet("excel")]
[Magicodes(Type = typeof(ExportTestDataWithAttrs))]
public List<ExportTestDataWithAttrs> Excel()
{
return GenFu.GenFu.ListOf<ExportTestDataWithAttrs>(100);
}
上面代码片段中我们标识这个类允许被导出。同时我们需要通过Type指定我们被导出类的类型。
这样填写完后我们可以通过对该地址的调用,但是注意我们必须要添加请求头以标识被导出的文件类型。如果不添加请求头,那么此处将返回的还是json格式的数据。请求头名称为Magicodes-Type
/// <summary>
/// XLSX
/// </summary>
internal const string XLSXHttpContentMediaType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
/// <summary>
/// PDF
/// </summary>
internal const string PDFHttpContentMediaType = "application/pdf";
/// <summary>
/// DOCX
/// </summary>
internal const string DOCXHttpContentMediaType = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
/// <summary>
/// HTML
/// </summary>
internal const string HTMLHttpContentMediaType = "text/html";
如果说是模板导出word或者pdf甚至说html文件那么我们也是同样的操作如下所示:
[HttpGet("Word")]
[Magicodes(Type = typeof(ReceiptInfo), TemplatePath = ".//ExportTemplates//receipt.cshtml")]
public ReceiptInfo Word()
{
return new ReceiptInfo
{
Amount = 22939.43M,
Grade = "2019秋",
IdNo = "43062619890622xxxx",
Name = "张三",
Payee = "湖南心莱信息科技有限公司",
PaymentMethod = "微信支付",
Profession = "运动训练",
Remark = "学费",
TradeStatus = "已完成",
TradeTime = DateTime.Now,
UppercaseAmount = "贰万贰仟玖佰叁拾玖圆肆角叁分",
Code = "19071800001"
};
}
我们还是需要对其指定Type,然后通过TemplatePath进行指定模板地址即可
同样的我们还可以通过请求头进行标识本次请求是否是文件格式导出。
[HttpGet("pdf")]
[Magicodes(Type = typeof(BatchPortraitReceiptInfoInput), TemplatePath = ".//ExportTemplates//batchReceipt.cshtml")]
public BatchPortraitReceiptInfoInput Pdf()
{
var input = new BatchPortraitReceiptInfoInput
{
Payee = "湖南心莱信息科技有限公司",
SealUrl =
@"data:image/jpeg;base64....",
LogoUrl =
@"data:image/png;base64....",
ReceiptInfoInputs = new List<BatchPortraitReceiptInfoDto>()
};
for (var i = 0; i < 500; i++)
input.ReceiptInfoInputs.Add(new BatchPortraitReceiptInfoDto
{
Amount = 22939.43M,
Grade = "2019秋",
IdNo = "43062619890622xxxx",
Name = "张三",
PaymentMethod = "微信支付",
Profession = "运动训练",
Remark = "学费",
TradeStatus = "已完成",
TradeTime = DateTime.Now,
UppercaseAmount = "贰万贰仟玖佰叁拾玖圆肆角叁分",
Code = "1907180000" + i
});
return input;
}
[HttpGet("Html")]
[Magicodes(Type = typeof(ReceiptInfo), TemplatePath = ".//ExportTemplates//receipt.cshtml")]
public ReceiptInfo Html()
{
return new ReceiptInfo
{
Amount = 22939.43M,
Grade = "2019秋",
IdNo = "43062619890622xxxx",
Name = "张三",
Payee = "湖南心莱信息科技有限公司",
PaymentMethod = "微信支付",
Profession = "运动训练",
Remark = "学费",
TradeStatus = "已完成",
TradeTime = DateTime.Now,
UppercaseAmount = "贰万贰仟玖佰叁拾玖圆肆角叁分",
Code = "19071800001"
};
}
Swagger中使用
通过继承IOperationFilter接口,创建AddRequiredHeaderParameter类,添加一个header类型的参数,并且Header Name为Magicodes-Type
如下所示:
public class AddRequiredHeaderParameter : IOperationFilter
{
public void Apply(OpenApiOperation operation, OperationFilterContext context)
{
if (operation.Parameters == null)
{
operation.Parameters = new List<OpenApiParameter>();
}
operation.Parameters.Add(new OpenApiParameter
{
Name = "Magicodes-Type",
In = ParameterLocation.Header,
Required = false,
Description = "根据HttpContentMediaType添加指定的header值,导出不同格式的文件。"
});
}
}
然后转到ConfigureServices()
方法中,在AddSwaggerGen
方法中添加如下内容:
c.OperationFilter<AddRequiredHeaderParameter>();
XMLHttpRequest使用
在XMLHttpRequest
的使用中,和正常导出来说几乎一样,不过需要额外注意以下几个地方:
- 修改responseType为blob。
- 添加Http Header。
- 以及对二进制流的处理。
document.querySelector("#downloadexcel").onclick = function() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "https://localhost:5001/api/Magicodes/excel", true); //也可以使用Post
xmlhttp.responseType = ‘blob‘;
xmlhttp.setRequestHeader("Magicodes-Type", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
xmlhttp.send();
// readyState == 4 为请求完成,status == 200为请求成功返回的状态
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var name = xmlhttp.getResponseHeader("Content-disposition");
var filename = name.substring(20, name.length);
var blob = new Blob([xmlhttp.response], {
type: ‘text/xlsx‘
});
var Url = URL.createObjectURL(blob);
var link = document.createElement(‘a‘);
link.href = Url;
link.download = filename;
link.click();
}
}
}
jQuery Ajax使用
对于jQuery Ajax
和XMLHttpRequest
的注意事项是一致的。详细可参考如下代码示例,不过目前对于示例的演示只是针对于Excel导出的,关于其他格式的导出,可参考我们前面介绍的Magicodes-Type
常量内容,当然对于其他文件的导出同样也是对responseType、以及blob类型进行修改。
$("#downloadexcel").click(function() {
$.ajax({
url: "https://localhost:5001/api/Magicodes/excel",
type: ‘GET‘,
headers: {
‘Magicodes-Type‘: ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet‘
},
xhrFields: {
responseType: ‘blob‘
},
success: function(data, status, xhr) {
var name = xhr.getResponseHeader("Content-disposition");
var filename = name.substring(20, name.length);
var blob = new Blob([data], {
type: ‘text/xlsx‘
});
var Url = URL.createObjectURL(blob);
var link = document.createElement(‘a‘);
link.href = Url;
link.download = filename;
link.click();
}
});
})