Articles in this section
Category / Section

How to create a PDF file in Blazor using C#?

3 mins read

Creating a Blazor project

  • Enable Visual Studio to use preview SDKs:
  • Open Tools > Options in the menu bar.
  • Open the Projects and Solutions node. Open the .NET Core tab.
  • Check the box for Use previews of the .NET Core SDK. Select OK.
  • Restart the Visual Studio 2019.
  • Create a new project

Create a new Blazor project

  • Select Blazor App. Select Next.

Set project name and location

  • Select Blazor Server APP.

Select Project Type

Creating a PDF file in Blazor

Syncfusion PDF NuGet Reference

  • Add the following namespace in the Index.razor to create a PDF document from the scratch.
    @using Syncfusion.Pdf;
    @using Syncfusion.Pdf.Graphics;
    @using System.IO;
    @inject Microsoft.JSInterop.IJSRuntime JS
    
  • Add a button and hook the click event function.
    <button class="btn btn-primary" @onclick="@CreatePDF">Create PDF</button>
    
  • Add the following code to create a PDF file in Blazor. 
    @functions {
     
        void CreatePDF()
        {
            //Create a new PDF document
            PdfDocument document = new PdfDocument();
     
            //Add a page to the document
            PdfPage page = document.Pages.Add();
     
            //Create PDF graphics for the page
            PdfGraphics graphics = page.Graphics;
     
            //Set the standard font
            PdfFont font = new PdfStandardFont(PdfFontFamily.Helvetica, 20);
     
            //Draw the text
            graphics.DrawString("Hello World!", font, PdfBrushes.Black, new Syncfusion.Drawing.PointF(0, 0));
     
            //Saving the PDF to the MemoryStream
            MemoryStream stream = new MemoryStream();
     
            document.Save(stream);
            document.Close(true);
     
     
            //Download the PDF in the browser.
        }
     
    }
    

To save the pdf document in the project folder:

  • Add the following code snippet in the created class file to save the pdf document in the project folder itself:
    System.IO.Stream output;
    output = System.IO.File.OpenWrite("output.pdf");
     
    //Save the document.
    doc.Save(output);
     
    //Close the document.
    doc.Close(true);
    output.Close();
    

 

To download the PDF file in browser

Create a class file with FileUtil name and add the following code to invoke the JavaScript action to download the file in the browser.

  • Add the following code in the created class file.
    public static class FileUtil
        {
            public static ValueTask<object> SaveAs(this IJSRuntime js, string filename, byte[] data)
                => js.InvokeAsync<object>(
                    "saveAsFile",
                    filename,
                    Convert.ToBase64String(data));
        }
    
  • Add the following JavaScript function in the _Host.cshtml in the pages folder.
    <script type="text/javascript">
            function saveAsFile(filename, bytesBase64) {
                if (navigator.msSaveBlob) {
                    //Download document in Edge browser
                    var data = window.atob(bytesBase64);
                    var bytes = new Uint8Array(data.length);
                    for (var i = 0; i < data.length; i++) {
                        bytes[i] = data.charCodeAt(i);
                    }
                    var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
                    navigator.msSaveBlob(blob, filename);
                }
                else {
                    var link = document.createElement('a');
                    link.download = filename;
                    link.href = "data:application/octet-stream;base64," + bytesBase64;
                    document.body.appendChild(link); // Needed for Firefox
                    link.click();
                    document.body.removeChild(link);
                }
            }
      </script>
    
  • Finally, add the following code in the Index.razor.
    //Download the PDF in the browser.
    JS.SaveAs("Sample.pdf", stream.ToArray());
    
  • The complete code of the PDF creation will look like below.
    @functions {
     
        void CreatePDF()
        {
            //Create a new PDF document
            PdfDocument document = new PdfDocument();
     
            //Add a page to the document
            PdfPage page = document.Pages.Add();
     
            //Create PDF graphics for the page
            PdfGraphics graphics = page.Graphics;
     
            //Set the standard font
            PdfFont font = new PdfStandardFont(PdfFontFamily.Helvetica, 20);
     
            //Draw the text
            graphics.DrawString("Hello World!", font, PdfBrushes.Black, new Syncfusion.Drawing.PointF(0, 0));
     
            //Saving the PDF to the MemoryStream
            MemoryStream stream = new MemoryStream();
     
            document.Save(stream);
     
            document.Close(true);
     
            //Download the PDF in the browser.
            JS.SaveAs("Sample.pdf", stream.ToArray());
     
        }
     
    }
    

You can download the sample from BlazorPDFGettingStarted.zip

By executing the program, you will get the PDF file as follows.

Output PDF Document

Take a moment to peruse the documentation, where you can find other options like drawing right-to-left text and multi-column text, consuming TrueType fonts, Standard fonts, and CJK fonts. Also, the features like PDF form filling, convert HTML to PDF , and protect PDF documents with code examples.

Refer here to explore the rich set of Syncfusion Essential PDF features.

Conclusion

I hope you enjoyed learning about how to create a PDF file in Blazor using C#.

You can refer to our .NET Core PDF feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET Core PDF example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied