Blazor Razor component create pdf download link

Question

I have been butting my head on this for a few days now and cant figure it out. How do I create a download link in a Blazor Razor component with a local file url for a pdf.

@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"
      );
    }
 }

and js file

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

Here's a sample JS Interop function that gives the end user the download prompts:

    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);
            });
    }

Here's how I call it from the Blazor app:

        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);
            }
        }

What's left in this is to obtain your byte[] from the file. How you do that will depend on your use case and app, here are a couple of common cases:

• in a server-side Blazor app, your C# already runs on the server, so you can inject an IWebHostEnvironment and get the webroot path from it to access your file - something like var path = _hostingEnvironment.WebRootPath + \\myfile.txt and then just read from that path. THen call the JS Interop

• in WASM app, you don't have a file system. So, you need to have that data in memory - whether you got it from a file selector, or from some WebAPI endpoint, or even generated it in C#, is up to the particular use case.