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

【问题标题】：Is there a way in Blazor to prompt the user to browse to a local folder and select it for downloading a file?Blazor 中有没有办法提示用户浏览到本地文件夹并选择它来下载文件？
【发布时间】：2022-06-16 17:11:07
【问题描述】：

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

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

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

有谁知道如何让用户轻松访问此类文件？谢谢。

【问题讨论】：

blazor wasm 还是服务器？
"来自本地机器。"您是指 Web 服务器还是托管网页的浏览器？
您可以将 pdf 保存在内存中，直到用户希望“下载”它。但是如果没有文件上传，你就不能从用户的电脑上读取一些随机文件。这不是 blazor 限制，而是浏览器限制。除非您走电子路线并将网络浏览器托管在您控制的程序中。
如果您希望能够按照服务器规定的某个时间表将文件推送到用户计算机上的某个位置，您可能最好考虑创建一个用户运行的应用程序，例如 Dropbox，当服务器准备好文件时，它会连接并接收/写入文件
你想做的事情并非不可能。例如，请参阅来自 Syncfusion 的 Blazor 文件管理器：syncfusion.com/blazor-components/blazor-file-manager 但是，处理此问题的更标准方法是简单地使用一个按钮，用户在完成上传图像时单击该按钮。该按钮将触发 PDF 的生成并开始文件下载。

标签： c# pdf blazor

【解决方案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();
}

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

祝你好运:)

【讨论】：

是的，可能只是没有办法做我想做的事。谢谢。