Blazor Razor 组件创建 pdf 下载链接

Question

这几天我一直在思考这个问题，但无法弄清楚。如何在 Blazor Razor 组件中使用 pdf 的本地文件 url 创建下载链接。

@code {
string noteContent;
string fileName = "note.txt";

string path = @"E:\Attachments\test.txt";
Uri myUri = new Uri(@"E:\Attachments\test.txt");

public async void DownloadFile()
{
    //await JSRuntime.InvokeAsync<object>(
    //    "FileSaveAs",
    //    fileName,
    //    noteContent
    //);

   await JSRuntime.InvokeAsync<object>(
   "downloadURI",
   myUri,
   "test.txt"
      );
    }
 }

和js文件

function FileSaveAs(filename, fileContent) {
    var link = document.createElement('a');
    link.download = filename;
    link.href = "data:text/plain;charset=utf-8," + 
    encodeURIComponent(fileContent)
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

function downloadURI(uri, name) {
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;enter code here
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    delete link;
}

Answer 1

这是一个示例 JS 互操作函数，它为最终用户提供下载提示：

    window.saveFile = function (bytesBase64, mimeType, fileName) {
        var fileUrl = "data:" + mimeType + ";base64," + bytesBase64;
        fetch(fileUrl)
            .then(response => response.blob())
            .then(blob => {
                var link = window.document.createElement("a");
                link.href = window.URL.createObjectURL(blob, { type: mimeType });
                link.download = fileName;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
    }

这是我从 Blazor 应用程序中调用它的方式：

        public static void Save(IJSRuntime jsRuntime, byte[] byteData, string mimeType, string fileName)
        {
            if (byteData == null)
            {
                jsRuntime.InvokeVoidAsync("alert", "The byte array provided for Exporting was Null.");
            }
            else
            {
                jsRuntime.InvokeVoidAsync("saveFile", Convert.ToBase64String(byteData), mimeType, fileName);
            }
        }

剩下的就是从文件中获取您的byte[]。具体操作方式取决于您的用例和应用，以下是一些常见情况：

• 在服务器端 Blazor 应用程序中，您的 C# 已经在服务器上运行，因此您可以注入 IWebHostEnvironment 并从中获取 webroot 路径以访问您的文件 - 类似于 var path = _hostingEnvironment.WebRootPath + \\myfile.txt 然后只需从该路径读取。然后调用 JS Interop

• 在 WASM 应用程序中，您没有文件系统。因此，您需要将这些数据保存在内存中——无论您是从文件选择器，还是从某个 WebAPI 端点获取，甚至是在 C# 中生成，都取决于特定的用例。