Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,29 +1,26 @@
**Prerequisites**:

* Install .NET SDK: Ensure that you have the .NET SDK installed on your system. You can download it from the [.NET Downloads page](https://dotnet.microsoft.com/en-us/download).
* Install Visual Studio Code: Download and install Visual Studio Code from the [official website](https://code.visualstudio.com/download).
* Install C# Extension for VS Code: Open Visual Studio Code, go to the Extensions view (Ctrl+Shift+X), and search for 'C#'. Install the official [C# extension provided by Microsoft](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp).


* **.NET 8 SDK**: Ensure you have .NET 8 or newer installed from [.NET Downloads](https://dotnet.microsoft.com/en-us/download)
* **Visual Studio Code**: Install from [official site](https://code.visualstudio.com/download)
* **C# Extension**: Install the [C# extension](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp) in VS Code

Step 1: Open the terminal (Ctrl+` ) and run the following command to create a new Blazor Server application

```
dotnet new maui-blazor -n CreatePdfBlazorMaUIApp
```
Step 2: Replace ****CreatePdfBlazorMaUIApp** with your desired project name.
```
dotnet new maui-blazor -n CreatePdfBlazorMaUIApp
```

Step 3: Navigate to the project directory using the following command
Step 2: Navigate to the project directory using the following command

```
cd CreatePdfBlazorMaUIApp
```
Step 4: Use the following command in the terminal to add the [Syncfusion.PDF.NET](https://www.nuget.org/packages/Syncfusion.pdf.Net) package to your project.
```
cd CreatePdfBlazorMaUIApp
```
Step 3: Use the following command in the terminal to add the [Syncfusion.PDF.NET](https://www.nuget.org/packages/Syncfusion.pdf.Net) package to your project.

```
dotnet add package Syncfusion.Pdf.Net
```
Step 5: Next, include the following namespaces in the ``_Imports.razor`` file.
```
dotnet add package Syncfusion.Pdf.Net
```
Step 4: Include necessary namespaces in `_Imports.razor` file.

{% tabs %}
{% highlight c# tabtitle="C#" %}
Expand All @@ -38,7 +35,7 @@ Step 5: Next, include the following namespaces in the ``_Imports.razor`` file.

{% endtabs %}

Step 6: Create a button in the ``Weather.razor`` using the following code.
Step 5: Create a button in ``Weather.razor`` using the following code.

{% tabs %}

Expand All @@ -50,7 +47,7 @@ Step 6: Create a button in the ``Weather.razor`` using the following code.

{% endtabs %}

Step 7: Define the ``@ExportToPdf`` click function on ``Weather.razor`` file.
Step 6: Define the `@ExportToPdf` click function on `Weather.razor` file.

The [PdfDocument](https://help.syncfusion.com/cr/file-formats/Syncfusion.Pdf.PdfDocument.html) object represents an entire PDF document that is being created and add a [PdfPage](https://help.syncfusion.com/cr/file-formats/Syncfusion.Pdf.PdfPage.html) to it. The [PdfTextElement](https://help.syncfusion.com/cr/file-formats/Syncfusion.Pdf.Graphics.PdfTextElement.html) is used to add text in a PDF document and which 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/file-formats/Syncfusion.Pdf.Grid.PdfGrid.html) allows you to create table by entering data manually or from an external data source.

Expand Down Expand Up @@ -109,18 +106,18 @@ The [PdfDocument](https://help.syncfusion.com/cr/file-formats/Syncfusion.Pdf.Pdf

{% endtabs %}

Step 8: Build the project.
Step 7: Build the project.

Run the following command in terminal to build the project.

```
dotnet build
```
```
dotnet build
```

Step 9: Run the project.
Step 8: Run the project.

Run the following command in terminal to build the project.
Run the following command in terminal to run the application.

```
dotnet run
```
```
dotnet run
```
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
**Prerequisites**:

* Install .NET SDK: Ensure that you have the .NET SDK installed on your system. You can download it from the [.NET Downloads page](https://dotnet.microsoft.com/en-us/download).
* Install Visual Studio: Download and install Visual Studio Code from the [official website](https://code.visualstudio.com/download).
* **Install .NET SDK**: Ensure that you have the .NET SDK installed on your system. You can download it from the [.NET Downloads page](https://dotnet.microsoft.com/en-us/download).
* **Install Visual Studio**: Download and install Visual Studio. For this example, we'll use Visual Studio 2022. You can download it from the [official Visual Studio website](https://visualstudio.microsoft.com/downloads/).

Step 1: Create a new project by choosing `.NET MAUI Blazor Hybrid and Web App` template in Visual Studio.
Step 1: Create a new .NET MAUI Blazor Hybrid project in Visual Studio
![Blazor client project creation step1](Create-PDF-Blazor/Maui-web-app.png)

Step 2: Install the [Syncfusion.PDF.NET](https://www.nuget.org/packages/Syncfusion.pdf.Net) NuGet package as a reference to your Blazor application from [NuGet.org](https://www.nuget.org).
![Blazor WASM NuGet package installation](Create-PDF-Blazor/Blazor_server_NuGet_Net.png)

Step 3: Next, include the following namespaces in the ``_Imports.razor`` file.
Step 3: Include necessary namespaces in `_Imports.razor` file.

{% tabs %}

Expand All @@ -25,7 +25,7 @@ Step 3: Next, include the following namespaces in the ``_Imports.razor`` file.

{% endtabs %}

Step 4: Create a button in the ``Weather.razor`` using the following code.
Step 4: Create a button in `Weather.razor` using the following code.

{% tabs %}

Expand Down Expand Up @@ -98,8 +98,8 @@ The [PdfDocument](https://help.syncfusion.com/cr/file-formats/Syncfusion.Pdf.Pdf

Step 6: Build the project.

Click on Build > Build Solution or press Ctrl + Shift + B to build the project.
Click on Build > Build Solution or press `Ctrl + Shift + B` to build the project.

Step 7: Run the project.

Click the Start button (green arrow) or press F5 to run the app.
Click the `Start` button (green arrow) or press `F5` to run the app.
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,34 @@
* JetBrains Rider.
* Install .NET 8 SDK or later.

Step 1. Open JetBrains Rider and create a new Blazor WASM app project.
* Launch JetBrains Rider.
* Click new solution on the welcome screen.
Step 1: Create a new Blazor WebAssembly App project in JetBrains Rider.

![Launch JetBrains Rider](JetBrains_Images/Launch-JetBrains-Rider.png)

* In the new Solution dialog, select Project Type as Web.
* Enter a project name and specify the location.
* Choose template as **Blazor WebAssembly Standalone App**.
* Select the target framework (e.g., .NET 8.0, .NET 9.0).
* Click create.
In the **New Solution** dialog:
* Select **Web** as the **Project Type**.
* Enter a **Solution name** (e.g., `CreatePdfBlazorWasmApp`) and specify the **Location**.
* Choose **Blazor WebAssembly Standalone App** as the template.
* Select the target framework (e.g., .NET 8.0).
* Click **Create**.

![Launch JetBrains Rider](JetBrains_Images/create-blazor-wasm-application.png)

Step 2: Install the NuGet package from [NuGet.org](https://www.nuget.org/).
* Click the NuGet icon in the Rider toolbar and type [Syncfusion.Pdf.Net.Core](https://www.nuget.org/packages/Syncfusion.Pdf.Net.Core) in the search bar.
* Ensure that "nuget.org" is selected as the package source.
* Select the latest Syncfusion.Pdf.Net.Core NuGet package from the list.
* Click the + (Add) button to add the package.
* Ensure that `nuget.org` is selected as the package source.
* Select the latest `Syncfusion.Pdf.Net.Core` NuGet package from the list.
* Click the **Add** button (or the `+` icon) to add the package.

![Select the Syncfusion.Pdf.Net.Core package](JetBrains_Images/Core-Package.png)

* Click the Install button to complete the installation.
* Click the **Install** button to complete the installation.

![Install the package](JetBrains_Images/Install-Core-BlazorWeb-Package.png)

N> Starting with v16.2.0.x, if you reference Syncfusion<sup>&reg;</sup> assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion<sup>&reg;</sup> license key in your application to use our components.
N> Starting with v16.2.0.x, if referencing Syncfusion<sup>&reg;</sup> assemblies from trial setup or from the NuGet feed, add "Syncfusion.Licensing" assembly reference and include a license key in projects. Refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to learn about registering Syncfusion<sup>&reg;</sup> license key in applications to use the components.

Step 5: Next, include the following namespaces in that ``FetchData.razor`` file.
Step 3: Include necessary namespaces in `FetchData.razor` file.

{% tabs %}
{% highlight c# tabtitle="C#" %}
Expand All @@ -46,15 +45,15 @@ Step 5: Next, include the following namespaces in that ``FetchData.razor`` file
{% endhighlight %}
{% endtabs %}

Step 6: Create a button in the ``FetchData.razor`` using the following code.
Step 4: Create a button in `FetchData.razor` using the following code.

{% tabs %}
{% highlight CSHTML %}
<button class="btn btn-primary" @onclick="@ExportToPdf">Export to PDF</button>
{% endhighlight %}
{% endtabs %}

Step 7: Define the ``@ExportToPdf`` click function on ``FetchData.razor`` file.
Step 5: Define the `@ExportToPdf` click function on `FetchData.razor` file.

The [PdfDocument](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.PdfDocument.html) object represents an entire PDF document that is being created and add a [PdfPage](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.PdfPage.html) to it. The [PdfTextElement](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.Graphics.PdfTextElement.html) is used to add text in a PDF document and which 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 you to create table by entering data manually or from an external data sources.

Expand Down Expand Up @@ -108,7 +107,7 @@ JS.SaveAs("Sample.pdf", memoryStream.ToArray());
{% endhighlight %}
{% endtabs %}

Step 8: Create a class file with ``FileUtil`` name and add the following code to invoke the JavaScript action to download the file in the browser.
Step 6: Create a class file with ``FileUtil`` name and add the following code to invoke the JavaScript action to download the file in the browser.

{% tabs %}

Expand All @@ -127,7 +126,7 @@ public static class FileUtil

{% endtabs %}

Step 9: Add the following JavaScript function in the ``index.html`` available under the ``wwwroot`` folder.
Step 7: Add the following JavaScript function in the ``index.html`` available under the ``wwwroot`` folder.

{% tabs %}

Expand Down Expand Up @@ -160,10 +159,10 @@ Step 9: Add the following JavaScript function in the ``index.html`` available un

{% endtabs %}

Step 10: Build the project.
Step 8: Build the project.

Click the **Build** button in the toolbar or press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>B</kbd> to build the project.

Step 11: Run the project.
Step 9: Run the project.

Click the **Run** button (green arrow) in the toolbar or press <kbd>F5</kbd> to run the app.
Click the **Run** button (green arrow) in the toolbar or press <kbd>F5</kbd> to run the application.
Original file line number Diff line number Diff line change
@@ -1,29 +1,26 @@
**Prerequisites**:

* Install .NET SDK: Ensure that you have the .NET SDK installed on your system. You can download it from the [.NET Downloads page](https://dotnet.microsoft.com/en-us/download).
* Install Visual Studio Code: Download and install Visual Studio Code from the [official website](https://code.visualstudio.com/download).
* Install C# Extension for VS Code: Open Visual Studio Code, go to the Extensions view (Ctrl+Shift+X), and search for 'C#'. Install the official [C# extension provided by Microsoft](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp).
* **.NET 8 SDK**: Ensure you have .NET 8 or newer installed from [.NET Downloads](https://dotnet.microsoft.com/en-us/download)
* **Visual Studio Code**: Install from [official site](https://code.visualstudio.com/download)
* **C# Extension**: Install the [C# extension](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp) in VS Code



Step 1: Open the terminal (Ctrl+` ) and run the following command to create a new Blazor Server application
Step 1: Open the terminal (Ctrl+`) and run the following command to create a new Blazor Server application

```
dotnet new blazorwasm -o CreatePdfBlazorWASMApp
```
Step 2: Replace ****CreatePdfBlazorWASMApp** with your desired project name.

Step 3: Navigate to the project directory using the following command
Step 2: Navigate to the project directory using the following command

```
cd CreatePdfBlazorWASMApp
```
Step 4: Use the following command in the terminal to add the [Syncfusion.Pdf.Net.Core](https://www.nuget.org/packages/Syncfusion.pdf.Net.Core) package to your project.
Step 3: Use the following command in the terminal to add the [Syncfusion.Pdf.Net.Core](https://www.nuget.org/packages/Syncfusion.pdf.Net.Core) package to your project.

```
dotnet add package Syncfusion.Pdf.Net.Core
```
Step 5: Create a new cs file named **ExportService.cs** under **Data** folder and include the following namespaces in the file.
Step 4: Create a new cs file named **ExportService.cs** under **Data** folder and include the following namespaces in the file.

{% tabs %}
{% highlight c# tabtitle="C#" %}
Expand All @@ -36,9 +33,9 @@ using Syncfusion.Drawing;
{% endhighlight %}
{% endtabs %}

Step 6: 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) is used to add text in a PDF document and which 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 you to create table by entering data manually or from an external data sources.
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) is used to add text in a PDF document and which 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 you to create table by entering data manually or from an external data sources.

Add the following code sample in ``ExportService`` class which illustrates how to create a simple PDF document using ``PdfTextElement`` and ``PdfGrid``.
Add the following code sample in `ExportService` class which illustrates how to create a simple PDF document using `PdfTextElement` and `PdfGrid`.

{% tabs %}
{% highlight c# tabtitle="C#" %}
Expand Down Expand Up @@ -97,7 +94,7 @@ public static MemoryStream CreatePdf(WeatherForecast[] forecasts)
{% endhighlight %}
{% endtabs %}

Register your service in the ``ConfigureServices`` method available in the ``Startup.cs`` class as follows.
Register service in the `ConfigureServices` method available in the `Startup.cs` class as follows.

{% tabs %}
{% highlight c# tabtitle="C#" %}
Expand All @@ -111,7 +108,7 @@ public void ConfigureServices(IServiceCollection services)
{% endhighlight %}
{% endtabs %}

Step 7: Inject ``ExportService`` in-to ``FetchData.razor`` using the following code.
Step 6: Inject `ExportService` into `FetchData.razor` using the following code.

{% tabs %}
{% highlight CSHTML %}
Expand All @@ -123,15 +120,15 @@ Step 7: Inject ``ExportService`` in-to ``FetchData.razor`` using the following c
{% endhighlight %}
{% endtabs %}

Create a button in the ``FetchData.razor`` using the following code.
Create a button in the `FetchData.razor` using the following code.

{% tabs %}
{% highlight CSHTML %}
<button class="btn btn-primary" @onclick="@ExportToPdf">Export to PDF</button>
{% endhighlight %}
{% endtabs %}

Add the ``ExportToPdf`` method in ``FetchData.razor`` page to call the export service.
Add the `ExportToPdf` method in `FetchData.razor` page to call the export service.

{% tabs %}
{% highlight c# tabtitle="C#" %}
Expand All @@ -148,7 +145,7 @@ Add the ``ExportToPdf`` method in ``FetchData.razor`` page to call the export se
{% endhighlight %}
{% endtabs %}

Step 8: Create a class file with ``FileUtil`` name and add the following code to invoke the JavaScript action to download the file in the browser.
Step 7: Create a class file with `FileUtil` name and add the following code to invoke the JavaScript action to download the file in the browser.

{% tabs %}

Expand All @@ -167,7 +164,7 @@ public static class FileUtil

{% endtabs %}

Step 9: Add the following JavaScript function in the ``_Host.cshtml`` available under the ``Pages`` folder.
Step 8: Add the following JavaScript function in the `_Host.cshtml` available under the `Pages` folder.

{% tabs %}

Expand Down Expand Up @@ -200,18 +197,16 @@ Step 9: Add the following JavaScript function in the ``_Host.cshtml`` available

{% endtabs %}

Step 10: Build the project.

Run the following command in terminal to build the project.

```
dotnet build
```
Step 9: Build the project.
Run the following command in terminal to build the project.

12. Run the project:
```
dotnet build
```

Run the following command in terminal to run the project.
Step 10: Run the project.
Run the following command in terminal to run the application.

```
dotnet run
```
dotnet run
```
Loading