Skip to content

Commit 892e5aa

Browse files
committed
983650-2: Changed Blazor related files.
1 parent 5844308 commit 892e5aa

4 files changed

Lines changed: 81 additions & 89 deletions

File tree

Document-Processing/PDF/PDF-Library/NET/tabcontent-support/Create-PDF-document-in-Blazor-MaUI-VS-Code.md

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
11
**Prerequisites**:
22

3-
* 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).
4-
* Install Visual Studio Code: Download and install Visual Studio Code from the [official website](https://code.visualstudio.com/download).
5-
* 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).
6-
3+
* **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).
4+
* **Install Visual Studio Code**: Download and install Visual Studio Code from the [official website](https://code.visualstudio.com/download).
5+
* **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).
76

87

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

11-
```
12-
dotnet new maui-blazor -n CreatePdfBlazorMaUIApp
13-
```
14-
Step 2: Replace ****CreatePdfBlazorMaUIApp** with your desired project name.
10+
```
11+
dotnet new maui-blazor -n CreatePdfBlazorMaUIApp
12+
```
1513

16-
Step 3: Navigate to the project directory using the following command
14+
Step 2: Navigate to the project directory using the following command
1715

18-
```
19-
cd CreatePdfBlazorMaUIApp
20-
```
21-
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.
16+
```
17+
cd CreatePdfBlazorMaUIApp
18+
```
19+
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.
2220

23-
```
24-
dotnet add package Syncfusion.Pdf.Net
25-
```
26-
Step 5: Next, include the following namespaces in the ``_Imports.razor`` file.
21+
```
22+
dotnet add package Syncfusion.Pdf.Net
23+
```
24+
Step 4: Include necessary namespaces in `_Imports.razor` file.
2725

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

3937
{% endtabs %}
4038

41-
Step 6: Create a button in the ``Weather.razor`` using the following code.
39+
Step 5: Create a button in ``Weather.razor`` using the following code.
4240

4341
{% tabs %}
4442

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

5149
{% endtabs %}
5250

53-
Step 7: Define the ``@ExportToPdf`` click function on ``Weather.razor`` file.
51+
Step 6: Define the `@ExportToPdf` click function on `Weather.razor` file.
5452

5553
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.
5654

@@ -109,18 +107,18 @@ The [PdfDocument](https://help.syncfusion.com/cr/file-formats/Syncfusion.Pdf.Pdf
109107

110108
{% endtabs %}
111109

112-
Step 8: Build the project.
110+
Step 7: Build the project.
113111

114112
Run the following command in terminal to build the project.
115113

116-
```
117-
dotnet build
118-
```
114+
```
115+
dotnet build
116+
```
119117

120-
Step 9: Run the project.
118+
Step 8: Run the project.
121119

122-
Run the following command in terminal to build the project.
120+
Run the following command in terminal to run the application.
123121

124-
```
125-
dotnet run
126-
```
122+
```
123+
dotnet run
124+
```

Document-Processing/PDF/PDF-Library/NET/tabcontent-support/Create-PDF-document-in-Blazor-WASM-JetBrains.md

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,34 @@
33
* JetBrains Rider.
44
* Install .NET 8 SDK or later.
55

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

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

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

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

2019
Step 2: Install the NuGet package from [NuGet.org](https://www.nuget.org/).
2120
* 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.
22-
* Ensure that "nuget.org" is selected as the package source.
23-
* Select the latest Syncfusion.Pdf.Net.Core NuGet package from the list.
24-
* Click the + (Add) button to add the package.
21+
* Ensure that `nuget.org` is selected as the package source.
22+
* Select the latest `Syncfusion.Pdf.Net.Core` NuGet package from the list.
23+
* Click the **Add** button (or the `+` icon) to add the package.
2524

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

28-
* Click the Install button to complete the installation.
27+
* Click the **Install** button to complete the installation.
2928

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

32-
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.
31+
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.
3332

34-
Step 5: Next, include the following namespaces in that ``FetchData.razor`` file.
33+
Step 3: Include necessary namespaces in `FetchData.razor` file.
3534

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

49-
Step 6: Create a button in the ``FetchData.razor`` using the following code.
48+
Step 4: Create a button in `FetchData.razor` using the following code.
5049

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

57-
Step 7: Define the ``@ExportToPdf`` click function on ``FetchData.razor`` file.
56+
Step 5: Define the `@ExportToPdf` click function on `FetchData.razor` file.
5857

5958
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.
6059

@@ -127,7 +126,7 @@ public static class FileUtil
127126

128127
{% endtabs %}
129128

130-
Step 9: Add the following JavaScript function in the ``index.html`` available under the ``wwwroot`` folder.
129+
Step 6: Add the following JavaScript function in the ``index.html`` available under the ``wwwroot`` folder.
131130

132131
{% tabs %}
133132

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

161160
{% endtabs %}
162161

163-
Step 10: Build the project.
162+
Step 7: Build the project.
164163

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

167-
Step 11: Run the project.
166+
Step 8: Run the project.
168167

169-
Click the **Run** button (green arrow) in the toolbar or press <kbd>F5</kbd> to run the app.
168+
Click the **Run** button (green arrow) in the toolbar or press <kbd>F5</kbd> to run the application.

Document-Processing/PDF/PDF-Library/NET/tabcontent-support/Create-PDF-document-in-Blazor-WASM-VS-Code.md

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
11
**Prerequisites**:
22

3-
* 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).
4-
* Install Visual Studio Code: Download and install Visual Studio Code from the [official website](https://code.visualstudio.com/download).
5-
* 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).
3+
* **.NET 8 SDK**: Ensure you have .NET 8 or newer installed from [.NET Downloads](https://dotnet.microsoft.com/en-us/download)
4+
* **Visual Studio Code**: Install from [official site](https://code.visualstudio.com/download)
5+
* **C# Extension**: Install the [C# extension](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp) in VS Code
66

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

119
```
1210
dotnet new blazorwasm -o CreatePdfBlazorWASMApp
1311
```
14-
Step 2: Replace ****CreatePdfBlazorWASMApp** with your desired project name.
1512

16-
Step 3: Navigate to the project directory using the following command
13+
Step 2: Navigate to the project directory using the following command
1714

1815
```
1916
cd CreatePdfBlazorWASMApp
2017
```
21-
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.
18+
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.
2219

2320
```
2421
dotnet add package Syncfusion.Pdf.Net.Core
2522
```
26-
Step 5: Create a new cs file named **ExportService.cs** under **Data** folder and include the following namespaces in the file.
23+
Step 4: Create a new cs file named **ExportService.cs** under **Data** folder and include the following namespaces in the file.
2724

2825
{% tabs %}
2926
{% highlight c# tabtitle="C#" %}
@@ -36,9 +33,9 @@ using Syncfusion.Drawing;
3633
{% endhighlight %}
3734
{% endtabs %}
3835

39-
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.
36+
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.
4037

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

4340
{% tabs %}
4441
{% highlight c# tabtitle="C#" %}
@@ -97,7 +94,7 @@ public static MemoryStream CreatePdf(WeatherForecast[] forecasts)
9794
{% endhighlight %}
9895
{% endtabs %}
9996

100-
Register your service in the ``ConfigureServices`` method available in the ``Startup.cs`` class as follows.
97+
Register service in the `ConfigureServices` method available in the `Startup.cs` class as follows.
10198

10299
{% tabs %}
103100
{% highlight c# tabtitle="C#" %}
@@ -111,7 +108,7 @@ public void ConfigureServices(IServiceCollection services)
111108
{% endhighlight %}
112109
{% endtabs %}
113110

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

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

126-
Create a button in the ``FetchData.razor`` using the following code.
123+
Create a button in the `FetchData.razor` using the following code.
127124

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

134-
Add the ``ExportToPdf`` method in ``FetchData.razor`` page to call the export service.
131+
Add the `ExportToPdf` method in `FetchData.razor` page to call the export service.
135132

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

151-
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.
148+
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.
152149

153150
{% tabs %}
154151

@@ -167,7 +164,7 @@ public static class FileUtil
167164

168165
{% endtabs %}
169166

170-
Step 9: Add the following JavaScript function in the ``_Host.cshtml`` available under the ``Pages`` folder.
167+
Step 8: Add the following JavaScript function in the `_Host.cshtml` available under the `Pages` folder.
171168

172169
{% tabs %}
173170

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

201198
{% endtabs %}
202199

203-
Step 10: Build the project.
204-
205-
Run the following command in terminal to build the project.
206-
207-
```
208-
dotnet build
209-
```
200+
Step 9: Build the project.
201+
Run the following command in terminal to build the project.
210202

211-
12. Run the project:
203+
```
204+
dotnet build
205+
```
212206

213-
Run the following command in terminal to run the project.
207+
Step 10: Run the project.
208+
Run the following command in terminal to run the application.
214209

215-
```
216-
dotnet run
210+
```
211+
dotnet run
217212
```

0 commit comments

Comments
 (0)