How to Convert HTML to PDF in Umbraco Cloud in ASP.NET Web Forms?

Syncfusion® HTML to PDF for .NET is used to convert webpages, SVG, MHTML, and HTML to PDF. Using this library, you can convert HTML to PDF in Azure App Service on Umbraco Cloud.

Steps to convert HTML to PDF in Umbraco Cloud:

1. Kindly install the Umbraco Cloud templates in Visual Studio using the following command:

dotnet new install Umbraco.Templates

2. Create a new Umbraco project.
3. Install the Syncfusion.HtmlToPdfConverter.Net.Windows NuGet package as a reference to your .NET Core application from NuGet.org.
4. Create a new controller named PdfController and include the following namespaces in PdfController.cs:

using Microsoft.AspNetCore.Mvc;
using Syncfusion.HtmlConverter;
using Syncfusion.Pdf;
using Umbraco.Cms.Web.Common.Controllers;

5. Add a new method named ConvertHtmlToPdf and ConvertUrlToPdf in the PdfController.cs file and include the following code example to convert HTML to PDF document in PdfController.cs.

[HttpPost]
public FileResult ConvertHtmlToPdf([FromBody] string url)
{
   byte[] pdfBytes = ConvertUrlToPdf(url);
   return File(pdfBytes, "application/pdf", "HtmlToPDF.pdf");
}
private byte[] ConvertUrlToPdf(string url)
{
   // Initialize HTML to PDF converter.
   HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter();
   BlinkConverterSettings blinkConverterSettings = new BlinkConverterSettings();
   // Set Blink viewport size.
   blinkConverterSettings.ViewPortSize = new Syncfusion.Drawing.Size(1280, 0);
   // Assign Blink converter settings to HTML converter.
   htmlConverter.ConverterSettings = blinkConverterSettings;
   // Convert URL to PDF document.
   PdfDocument document = htmlConverter.Convert("https://www.syncfusion.com");
   // Create memory stream.
   MemoryStream stream = new MemoryStream();
   // Save and close the document. 
   document.Save(stream);
   document.Close();
   stream.Position = 0;
   return stream.ToArray();
}

6. Run the sample and login with the credentials.
7. Add a new template in Umbraco.
8. Create a new page named Home to convert HTML to PDF.
9. Enable the permission to allow as root.
10. Add a new button in the Home.cshtml as follows.

<button id="convertBtn">Convert to PDF</button>
<script>
   document.getElementById('convertBtn').addEventListener('click', function () {
       // Send AJAX request to the controller.
       fetch('/umbraco/api/pdf/convertHtmlToPdf', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json'
           },
       })
           .then(response => response.blob())
           .then(blob => {
               // Create a link to download the PDF.
               var url = window.URL.createObjectURL(blob);
               var a = document.createElement('a');
               a.href = url;
               a.download = 'output.pdf';
               document.body.appendChild(a);
               a.click();
               document.body.removeChild(a);
               window.URL.revokeObjectURL(url);
           })
           .catch(error => console.error('Error:', error));
   });
</script> 

11. Now, run the application. The website will open in the browser, and you can then convert HTML to PDF.

By converting HTML to PDF, you will get the PDF document as follows.

You can download a complete working sample from the HTMLtoPDF_Umbraco.zip.

Take a moment to peruse the documentation for Converting HTML to PDF, where you will find various options for URL to PDF, HTML string to PDF, and Hyperlinks.

Note

A new version of Essential Studio® for ASP.NET is available. Versions prior to the release of Essential Studio® 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.

Conclusion
I hope you enjoyed learning about how to convert HTML to PDF in Umbraco cloud in ASP.NET Web Forms.

The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio® for ASP.NET. Although Syncfusion® will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.

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!