Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Download 文件下载

用于直接下载物理文件

<Download />

调用注入服务 DownloadService

Demo

特别注意:

Blazorjs 的交互使用了 json,在 ssr 模式中,json 最大传输大小是 125M,这是 asp.net core 的限制。并且由于 jsonjsblob 非常非常慢,所以大文件请谨慎,建议只在类似页面文件导出、报表图片下载等页面自行完成的内容中使用。 其他例如服务器文件下载等依旧使用 Controller 来完成。如果下载大文件请自行仔细测试

示例:
Razor 代码
<Button OnClick="DownloadFile">点我下载文件</Button>
C# 代码
private async Task DownloadFileAsync()
{
    var content = await GenerateFileAsync();
    await downloadService.DownloadAsync("测试文件", content);

    static async Task<byte[]> GenerateFileAsync()
    {
        using var ms = new MemoryStream();
        using var writer = new StreamWriter(ms);
        await writer.WriteLineAsync("自行生成并写入的文本,这里可以换成图片或其他内容");
        await writer.FlushAsync();
        ms.Position = 0;
        return ms.ToArray();
    }
}

这里模拟生成了一个 100万行 的文本文件,大概 56M,可以自行测试

Demo

按钮设置 IsAsync 值为 true 进行异步下载操作

模拟直接由前端页面生成验证码或者上传图片不保存直接显示的情况。

Demo

由于测试使用了wwwroot下的文件,没有代码生成,wasm无法访问wwwroot文件夹,故此测试只有ssr模式可用。wasm请自行测试。

@page "/downloads"

<h3>Download 文件下载</h3>

<h4>用于直接下载物理文件</h4>

<Tips>
    <p>
        本组件使用注入服务的形式提供功能,使用时用户体验效果非常舒适,随时随地的调用,需要在使用本组件的页面中内置 <code>Download</code> 组件,或者在 <code>MainLayout</code> 主布局组件中内置,示例代码如下:
    </p>
</Tips>

<Pre>&lt;Download /&gt;</Pre>

<Block Title="基本用法" Introduction="调用注入服务 <code>DownloadService</code>">
    <p>
        <b>特别注意:</b>
        <div>
            <code>Blazor</code> 与 <code>js</code> 的交互使用了 <code>json</code>,在 <code>ssr</code> 模式中,<code>json</code> 最大传输大小是 <b>125M</b>,这是 <code>asp.net core</code> 的限制。并且由于 <code>json</code> 转 <code>js</code> 的 <code>blob</code> 非常非常慢,所以大文件请谨慎,建议只在类似页面文件导出、报表图片下载等页面自行完成的内容中使用。
            其他例如服务器文件下载等依旧使用 <code>Controller</code> 来完成。如果下载大文件请自行仔细测试
        </div>
    </p>
    <div class="mb-3">
        示例:
        <Button Icon="fa fa-download" Text="下载文件" OnClick="@DownloadFileAsync"></Button>
    </div>
    <div><code>Razor</code> 代码</div>
    <Pre>&lt;Button OnClick=&quot;DownloadFile&quot;&gt;点我下载文件&lt;/Button&gt;</Pre>
    <div><code>C#</code> 代码</div>
    <Pre>private async Task DownloadFileAsync()
{
    var content = await GenerateFileAsync();
    await downloadService.DownloadAsync("测试文件", content);

    static async Task&lt;byte[]&gt; GenerateFileAsync()
    {
        using var ms = new MemoryStream();
        using var writer = new StreamWriter(ms);
        await writer.WriteLineAsync("自行生成并写入的文本,这里可以换成图片或其他内容");
        await writer.FlushAsync();
        ms.Position = 0;
        return ms.ToArray();
    }
}</Pre>
</Block>

<Block Title="大文件下载测试" Introduction="这里模拟生成了一个 <code>100万行</code> 的文本文件,大概 <b>56M</b>,可以自行测试">
    <p>按钮设置 <code>IsAsync</code> 值为 <code>true</code> 进行异步下载操作</p>
    <Button IsAsync="true" Icon="fa fa-download" Text="大文件下载" OnClickWithoutRender="DownloadLargeFileAsync"></Button>
</Block>

<Block Title="获取图片并显示" Introduction="模拟直接由前端页面生成验证码或者上传图片不保存直接显示的情况。">
    <p>由于测试使用了wwwroot下的文件,没有代码生成,wasm无法访问wwwroot文件夹,故此测试只有ssr模式可用。wasm请自行测试。</p>
    <img src="@TempUrl" style="width: 120px; height: auto;" />
</Block>

<Download></Download>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Options;
using System;
using System.Diagnostics.CodeAnalysis;
using System.IO;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// Title 网站标题示例代码
    /// </summary>
    public partial class Downloads
    {
        [Inject]
        [NotNull]
        private ToastService? ToastService { get; set; }

        [Inject]
        [NotNull]
        private DownloadService? downloadService { get; set; }

        [Inject]
        [NotNull]
        private IOptions<WebsiteOptions>? SiteOptions { get; set; }

        private string? TempUrl { get; set; }

        /// <summary>
        /// 渲染完成事件
        /// </summary>
        /// <param name="firstRender"></param>
        /// <returns></returns>
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);
            if (firstRender)
            {
                if (OperatingSystem.IsBrowser())
                {
                    await ToastService.Information("显示图片", "当前模式为 WebAssembly 模式,无法直接调用 wwwroot 文件夹,请自行生成图片测试。");
                }
                else
                {
                    var filePath = Path.Combine(SiteOptions.Value.WebRootPath, "favicon.png");
                    TempUrl = await downloadService.CreateUrlAsync("favicon.png", File.OpenRead(filePath),
                        "image/jpeg");
                    StateHasChanged();
                }
            }
        }

        private async Task DownloadFileAsync()
        {
            var content = await GenerateFileAsync();
            await downloadService.DownloadAsync("测试文件.txt", content);

            static async Task<byte[]> GenerateFileAsync()
            {
                using var ms = new MemoryStream();
                using var writer = new StreamWriter(ms);
                await writer.WriteLineAsync("自行生成并写入的文本,这里可以换成图片或其他内容");
                await writer.FlushAsync();
                ms.Position = 0;
                return ms.ToArray();
            }
        }

        private Task DownloadLargeFileAsync() => Task.Run(async () =>
        {
            using var stream = await GenerateFileStreamAsync();
            await downloadService.DownloadAsync("测试大文件.txt", stream);

            static async Task<Stream> GenerateFileStreamAsync()
            {
                var ms = new MemoryStream();
                var writer = new StreamWriter(ms);
                for (var i = 0; i < 1000; i++)
                {
                    await writer.WriteLineAsync($"这里是一个大文件下载示例,共循环100万次");
                }
                await writer.FlushAsync();
                ms.Position = 0;
                return ms;
            }
        });
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload