How to download the XML file on Blazor ?


In my recent project I got the requirement to download the Xml file, I did like this

Step 1: Create the Js folder on wwwroot folder and create download.js file

Step 2: Write Javascript code for download file like this

function BlazorDownloadFile(filename, contentType, content) {
    // Create the URL
    const file = new File([content], filename, { type: contentType });
    const exportUrl = URL.createObjectURL(file);

    // Create the <a> element and click on it
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.href = exportUrl;
    a.download = filename;
    a.target = "_self";
    a.click();

    // We don't need to keep the object URL, let's release the memory
    // On older versions of Safari, it seems you need to comment this line...
    URL.revokeObjectURL(exportUrl);
}

Step 3: Add the file on _layout.cshtml page like this

script src="Js/download.js"></script>

Step 4: On Razor page inject IJSRuntime

@inject IJSRuntime JSRuntime
protected async void SaveReport()
    {
        templateFolderPath = Path.Combine(Environment.ContentRootPath, "wwwroot", @"Payloads\Templates");
        string downloadfolerpath = Path.Combine(Environment.ContentRootPath, "wwwroot", "download");
        int report = Convert.ToInt32(objReporting.TypeOfBrReport);
        int fileType=Convert.ToInt32(objReporting.InputFileType);

        xmlDownloadContent=processReport.ProcessFile(report, fileType, path, templateFolderPath, reportConfig,downloadfolerpath);

        await JSRuntime.InvokeVoidAsync("BlazorDownloadFile", "File.xml", "application/xml", xmlDownloadContent);

    }
Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.