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.