Vue+axios+WebApi+NPOI导出Excel文件实例方法

【Vue+axios+WebApi+NPOI导出Excel文件实例方法】 在开发中，有时我们需要实现从前端将数据导出为Excel文件供用户下载。在这个过程中，Vue.js作为前端框架，axios作为HTTP库，WebApi作为后端接口，NPOI作为.NET平台上的Excel处理库共同发挥作用。本文将详细讲解如何利用这些技术实现Excel文件的导出。 **一、前言** 在实际项目中，前端可能使用Element UI这样的UI框架，并通过axios向后端的asp.net WebApi发送请求。为了处理复杂的业务场景，例如列表页面的数据筛选后导出，我们需要确保数据安全性和灵活性。对于导出方案，有以下几种常见方法： 1. **使用location.href**：直接打开接口地址，但这种方法无法传递token，安全性较低，且仅支持GET请求。 2. **axios请求生成并保存文件**：先在服务器生成并保存文件，返回文件地址后再下载。虽然可以记录导出历史，但可能会造成服务端的临时文件堆积。 3. **axios请求返回文件流**：通过axios获取服务端返回的文件流，前端接收后转化为Blob对象并创建下载链接。这种方法能传递token，支持GET或POST请求，并且更安全。 考虑到需要筛选数据和验证接口安全性，第三种方案是最优选择。 **二、Vue + axios 前端处理** 1. **axios响应拦截器**：在axios的响应拦截器中，我们需要处理返回的`blob`类型数据。注意，`Content-Disposition`头需要在WebApi中配置才能正确获取文件名。例如： ```javascript service.interceptors.response.use( response => { const fileName = decodeURI(response.headers['content-disposition'].split('filename=')[1]); return { data: response.data, fileName: fileName }; }, error => { // 错误处理... } ); ``` 2. **导出Excel按钮事件**：点击导出时，使用axios发起GET请求，设置`responseType: 'blob'`，并在IE兼容性处理中将blob转换为文件： ```javascript exportExcel() { let params = {}; let p = this.getQueryParams(); if (p) params = Object.assign({}, params, p); axios .get('接口地址', { params: params, responseType: 'blob', }) .then(res => { var blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' }); // IE兼容处理... }); } ``` **三、WebApi 后端处理** 在后端，WebApi需要接收来自axios的请求，使用NPOI生成Excel文件流。确保添加NPOI库到项目中，然后创建一个API控制器方法，接收筛选参数，使用NPOI填充数据到Excel工作表，最后将工作簿流返回到前端： ```csharp [HttpGet] public HttpResponseMessage ExportExcel([FromUri] ExportParameters parameters) { // 使用NPOI生成Excel var workbook = new XSSFWorkbook(); var sheet = workbook.CreateSheet("Sheet1"); // 填充数据... var stream = new MemoryStream(); workbook.Write(stream); stream.Position = 0; // 设置响应头 var response = Request.CreateResponse(HttpStatusCode.OK); response.Content = new StreamContent(stream); response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") { FileName = "export.xlsx" }; return response; } ``` **四、NPOI使用** NPOI提供了丰富的API来操作Excel文件，包括创建工作簿、工作表，添加行、列，设置单元格样式等。例如，我们可以根据筛选条件填充数据到工作表： ```csharp var row = sheet.CreateRow(rowIndex++); var cell = row.CreateCell(0); cell.SetCellValue(someData); ``` **总结** 通过以上步骤，我们实现了Vue.js前端利用axios请求WebApi，WebApi通过NPOI生成Excel文件流，前端接收到流后转换为Blob，最终创建下载链接供用户下载。这种方案兼顾了数据安全、灵活性和兼容性，适用于大多数导出Excel的需求。