Как экспортировать данные в Excel с помощью Radzen и Blazor (.Net Core 3.1)
Создание и экспорт данных в файл Excel — одна из часто используемых функций в веб-приложениях. В этом посте мы узнаем, как экспортировать данные в Excel в проекте Blazor Server + Radzen.
Почему я пишу этот пост? Несколько дней назад я боролся с функцией экспорта radzon. Когда мы попытались экспортировать данные в файл Excel, они были успешно экспортированы, но затем приложение вышло из строя с исключением. Когда я подробно изучил это, в консоли браузера было исключение «Ошибка: Цепь была отключена из-за ошибки (Экспорт)«, что до сих пор является известной проблемой Radzen! Даже я не смог показать правильный счетчик для функции экспорта или любых других операций на странице. Мне нужно просто перезагрузить/обновить страницу, чтобы увидеть ее снова.
Команда Radzen пытается решить проблему, но что я должен сделать, чтобы предоставить возможность нашим клиентам с проектом radzen/blazor в то же время. Поэтому я пишу короткую статью с решением по экспорту excel в Radzen/Blazor без каких-либо исключений и экспорту файлов столько, сколько вы хотели бы сделать, оставаясь на одной странице.
Ссылка на исходный код: Github
Скачать отсюда
Создание проекта Radzen/Blazor
Создать новый проект
Прикрепите предопределенную/образцовую базу данных для вновь созданного проекта (создайте образец схемы)
нажмите кнопку «Готово» и закройте окно данных. вы будете следить за страницами
- Товары
- Добавить продукт
- Редактировать продукт
Страница продуктов имеет полнофункциональную сетку и кнопки экспорта для файлов Excel и csv. Мы попытаемся запустить проект и увидеть функции экспорта, созданные radzen по умолчанию, и увидим ошибку/исключение в консоли браузера после однократного выполнения функции экспорта. Но тогда вы увидите, что вы не можете ничего делать на странице, пока не будет выполнено обновление страницы.
Теперь, как вы можете видеть, мы получили ошибку в консоли браузера, которая возникает после экспорта данных в Excel или csv.
Чтобы решить эту проблемуНам нужно открыть решение radzen в Visual Studio, я использую Visual Studio 2019. Здесь мы изменим существующий код, чтобы можно было решить эту проблему и позволить конечному пользователю экспортировать файлы в максимально возможной степени, оставаясь на той же странице.
Настройте решение Radzen с помощью Visual Studio 2019 (.Net Core 3.1)
- Открытый проект в Visual Studio 2019
Чтобы решить нашу проблему, мы начнем настройку с ExportSampleDbController.cs.
Мы добавим следующий код в контроллер, чтобы он работал как контроллер API.
Это трюк «контроллер API» и «httpClient», мы будем использовать эти настройки и библиотеки для расширения функциональности для экспорта.
using System;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using ExportOperations.Data;
namespace ExportOperations
{
[Route("api/[controller]/[action]")]
[ApiController]
public partial class ExportSampleDbController : ExportController
Теперь давайте изменим SampleDbService, в вашем случае используйте имя службы, которая вызывает этот метод экспорта.
Сначала мы импортируем HttpClient в нашу службу, а затем изменим код для метода экспорта в Excel. давай сделаем это,
namespace ExportOperations
{
public partial class SampleDbService
{
private readonly HttpClient httpClient;
private readonly SampleDbContext context;
private readonly NavigationManager navigationManager;
public SampleDbService(HttpClient httpClient, SampleDbContext context, NavigationManager navigationManager)
{
this.httpClient = httpClient;
this.context = context;
this.navigationManager = navigationManager;
}
Теперь мы изменим метод ExportProductsToExcel.
Здесь мы обновляем выделенные области метода, мы обновили возвращаемый тип метода, чтобы он возвращал байт[] множество. Мы вернем массив байтов на нашу страницу blazor, где мы будем использовать его для записи ответа base64 для экспорта.
public async Task<byte[]> ExportProductsToExcel(Query query = null, string fileName = null)
{
var url = query != null ? query.ToUrl($"api/ortSampleDb/ExportProductsToExcel/export/sampledb/products/excel(fileName="{(!string.IsNullOrEmpty(fileName) ? UrlEncoder.Default.Encode(fileName) : "Export")}")") : $"export/sampledb/products/excel(fileName="{(!string.IsNullOrEmpty(fileName) ? UrlEncoder.Default.Encode(fileName) : "Export")}")";
url = navigationManager.BaseUri + url;
var response = await httpClient.GetAsync(url);
var fileBytes = await response.Content.ReadAsByteArrayAsync();
return fileBytes;
}
Далее мы изменим файл «Products.razor.designer.cs», чтобы обновить этот файл двумя способами:
1. с использованием Visual Studio Designer.cs и метафайлов json
2. использование инструмента radzen для обновления кода
После того, как вы успешно обновите свой код, вы увидите следующий код метода в файле Designer.cs
protected async System.Threading.Tasks.Task Splitbutton0Click(RadzenSplitButtonItem args)
{
await Export();
}
Далее нам нужно добавить метод экспорта в разделяемый класс в product.razor.cs.
Поэтому инструмент Radzen не должен удалять или обновлять его при запуске из Radzen.
using System;
using System.Linq;
using System.Collections.Generic;
using System.Threading.Tasks;
using Radzen;
using Radzen.Blazor;
using Microsoft.JSInterop;
namespace ExportOperations.Pages
{
public partial class ProductsComponent
{
public async Task Export()
{
byte[] response = await SampleDb.ExportProductsToExcel(new Query() { Filter = $@"{grid0.Query.Filter}", OrderBy = $"{grid0.Query.OrderBy}", Expand = "", Select = "Id,ProductName,ProductPrice,ProductPicture" }, $"Products");
await JSRuntime.InvokeAsync<object>("saveAsFile", $"MyFile.xlsx", Convert.ToBase64String(response));
}
}
}
Наше основное внимание сосредоточено на двух линиях
byte[] response = await SampleDb.ExportProductsToExcel(new Query() { Filter = $@"{grid0.Query.Filter}", OrderBy = $"{grid0.Query.OrderBy}", Expand = "", Select = "Id,ProductName,ProductPrice,ProductPicture" }, $"Products");
await JSRuntime.InvokeAsync<object>("saveAsFile", $"MyFile.xlsx", Convert.ToBase64String(response));
Следующим шагом является создание метода «saveAsFile» в файле js и включение его ссылки в файл _host.cshtml. Также не забудьте включить файл _host.cshtml в список radzen ingnor в файле app.json.
Например, прямое изменение или использование инструмента Radzen.
файл app.json будет выглядеть так
{
"dataSources": [
"SampleDB"
],
"generator": "@radzen/blazor-server",
"https": false,
"ignore": [
"_Host.cshtml"
],
"layouts": [
"Login",
"Main"
],
"logo": "",
"name": "ExportOperations",
"navigation": [
"Products"
],
"pages": [
"Products",
"Add Product",
"Edit Product"
],
"port": 8000,
"serverLang": "cs",
"serverPort": 5000,
"serverProject": true,
"serverVersion": "3",
"startPage": "Products",
"theme": "default"
}
Добавить JS-файл
Допустим, мы добавляем файл export.js и добавляем в него следующий код.
window.saveAsFile = function (fileName, byteBase64) {
var link = this.document.createElement('a');
link.download = fileName;
link.href = "data:application/octet-stream;base64," + byteBase64;
this.document.body.appendChild(link);
link.click();
this.document.body.removeChild(link);
}
Теперь добавьте его ссылку в файл _Host.cshtml, который выглядит так:
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<script src="_framework/blazor.server.js"></script>
<script src="~/assets/js/export.js"></script>
Теперь я обновляю страницу продуктов, чтобы использовать код для экспорта с помощью Radzen Tool, это обновит products.razor.designer.cs .
Вот и все, мы решили проблему и теперь можем генерировать столько раз, сколько мы хотим использовать кнопку или функцию экспорта. Теперь не будет сбоя приложения.
Счастливая жизнь с Радзеном и Блейзором.
Кайсер Мехмуд,
Полный стек разработчиков | Архитектор решений | Блейзор | Реагировать | .Сетевое ядро
Таригри Шариф, Даска Сиалкот Пакистан.
