diff --git a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Blazor-Server-App.png b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Blazor-Server-App.png new file mode 100644 index 0000000..6822f2e Binary files /dev/null and b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Blazor-Server-App.png differ diff --git a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Blazor-web-app.png b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Blazor-web-app.png new file mode 100644 index 0000000..3adc8ee Binary files /dev/null and b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Blazor-web-app.png differ diff --git a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Blazor_server_NuGet.png b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Blazor_server_NuGet.png new file mode 100644 index 0000000..184d6fe Binary files /dev/null and b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Blazor_server_NuGet.png differ diff --git a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step1.png b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step1.png deleted file mode 100644 index 845b4eb..0000000 Binary files a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step1.png and /dev/null differ diff --git a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step2.png b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step2.png deleted file mode 100644 index af61d69..0000000 Binary files a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step2.png and /dev/null differ diff --git a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step3.png b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step3.png deleted file mode 100644 index 98d48a1..0000000 Binary files a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step3.png and /dev/null differ diff --git a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step_nuget.png b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step_nuget.png deleted file mode 100644 index ce11247..0000000 Binary files a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step_nuget.png and /dev/null differ diff --git a/Blazor/README.md b/Blazor/README.md index f295d80..00c263e 100644 --- a/Blazor/README.md +++ b/Blazor/README.md @@ -6,118 +6,138 @@ The Syncfusion® HTML to PDF converter is a .NET library used to convert HTML ## Steps to convert HTML to PDF in Blazor application -1. Create a new C# Blazor Server application project. Select Blazor App from the template and click the Next button. - Blazor_step1 - - In the project configuration window, name your project and select Create. - Blazor_step2 - Blazor_step3 - -2. Install the [Syncfusion.HtmlToPdfConverter.Net.Windows](https://www.nuget.org/packages/Syncfusion.HtmlToPdfConverter.Net.Windows/) NuGet package as a reference to your Blazor Server application from [NuGet.org](https://www.nuget.org/). - Blazor_step_nuget - -3. Create a new class file named ExportService under Data folder and include the following namespaces in the file. - - ```csharp - using Syncfusion.HtmlConverter; - using Syncfusion.Pdf; - using System.IO; - ``` - -4. Add the following code to convert HTML to PDF document in [ExportService](HTML_to_PDF_Blazor/Data/ExportService.cs) class. - - ```csharp - public MemoryStream CreatePdf(string url) - { - //Initialize HTML to PDF converter. - HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(); - //Convert URL to PDF document. - PdfDocument document = htmlConverter.Convert(url); - //Create memory stream. - MemoryStream stream = new MemoryStream(); - //Save the document to memory stream. - document.Save(stream); - return stream; - } - ``` - -5. Register your service in the ConfigureServices method available in the Startup.cs class as follows. - - ```csharp - /// - /// Register your ExportService - /// - public void ConfigureServices(IServiceCollection services) - { - services.AddRazorPages(); - services.AddServerSideBlazor(); - services.AddSingleton(); - services.AddSingleton(); - } - ``` - -6. Inject ExportService into FetchData.razor using the following code. - - ```csharp - @inject ExportService exportService - @inject Microsoft.JSInterop.IJSRuntime JS - @inject NavigationManager NavigationManager - @using System.IO; - ``` - -7. Create a button in the FetchData.razor using the following code. - - ```csharp - - ``` - -8. Add the ExportToPdf method in FetchData.razor page to call the export service. - - ```csharp - @code { - private string currentUrl; - /// - /// Get the current URL - /// - protected override void OnInitialized() - { - currentUrl = NavigationManager.Uri; - } - } - @functions - { - /// - /// Create and download the PDF document - /// - protected async Task ExportToPdf() - { - ExportService exportService = new ExportService(); - using (MemoryStream excelStream = exportService.CreatePdf(currentUrl)) - { - await JS.SaveAs("HTML-to-PDF.pdf", excelStream.ToArray()); - } - } - } - ``` - -9. Create a class file with FileUtil name and add the following code to invoke the JavaScript action to download the file in the browser. - - ```csharp - public static class FileUtil - { - public static ValueTask SaveAs(this IJSRuntime js, string filename, byte[] data) +1. Create a new C# Blazor server-side application project. Select **Blazor Web App** from the template and click the Next button. + Blazor_step1 + +2. In the project configuration window, name your project and select Create. + Blazor_step2 + +3. To create a PDF document in a Blazor Server app, install the [Syncfusion.PDF.Net.Core](https://www.nuget.org/packages/Syncfusion.pdf.Net.Core) package into the Blazor project. + Blazor_step_nuget + +Step 4: Create a new cs file named **ExportService.cs** under **Data** folder and include the following namespaces in the file. + +```csharp +using Syncfusion.Pdf; +using Syncfusion.Pdf.Graphics; +using Syncfusion.Pdf.Grid; +using Syncfusion.Drawing; +``` + +Step 5: The [PdfDocument](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.PdfDocument.html) object represents an entire PDF document that is being created. The [PdfTextElement](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.Graphics.PdfTextElement.html) adds text in a PDF document and provides the layout result of the added text by using the location of the next element that decides to prevent content overlapping. The [PdfGrid](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.Grid.PdfGrid.html) allows table creation by entering data manually or from external data sources. + +Add the following code sample in the `ExportService` class which illustrates how to create a simple PDF document using `PdfTextElement` and `PdfGrid`. + +```csharp +//Export weather data to PDF document. +public static MemoryStream CreatePdf(WeatherForecast[] forecasts) +{ + if (forecasts == null) + { + throw new ArgumentNullException("Forecast cannot be null"); + } + //Create a new PDF document. + using (PdfDocument pdfDocument = new PdfDocument()) + { + int paragraphAfterSpacing = 8; + int cellMargin = 8; + //Add page to the PDF document. + PdfPage page = pdfDocument.Pages.Add(); + //Create a new font. + PdfStandardFont font = new PdfStandardFont(PdfFontFamily.TimesRoman, 16); + + //Create a text element to draw a text in PDF page. + PdfTextElement title = new PdfTextElement("Weather Forecast", font, PdfBrushes.Black); + PdfLayoutResult result = title.Draw(page, new PointF(0, 0)); + PdfStandardFont contentFont = new PdfStandardFont(PdfFontFamily.TimesRoman, 12); + PdfTextElement content = new PdfTextElement("This component demonstrates fetching data from a service and Exporting the data to PDF document using Syncfusion .NET PDF library.", contentFont, PdfBrushes.Black); + PdfLayoutFormat format = new PdfLayoutFormat(); + format.Layout = PdfLayoutType.Paginate; + //Draw a text to the PDF document. + result = content.Draw(page, new RectangleF(0, result.Bounds.Bottom + paragraphAfterSpacing, page.GetClientSize().Width, page.GetClientSize().Height), format); + + //Create a PdfGrid. + PdfGrid pdfGrid = new PdfGrid(); + pdfGrid.Style.CellPadding.Left = cellMargin; + pdfGrid.Style.CellPadding.Right = cellMargin; + //Applying built-in style to the PDF grid. + pdfGrid.ApplyBuiltinStyle(PdfGridBuiltinStyle.GridTable4Accent1); + + //Assign data source. + pdfGrid.DataSource = forecasts; + pdfGrid.Style.Font = contentFont; + //Draw PDF grid into the PDF page. + pdfGrid.Draw(page, new Syncfusion.Drawing.PointF(0, result.Bounds.Bottom + paragraphAfterSpacing)); + + using (MemoryStream stream = new MemoryStream()) + { + //Saving the PDF document into the stream. + pdfDocument.Save(stream); + //Closing the PDF document. + pdfDocument.Close(true); + return stream; + } + } +} +``` + +Step 6: Register the service in the `Program.cs` class as follows. + +```csharp +services.AddRazorPages(); +services.AddServerSideBlazor(); +services.AddSingleton(); +services.AddSingleton(); +``` + +Step 7: Inject `ExportService` into `Weather.razor` using the following code. + +```csharp +@inject ExportToFileService exportService +@inject Microsoft.JSInterop.IJSRuntime JS +@using System.IO; + +``` + +Create a button in the `Weather.razor` using the following code. + +```csharp + +``` + +Add the `ExportToPdf` method in `Weather.razor` page to call the export service. + +```csharp +@functions +{ + protected async Task ExportToPdf() + { + using (MemoryStream excelStream = ExportService.CreatePdf(forecasts)) + { + await JS.SaveAs("Sample.pdf", excelStream.ToArray()); + } + } +} +``` + +Step 8: Include the `FileUtil` class within the `ExportService.cs` file to enable file-related operations as part of the export functionality. + +```csharp +public static class FileUtil +{ + public static ValueTask SaveAs(this IJSRuntime js, string filename, byte[] data) => js.InvokeAsync( "saveAsFile", filename, Convert.ToBase64String(data)); - } - ``` +} +``` -10. Add the following JavaScript function in the _Host.cshtml available under the Pages folder. +Step 9: Add the following JavaScript function in the `App.razor` available under the `Components` folder. - ```csharp - - ``` + + +``` + +Step 10: Build the project. + +Click on Build > Build Solution or press Ctrl + Shift + B to build the project. + +Step 11: Run the project. + +Click the Start button (green arrow) or press F5 to run the app. + +The following output appears in the browser after executing the program. +Blazor_step4 - By executing the program, you will get the following output in the browser. - Blazor_step4 - Click the Export to PDF button, and you will get the PDF document with the following output. - HTMLTOPDF +Click the `Export to PDF` button to obtain the PDF document with the following output. +HTMLTOPDF