如何在Blazor中引导用户选择PDF文件存储位置（基于QuestPDF）

1. Blazor中实现目录选择对话框 #

Blazor没有原生的目录选择UI，需要通过JavaScript互操作调用浏览器的File System Access API（现代浏览器支持）来实现目录选择。核心是调用showDirectoryPicker()方法获取用户选择的目录权限，之后可在该目录下创建并写入PDF文件。

如果需要兼容旧版浏览器，也可以使用带有webkitdirectory属性的<input type="file">，但这种方式仅能获取目录下的文件列表，无法直接写入文件，更推荐使用File System Access API。

2. Blazor/QuestPDF的辅助功能 #

• Blazor：无直接相关内置功能，需依赖JS互操作完成文件系统交互。
• QuestPDF：仅负责PDF内容生成（生成字节流或内存中的PDF数据），不涉及文件存储逻辑，需自行处理生成后的字节流写入用户选择的目录。

完整实现示例 #

步骤1：添加JS互操作代码 #

在wwwroot/js目录下创建fileInterop.js，写入以下代码：

window.fileHelpers = {
    // 选择目录并返回目录句柄
    async selectDirectory() {
        try {
            const directoryHandle = await window.showDirectoryPicker();
            return directoryHandle;
        } catch (err) {
            console.error("选择目录失败:", err);
            return null;
        }
    },
    // 将PDF字节流写入指定目录的文件
    async savePdfToDirectory(directoryHandle, fileName, pdfBytes) {
        if (!directoryHandle) return false;
        
        try {
            // 创建文件句柄
            const fileHandle = await directoryHandle.getFileHandle(fileName, { create: true });
            // 创建可写流并写入数据
            const writable = await fileHandle.createWritable();
            await writable.write(new Uint8Array(pdfBytes));
            await writable.close();
            return true;
        } catch (err) {
            console.error("保存PDF失败:", err);
            return false;
        }
    }
};

在_Host.cshtml（Server Side）或index.html（WASM）中引入该JS文件：

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

步骤2：Blazor组件代码 #

@page "/pdf-generator"
@inject IJSRuntime JSRuntime

<h3>生成并保存PDF</h3>

<button class="btn btn-primary" @onclick="GenerateAndSavePdf">生成PDF并选择目录保存</button>

@code {
    private async Task GenerateAndSavePdf()
    {
        // 1. 使用QuestPDF生成PDF字节流
        var pdfBytes = GeneratePdfContent();
        
        // 2. 调用JS选择目录
        var directoryHandle = await JSRuntime.InvokeAsync<IJSObjectReference>("fileHelpers.selectDirectory");
        if (directoryHandle == null)
        {
            // 用户取消选择或出错
            return;
        }
        
        // 3. 调用JS保存PDF到选择的目录
        var fileName = $"生成的文档_{DateTime.Now:yyyyMMddHHmmss}.pdf";
        var saveSuccess = await JSRuntime.InvokeAsync<bool>("fileHelpers.savePdfToDirectory", directoryHandle, fileName, pdfBytes);
        
        if (saveSuccess)
        {
            Console.WriteLine("PDF保存成功");
        }
        else
        {
            Console.WriteLine("PDF保存失败");
        }
    }
    
    // QuestPDF生成PDF的示例方法
    private byte[] GeneratePdfContent()
    {
        return QuestPDF.Fluent.Document.Create(container =>
        {
            container.Page(page =>
            {
                page.Size(QuestPDF.Infrastructure.PageSizes.A4);
                page.Margin(2, QuestPDF.Infrastructure.Unit.Centimetre);
                page.Header().Text("我的Blazor生成PDF").FontSize(20).Bold();
                page.Content().PaddingVertical(1, QuestPDF.Infrastructure.Unit.Centimetre)
                    .Text("这是用QuestPDF生成的示例文档内容");
                page.Footer().Text($"生成时间: {DateTime.Now:yyyy-MM-dd HH:mm:ss}").AlignCenter();
            });
        }).GeneratePdf();
    }
}

注意事项 #

• 浏览器兼容性：showDirectoryPicker()支持Chrome 86+、Edge 86+、Opera 72+，Firefox需开启相关配置。如果需要兼容更多浏览器，可考虑回退到直接下载方式（让浏览器下载文件，用户手动选择保存位置），无需目录选择，直接用JS的download属性实现。
• 权限问题：File System Access API必须由用户主动触发（如点击按钮），自动调用会被浏览器阻止。
• QuestPDF依赖：确保已安装QuestPDF NuGet包：Install-Package QuestPDF

内容的提问来源于stack exchange，提问作者Svene