Live Chat Icon For mobile
Live Chat Icon

How do I generate and save a file client-side using Blazor?

Platform: Blazor| Category: General

Since there is no built-in functionality for saving files in Blazor, it is necessary to write the function in JavaScript and then invoke the JavaScript function from C# code in Blazor. In this solution, we have used JavaScript interop for file saving and generation in client-side Blazor.

  1. Create a new JavaScript file, saveFile.js, in the wwwroot folder and add the following code.

    function saveFile(file, Content) {
    var link = document.createElement('a'); = name;
    link.href = "data:text/plain;charset=utf-8," + encodeURIComponent(Content)

  2. Reference the new script file in the index.html page as shown.

        ………………………… . .
        <script src="_framework/blazor.webassembly.js"></script>
        <script src="saveFile.js"></script>

  3. Invoke the JavaScript function in a new Razor page.

    page "/savefile"
    @inject IJSRuntime JSRuntime
    <h1>Blazor Save & Generate File</h1><textarea @bind="fileContent"
    style="width:150px;height:100px" />
    <button @onclick="SaveFile">SaveFile</button>
    <button @onclick="DownloadFile">GenerateFile</button>
    @code {
        string Content;
        string fileContent;
        string fileName = "file.txt";
        public  void SaveFile()
           Content = fileContent;
        public async void DownloadFile()
            await JSRuntime.InvokeAsync<object>("saveFile",fileName,Content);

  4. Run the app. Save and generate the file in text format.

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.