.Net Core WebApi+Vue实现文件下载

.Net Core WebApi+Vue实现文件下载

WebApi 控制器代码实例

using OfficeOpenXml;引用的程序集

 [HttpPost]
        public async Task<IActionResult> AcceptanceExportDate(AcceptanceEntryRequest input)
        {
            List<AcceptanceEntryResponse> exports = await _acceptanceEntryBusiness.AcceptanceExport(input);//获取到你所要下载数据,我这里调用查询接口
            using var package = new ExcelPackage();
            ExcelWorksheet worksheet = package.Workbook.Worksheets.Add("信息表");
            List<string> titles = new List<string>
            {
                "客户公司",
                "销售公司",
            };//标题
            for (int i = 0; i < titles.Count; i++)
            {
                worksheet.Cells[1, i + 1].Value = titles[i];
            }
            int row = 2, col = 0;
            //内容
            for (int i = 0; i < exports.Count; i++)
            {
                var Accptance = exports[i];
                col = titles.IndexOf("客户公司") + 1; SetValue(worksheet, row, col, row, col, Accptance.CompanyName);
                col = titles.IndexOf("销售公司") + 1; SetValue(worksheet, row, col, row, col, Accptance.SaleCompanyName);
                row++;
            }
             var excelData = package.GetAsByteArray();
            var contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
            var fileName = "信息表.xlsx";
            return File(excelData, contentType, fileName);
        }
        
        public void SetValue(ExcelWorksheet worksheet, int row, int col, int endRow, int endCol, string text)
        {
            var range = worksheet.Cells[row, col, endRow, endCol];
            range.Merge = true;
            range.Value = text;
        }

Vue代码实例

this.queryParam是你的查询条件

 <a-button type="primary" @click="AcceptanceExport">导出</a-button>

AcceptanceExport () {
  this.loading = true
  this.$http
    .post('/EShop/AcceptanceEntry/AcceptanceExportDate', this.queryParam, { responseType: 'blob' })
    .then((resJson) => {
      this.loading = false
        const blob = new Blob([resJson])
        const fileName = '信息表.xls'
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          elink.setAttribute('download', '信息表.xlsx')
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
    })
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
.NET Core Web ApiVue3 主动推送数据,可以使用 SignalR 技术实现实时通信。SignalR 是一个 ASP.NET 的库,它可以让你轻松实现实时通信功能,如聊天室、实时数据更新等。 以下是实现步骤: 1. 在 .NET Core Web Api 中安装 SignalR 包。 ``` dotnet add package Microsoft.AspNetCore.SignalR ``` 2. 在 Startup.cs 文件中启用 SignalR 并配置路由。 ```csharp public void ConfigureServices(IServiceCollection services) { services.AddSignalR(); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { // ... app.UseEndpoints(endpoints => { endpoints.MapControllers(); endpoints.MapHub<MyHub>("/myhub"); // 配置 SignalR 路由 }); } ``` 3. 创建一个继承自 Hub 类的 MyHub 类,实现向客户端推送数据的方法。 ```csharp public class MyHub : Hub { public async Task SendMessage(string message) { await Clients.All.SendAsync("ReceiveMessage", message); // 向所有客户端推送消息 } } ``` 4. 在 Vue3 中安装 `@microsoft/signalr` 包。 ``` npm install @microsoft/signalr ``` 5. 在 Vue3 中创建 SignalR 连接并监听推送数据。 ```javascript import * as signalR from '@microsoft/signalr'; const connection = new signalR.HubConnectionBuilder() .withUrl('/myhub') // 与 .NET Core Web Api 中配置的路由保持一致 .build(); connection.start() // 启动连接 .then(() => { console.log('SignalR Connected!'); }) .catch(err => console.error(err)); connection.on('ReceiveMessage', message => { // 监听推送数据 console.log('Received message:', message); }); ``` 6. 在 .NET Core Web Api 中调用 MyHub 类的 SendMessage 方法即可向 Vue3 推送数据。 ```csharp public class MyController : ControllerBase { private readonly IHubContext<MyHub> _hubContext; public MyController(IHubContext<MyHub> hubContext) { _hubContext = hubContext; } [HttpGet("send-message")] public async Task<IActionResult> SendMessage(string message) { await _hubContext.Clients.All.SendAsync("ReceiveMessage", message); // 调用 MyHub 类的 SendMessage 方法 return Ok(); } } ``` 以上为大致实现步骤,具体实现需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值