Vue3+Typescript+Axios+.NetCore实现导出Excel文件功能

前端代码

javascript 复制代码
//导出Excel
const exportMaintenanceOrderSettlementItemExcelClick = async () => {
  

  let url = `${VITE_APP_API_URL}/api/app/maintenance/settlement-service-item/${currentMaintenanceOrderId.value}/${currentMaintenanceOrderSettlementRow.value.id}`;
  let fileName = `${currentMaintenanceOrder.value.title} ${currentMaintenanceOrderSettlementRow.value.nYearAndMonth} 第【${currentMaintenanceOrderSettlementRow.value.payNum}】期结算服务清单.xlsx`;

  let tokenData = getToken();
  var xhr = new XMLHttpRequest();
  xhr.open("get", url, true); // get、post都可
  xhr.responseType = "blob"; // 转换流
  xhr.setRequestHeader("Authorization", formatToken(tokenData.accessToken)); // token键值对
  xhr.onload = function () {
    if (this.status == 200) {
      var blob = this.response;
      var a = document.createElement("a");
      var url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = fileName; // 文件名
    }
    a.click();
    window.URL.revokeObjectURL(url);
    exportLoading.value = false;
  };
  xhr.send();
};

后端代码

在后端建一个控制器,控制器方法代码如下:

cs 复制代码
using NPOI.SS.UserModel;
using NPOI.XSSF.UserModel;
cs 复制代码
/// <summary>
/// 导出结算服务项
/// </summary>
/// <param name="maintenanceOrderId"></param>
/// <param name="maintenanceOrderSettlementId"></param>
/// <returns></returns>
[HttpGet]
[Route("settlement-service-item/{maintenanceOrderId}/{maintenanceOrderSettlementId}")]
public async Task<FileResult> ExportMaintenanceOrderSettlementServiceItemsExcelAsync(Guid maintenanceOrderId, Guid maintenanceOrderSettlementId)
{
   var title = $"{maintenanceOrderSettlementId}.xlsx";
   var contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";//octet-stream
   var workbook = await _maintenanceOrderServiceItemAppService.GetExportMaintenanceOrderSettlementServiceItemsExcelAsync(maintenanceOrderId, maintenanceOrderSettlementId);


   var bytes = workbook.ConvertToBytes();

   if (bytes != null)
   {
      // 设置响应头
      var cd = new System.Net.Mime.ContentDisposition
      {
         Inline = false,
         FileName = $"{title}", // 指定下载的文件名
         CreationDate = DateTime.Now
      };
      // 添加必须的响应头
      Response.ContentType = contentType;
      Response.Headers.Add("Content-Disposition", cd.ToString());

      // 返回文件流
      return File(bytes, contentType,title,true);

   }


   return null;

}
相关推荐
IT_陈寒10 分钟前
5个Java 21新特性实战技巧,让你的代码性能飙升200%!
前端·人工智能·后端
咖啡の猫12 分钟前
Vue内置指令与自定义指令
前端·javascript·vue.js
昔人'18 分钟前
使用css `focus-visible` 改善用户体验
前端·css·ux
前端双越老师22 分钟前
译: 构建高效 AI Agent 智能体
前端·node.js·agent
艾小码30 分钟前
告别数据混乱!掌握JSON与内置对象,让你的JS代码更专业
前端·javascript
liangshanbo12156 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15888 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_9 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
刘梦凡呀9 小时前
C#获取钉钉平台考勤记录
java·c#·钉钉