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

server/2024/11/29 2:49:00/

前端代码

//导出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();
};

后端代码

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

using NPOI.SS.UserModel;
using NPOI.XSSF.UserModel;
/// <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-streamvar 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;}


http://www.ppmy.cn/server/145794.html

相关文章

【Mybatis】Mybatis集成Javaweb-smbms项目

项目结构如下 Mybatis 集成 Javaweb-smbms 项目需要修改哪些部分&#xff1f; 首先定义 Mybatis 全局配置文件 <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE configurationPUBLIC "-//mybatis.org//DTD Config 3.0//EN""…

优化DevOps环境中的容器化交付流程:实践指南

在快节奏的软件开发和运维&#xff08;DevOps&#xff09;环境中&#xff0c;容器化已成为提升应用交付效率、增强系统可移植性和简化运维管理的关键手段。本文将深入探讨如何优化DevOps环境下的容器交付流程&#xff0c;提供一系列实践指南&#xff0c;旨在帮助企业加速产品上…

Flink——source数据来源分类

一、Source Data Sources 是什么呢&#xff1f;就字面意思其实就可以知道&#xff1a;数据来源。 Flink 做为一款流式计算框架&#xff0c;它可用来做批处理&#xff0c;也可以用来做流处理&#xff0c;这个 Data Sources 就是数据的来源地。 flink在批/流处理中常见的sourc…

高效实现定期Excel报表自动化:策略与工具

在数据处理与分析的日常工作中&#xff0c;定期生成Excel报表是一个常见且至关重要的任务。无论是财务、销售、人力资源还是其他领域&#xff0c;都需要根据最新数据做出及时准确的决策。然而&#xff0c;面对频繁更新的数据源和固定的分析需求&#xff0c;手动操作不仅耗时费力…

吉利汽车x文心快码:AI最佳实践案例

文心快码(BaiduComate)是基于百度文心大模型&#xff0c;在研发全流程全场景下为开发者提供辅助建议的智能代码助手。结合百度积累多年的编程现场大数据、外部优秀开源数据&#xff0c;可为开发者生成更符合实际研发场景的优秀代码&#xff0c;提升编码效率&#xff0c;释放“十…

Vue+Vite 组件开发的环境准备(零基础搭建)

一、什么是Vite Vue3作为一款现代化的JavaScript框架&#xff0c;配合Vite这样的构建工具&#xff0c;极大地简化了流程&#xff0c;提升了效率。Vite 是一个基于现代浏览器原生的 ES 模块系统&#xff0c;能够以原生模块导入的方式运行源代码的开发服务器。它被设计用来替代传…

Linux的web服务器

www简介 Web网络服务也叫WWW(World Wide Web 全球信息广播)万维网服务&#xff0c;一般是指能够让用户通过浏 览器访问到互联网中文档等资源的服务 Web 网络服务是一种被动访问的服务程序&#xff0c;即只有接收到互联网中其他主机发出的请求后才会响 应&#xff0c;最终用于…

Leetcode200. 岛屿数量(HOT100)

链接 代码&#xff1a; class Solution { public:int dx[4] {0,1,-1,0},dy[4] {1,0,0,-1};vector<vector<char>> g;int numIslands(vector<vector<char>>& grid) {g grid;int cnt 0;for(int i 0;i<g.size();i){for(int j 0;j<g[i].s…