Articles in this section
Category / Section

How to export the QR code in a Blazor Server project to a desired location using a memory stream?

5 mins read

Overview
This article outlines the steps to generate a QR code using Syncfusion® Blazor components, export it as an image, and convert that image to a PDF file. Follow the steps below to successfully implement this functionality in your Blazor Server project.

Steps to Export QR Code as PDF

Step 1: Create a Blazor Server Application
Start by creating a new Blazor Server application. You can follow the instructions provided in this getting started guide.

Step 2: Install Required Package
Ensure that you have the necessary package to export the QR code in PDF format.

Screenshot 2024-08-13 175424.png

Step 3: Import Required Namespaces
In your Blazor component, import the following namespaces:

@using Syncfusion.PdfExport
@using Syncfusion.Blazor.BarcodeGenerator
@using Syncfusion.Blazor.Buttons
@inject IJSRuntime JS 

Step 4: Create QR Code Generator and Export Button
Add the QR code generator and an export button in your Razor component:

<SfQRCodeGenerator Width="200px" Height="150px" Value="Syncfusion" @ref="QRcode">
   <QRCodeGeneratorDisplayText Text="Text"></QRCodeGeneratorDisplayText>
</SfQRCodeGenerator>
<SfButton Content="Export" @onclick="@OnExport"></SfButton> 

Step 5: Implement Code-Behind Logic
Define the logic for generating and exporting the QR code in the code-behind file:

code {
   private SfQRCodeGenerator QRcode;

   private async void OnExport()
   {
       var images = await QRcode.ExportAsBase64Image(BarcodeExportType.JPG);
       var pdforientation = PdfPageOrientation.Portrait;
       await ExportToPdf("QRcode", pdforientation, true, images);
   }

   private async Task<string> ExportToPdf(string fileName, PdfPageOrientation orientation, bool allowDownload, string images)
   {
       PdfDocument document = new PdfDocument();
       document.PageSettings.Orientation = orientation;
       document.PageSettings.Margins = new PdfMargins() { Left = 0, Right = 0, Top = 0, Bottom = 0 };
       string base64String = images;
       using (MemoryStream initialStream = new MemoryStream(Convert.FromBase64String(base64String.Split("base64,")[1])))
       {
           Stream stream = initialStream as Stream;
           PdfPage page = document.Pages.Add();
           PdfGraphics graphics = page.Graphics;
           PdfBitmap image = new PdfBitmap(stream);
           graphics.DrawImage(image, 0, 0);
       }
       using (MemoryStream memoryStream = new MemoryStream())
       {
           document.Save(memoryStream);
           memoryStream.Position = 0;
           base64String = Convert.ToBase64String(memoryStream.ToArray());

           if (allowDownload)
           {
               string directoryPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "Tickets", "QRCodes");
               string filePath = Path.Combine(directoryPath, fileName + ".pdf");

               // Ensure the directory exists
               if (!Directory.Exists(directoryPath))
               {
                   Directory.CreateDirectory(directoryPath);
               }

               // Rename the file if it already exists
               int fileIndex = 1;
               string originalFilePath = filePath;
               while (File.Exists(filePath))
               {
                   filePath = Path.Combine(directoryPath, $"{fileName} ({fileIndex}).pdf");
                   fileIndex++;
               }

               // Save the PDF file to the specified path
               await File.WriteAllBytesAsync(filePath, memoryStream.ToArray());

               Console.WriteLine($"File saved at: {filePath}");
               base64String = string.Empty;
           }
           else
           {
               base64String = "data:application/pdf;base64," + base64String;
           }

           document.Dispose();
       }

       return base64String;
   }
} 

OnExport Method Description
The OnExport method performs the following tasks:

  • Converts the QR code into a Base64 image string.
  • Calls the ExportToPdf method to generate a PDF containing the QR code image.

The following screenshot illustrates the output of the above sample.

Screenshot 2024-08-13 181322.png

You can download the complete working sample from here.

Conclusion
I hope you enjoyed learning explains how to generate a QR code using the Syncfusion Blazor components, export it as an image, and then convert that image to a PDF file.

You can refer to our Blazor QRCode 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 Blazor Barcode Sample 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 forums, Direct-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 (0)
Please  to leave a comment
Access denied
Access denied