c# - Blazor 中有没有办法提示用户浏览到本地文件夹并选择它来下载文件？

Question

用户需要能够上传一堆图像，我的应用程序会将这些图像合并到一个 PDF 中。然后，用户需要能够将该 PDF 保存到本地计算机。我的 Blazor C# 应用程序使用 提示用户从本地计算机中选择一个或多个图像。然后，该应用程序创建 PDF 文件并向其中添加图像。我需要一种方法让用户指定他们想要保存 PDF 的位置。或者，如果失败，我需要一种方法将其保存到预先确定的文件夹(应用程序文件夹或其他文件夹)和固定名称(例如 mergedImages.pdf)，然后在浏览器窗口中打开保存的文件，用户可以从中打开保存的文件可以将其下载到任何他们想要的地方。

我尝试添加一个带有指向下载文件的 href 的按钮，但浏览器总是阻止该链接，返回错误:“不允许加载本地资源:file:///D:/IVG_Blazor/MergeImagesIntoPDF/mergedImages.pdf”。

我想到的另一种方法是将 PDF 写入下载文件夹，并在页面底部显示一个图标，为用户提供“打开”、“始终打开此类型的文件”、“显示”选项在文件夹中”，“取消”。但我不知道如何实现。

有谁知道如何让用户轻松访问这样的文件？谢谢。

Answer 1

据我了解，您可以获得合并操作的结果，我假设它是 Stream 或字节数组。您希望用户能够下载它，并且用户应该能够将其保存在特定文件夹中。

根据这篇文章，第二点似乎是不可能:Download A File At Different Location Using HTML5

对于第一点，用户能够下载合并的 PDF 文件，所要做的就是拥有 Stream(或字节数组)，并拥有一个 javascript 函数来执行此操作。

C#:

private async Task DownloadFileFromStream(Stream fileStream, string fileName)
{
    using var streamRef = new DotNetStreamReference(stream: fileStream);
    await jsRuntime.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef);
}

Javascript:

async function downloadFileFromStream(fileName, contentStreamReference) {
    const arrayBuffer = await contentStreamReference.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);

    triggerFileDownload(fileName, url);

    URL.revokeObjectURL(url);
}

function triggerFileDownload(fileName, url) {
    const anchorElement = document.createElement('a');
    anchorElement.href = url;
    anchorElement.download = fileName ?? '';
    anchorElement.click();
    anchorElement.remove();
}

它将触发浏览器的下载过程。

祝你好运:)