How to create a PDF file in Blazor using C#

Creating a PDF document from the scratch using Syncfusion .NET Core library is easy. This article explains how to create a PDF file in Blazor framework using C#.

Prerequisites

• Visual Studio 2019
• Install .NET Core SDK 6.0 (https://dotnet.microsoft.com/en-us/download/dotnet/6.0)

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

• Select Blazor App. Select Next.

• Select Blazor Server APP.

Creating a PDF file in Blazor

• To create a PDF file, install Syncfusion.PDF.Net.Core to the Blazor project.

• 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.

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.