diff --git a/ASP.NET Core/HTML_to_PDF_Core/htmlconversion_images/Core_sample_creation_step3.png b/ASP.NET Core/HTML_to_PDF_Core/htmlconversion_images/Core_sample_creation_step3.png index 9232939..39688ba 100644 Binary files a/ASP.NET Core/HTML_to_PDF_Core/htmlconversion_images/Core_sample_creation_step3.png and b/ASP.NET Core/HTML_to_PDF_Core/htmlconversion_images/Core_sample_creation_step3.png differ diff --git a/ASP.NET Core/HTML_to_PDF_Core/htmlconversion_images/Core_sample_creation_step4.png b/ASP.NET Core/HTML_to_PDF_Core/htmlconversion_images/Core_sample_creation_step4.png index be7d48e..568ab8a 100644 Binary files a/ASP.NET Core/HTML_to_PDF_Core/htmlconversion_images/Core_sample_creation_step4.png and b/ASP.NET Core/HTML_to_PDF_Core/htmlconversion_images/Core_sample_creation_step4.png differ diff --git a/ASP.NET MVC/HTML_to_PDF_MVC/htmlconversion_images/MVC_sample_creation_step4.png b/ASP.NET MVC/HTML_to_PDF_MVC/htmlconversion_images/MVC_sample_creation_step4.png index 4f066db..7078130 100644 Binary files a/ASP.NET MVC/HTML_to_PDF_MVC/htmlconversion_images/MVC_sample_creation_step4.png and b/ASP.NET MVC/HTML_to_PDF_MVC/htmlconversion_images/MVC_sample_creation_step4.png differ 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 deleted file mode 100644 index 6822f2e..0000000 Binary files a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Blazor-Server-App.png and /dev/null 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 deleted file mode 100644 index 3adc8ee..0000000 Binary files a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Blazor-web-app.png and /dev/null 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 deleted file mode 100644 index 184d6fe..0000000 Binary files a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Blazor_server_NuGet.png and /dev/null differ diff --git a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/HtmlBlazorOutput.png b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Output.png similarity index 100% rename from Blazor/HTML_to_PDF_Blazor/htmlconversion_images/HtmlBlazorOutput.png rename to Blazor/HTML_to_PDF_Blazor/htmlconversion_images/Output.png diff --git a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step1.png b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step1.png new file mode 100644 index 0000000..845b4eb Binary files /dev/null and b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step1.png 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 new file mode 100644 index 0000000..af61d69 Binary files /dev/null and b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step2.png 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 new file mode 100644 index 0000000..23188d2 Binary files /dev/null and b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/blazor_step_nuget.png differ diff --git a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/htmltopdfoutput.png b/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/htmltopdfoutput.png deleted file mode 100644 index b9b584c..0000000 Binary files a/Blazor/HTML_to_PDF_Blazor/htmlconversion_images/htmltopdfoutput.png and /dev/null differ diff --git a/Blazor/README.md b/Blazor/README.md index 00c263e..271dd31 100644 --- a/Blazor/README.md +++ b/Blazor/README.md @@ -1,4 +1,4 @@ -##### Example: Blazor + ##### Example: Blazor # Convert HTML to PDF file in Blazor using C# @@ -6,166 +6,150 @@ 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-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()) +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 + +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 { - 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; - } + public static ValueTask SaveAs(this IJSRuntime js, string filename, byte[] data) + => js.InvokeAsync( + "saveAsFile", + filename, + Convert.ToBase64String(data)); } -} -``` -Step 6: Register the service in the `Program.cs` class as follows. + ``` -```csharp -services.AddRazorPages(); -services.AddServerSideBlazor(); -services.AddSingleton(); -services.AddSingleton(); -``` +10. Add the following JavaScript function in the _Host.cshtml available under the Pages folder. -Step 7: Inject `ExportService` into `Weather.razor` using the following code. + ```csharp -```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)) + - -``` + -Step 10: Build the project. + ``` +11. Build the project. Click on Build > Build Solution or press Ctrl + Shift + B to build the project. -Step 11: Run the project. +12. Run the project. Click the Start button (green arrow) or press F5 to run the app. @@ -173,4 +157,4 @@ The following output appears in the browser after executing the program. Blazor_step4 Click the `Export to PDF` button to obtain the PDF document with the following output. -HTMLTOPDF +HTMLTOPDF \ No newline at end of file diff --git a/Docker/HTML_to_PDF_docker/htmlconversion_images/DockerStep2.png b/Docker/HTML_to_PDF_docker/htmlconversion_images/DockerStep2.png index 5c1fac2..1bf2c54 100644 Binary files a/Docker/HTML_to_PDF_docker/htmlconversion_images/DockerStep2.png and b/Docker/HTML_to_PDF_docker/htmlconversion_images/DockerStep2.png differ diff --git a/Docker/HTML_to_PDF_docker/htmlconversion_images/DockerStep3.png b/Docker/HTML_to_PDF_docker/htmlconversion_images/DockerStep3.png index ea2a201..945ff6a 100644 Binary files a/Docker/HTML_to_PDF_docker/htmlconversion_images/DockerStep3.png and b/Docker/HTML_to_PDF_docker/htmlconversion_images/DockerStep3.png differ