Excel 내보내기를 포함한 Blazor 서버를 사용한 간단한 암호화폐 앱

어떤 이유로 Blazor Server로 개발하는 것을 좋아하기 시작했는데, 그 이유는 주로 개발의 신속성과 단순성 때문이었습니다. 개발 속도를 높이기 위해 일부 무료 구성 요소 라이브러리를 사용하는 경향이 있습니다. 여전히 Blazor Server에 대한 모든 경험이 튜토리얼/실험 수준에 불과하다는 점을 언급하고 싶습니다.

이것은 Blazor Server를 배우고 Cryptocurrencies에 익숙해지는 응용 프로그램 일 뿐이며 다른 목적은 없습니다.

이 앱의 전제 조건:

기본 Blazor 서버(이전 자습서 참조)

앱에 Radzen 구성 요소 설치 참조https://blazor.radzen.com/get-started

CoinPaprika Api용 C# 래퍼 사용(암호화폐 정보 가져오기)https://github.com/MSiccDev/CoinpaprikaAPI

코드 저장소: https://github.com/zoltanhalasz/BlazorCoins

신청서는 아래에 있습니다: https://blazorcoins.zoltanhalasz.net/

앱은 다음과 같은 방식으로 작동합니다.

경로/cointable은 API를 사용하여 상위 100개의 암호화 통화를 표시합니다.

각 통화별 세부 정보를 클릭하면 경로/coinhistory에 선택한 통화에 대한 차트 및 과거 데이터가 표시됩니다.

경로/coingrid는 Radzen Grid에서만 1)과 정확히 동일한 정보를 표시합니다.

보너스:

이 앱에는 내보내기 Excel 기능이 있으며 다음을 수행하여 달성할 수 있습니다.

wwwroot/js/DownloadExcel.js 생성

function saveAsExcel(fileName, byteContent) {
    var link = document.createElement('a');
    link.download = fileName;
    console.log(fileName);
    link.href = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,' + byteContent;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

다른 스크립트 바로 아래 _Host.cshtml 맨 아래에 파일 참조를 포함합니다.

    <script src="/js/DownloadExcel.js"></script>

Nuget 패키지를 통해 최신 EPPlus 설치

/cointable 페이지(또는 Excel에서 내보내야 하는 위치)에 버튼에 대한 마크업을 삽입합니다.

 <button class="btn btn-primary" @onclick="GenerateExcel">Download</button>

Excel 내보내기를 사용하려는 페이지 상단에 다음을 포함합니다.

@inject IJSRuntime iJSRuntime;

Excel에서 내보내야 하는 목록이 있는 페이지의 코드 섹션에서 GenerateExcel에 대한 처리기를 작성합니다.

private async Task DownloadExcel(IJSRuntime myJSRuntime)
{
        byte[] file;
        if (coinList == null) return;
        ExcelPackage.LicenseContext = LicenseContext.NonCommercial;
        using (var package = new ExcelPackage())
        {
            var worksheet = package.Workbook.Worksheets.Add("Sheet1");
            worksheet.Cells.LoadFromCollection(coinList, true);
            package.Save();
            file = package.GetAsByteArray();
        }

        await myJSRuntime.InvokeAsync<List<CoinInfo>>("saveAsExcel", "CoinList.xlsx", Convert.ToBase64String(file));
    }

    private async Task GenerateExcel()
    {
        await DownloadExcel(iJSRuntime);
    }