How to open a CSV file with a tab delimiter using XlsIO?
diff --git a/Document-Processing/Excel/Conversions/CSV-to-Excel/NET/FAQ.md b/Document-Processing/Excel/Conversions/CSV-to-Excel/NET/FAQ.md
new file mode 100644
index 0000000000..39c2f8eb6c
--- /dev/null
+++ b/Document-Processing/Excel/Conversions/CSV-to-Excel/NET/FAQ.md
@@ -0,0 +1,13 @@
+---
+title: CSV to Excel FAQ Section| XlsIO | Syncfusion
+description: In this section, you can know about the various questions asked about CSV to Excel conversion using XlsIO.
+platform: document-processing
+control: XlsIO
+documentation: UG
+---
+
+# Frequently Asked Questions Section In CSV to Excel Conversion
+
+The frequently asked questions in Essential® XlsIO are listed below.
+
+* [How to open a CSV file with a tab delimiter using XlsIO?](faqs/how-to-open-a-csv-file-with-a-tab-delimiter-using-xlsio)
diff --git a/Document-Processing/Excel/Conversions/Excel-to-CSV/NET/FAQ.md b/Document-Processing/Excel/Conversions/Excel-to-CSV/NET/FAQ.md
new file mode 100644
index 0000000000..e8b5393144
--- /dev/null
+++ b/Document-Processing/Excel/Conversions/Excel-to-CSV/NET/FAQ.md
@@ -0,0 +1,13 @@
+---
+title: Excel to CSV FAQ Section| XlsIO | Syncfusion
+description: In this section, you can know about the various questions asked about Excel to CSV conversion using XlsIO.
+platform: document-processing
+control: XlsIO
+documentation: UG
+---
+
+# Frequently Asked Questions Section In Excel to CSV Conversion
+
+The frequently asked questions in Essential® XlsIO are listed below.
+
+* [Why does Excel remove number formatting in CSV files?](faqs/why-does-excel-remove-number-formatting-in-csv-files)
diff --git a/Document-Processing/Excel/Conversions/Excel-to-PDF/NET/Assemblies-Required-for-Excel-to-PDF.md b/Document-Processing/Excel/Conversions/Excel-to-PDF/NET/Assemblies-Required-for-Excel-to-PDF.md
index f98f271492..7ca4f4246c 100644
--- a/Document-Processing/Excel/Conversions/Excel-to-PDF/NET/Assemblies-Required-for-Excel-to-PDF.md
+++ b/Document-Processing/Excel/Conversions/Excel-to-PDF/NET/Assemblies-Required-for-Excel-to-PDF.md
@@ -32,16 +32,6 @@ Syncfusion.ExcelToPDFConverter.Base
diff --git a/Document-Processing/Excel/Excel-Library/NET/Assemblies-Required-for-Excel-to-PDF.md b/Document-Processing/Excel/Excel-Library/NET/Assemblies-Required-for-Excel-to-PDF.md
deleted file mode 100644
index 008c9d9bca..0000000000
--- a/Document-Processing/Excel/Excel-Library/NET/Assemblies-Required-for-Excel-to-PDF.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Execl to PDF Assemblies Required | Syncfusion
-description: Briefs the assemblies required to convert excel document to PDF for various platforms and frameworks.
-platform: document-processing
-control: XlsIO
-documentation: UG
----
-
-# Assemblies Required for Excel to PDF conversion
-
-For converting an Excel document to PDF, the following assemblies need to be referenced in your application.
-
-
-
-N> Excel to PDF conversion is supported from .NET Framework 2.0 and .NET Standard 1.4 onwards.
-
-N> Starting with v16.2.0.x, if you reference Syncfusion® 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® license key in your applications to use our components.
-
-N> Syncfusion® components are available in nuget.org
-
-
diff --git a/Document-Processing/Excel/Excel-Library/NET/Assemblies-Required.md b/Document-Processing/Excel/Excel-Library/NET/Assemblies-Required.md
index 3a65c36593..2ff76044c3 100644
--- a/Document-Processing/Excel/Excel-Library/NET/Assemblies-Required.md
+++ b/Document-Processing/Excel/Excel-Library/NET/Assemblies-Required.md
@@ -30,15 +30,6 @@ Syncfusion.Compression.Base
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/angular/getting-started-with-server-backed.md
index f13907edf9..86edf2abed 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/getting-started-with-server-backed.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/getting-started-with-server-backed.md
@@ -11,46 +11,28 @@ domainurl: ##DomainURL##
This guide explains how to create and run the **Angular PDF Viewer in server-backed mode**. In this mode, PDF rendering is handled by a server-side web service, while the Angular application acts as the client.
-> **Note:** This guide supports **Angular 21** and other recent Angular versions. From Angular 19 onwards, standalone components are the default, and this documentation follows that architecture.
-
----
-
## Prerequisites
Ensure that your development environment meets the [Syncfusion Angular system requirements](https://ej2.syncfusion.com/angular/documentation/system-requirement).
----
-
-## Setup Angular Environment
+## Create an Angular application
-### Install Angular CLI
+Use [Angular CLI](https://angular.dev/installation) to create a new Angular application, as it provides a standardized project structure, built-in testing tools, and simplified deployment.
-Install the latest Angular CLI globally:
+Install Angular CLI globally, using the following command:
-```bash
+```
npm install -g @angular/cli
```
-To install a specific version:
+Create a new Angular application using the following commands:
-```bash
-npm install -g @angular/cli@21.0.0
```
-
----
-
-## Create an Angular application
-
-Create a new Angular application using the CLI:
-
-```bash
-ng new my-app
-cd my-app
+ng new pdfviewer-app
+cd pdfviewer-app
```
-> **Note:** In Angular 20 and later, the CLI generates `app.ts`, `app.html`, and `app.css` instead of `app.component.*` files.
-
----
+> **Note:** When prompted during project creation, select the default options: **CSS** for stylesheet, **No** for SSR/SSG, and **None** for AI tools.
## Installing Syncfusion® PDF Viewer package
@@ -60,13 +42,12 @@ Install the Syncfusion Angular PDF Viewer package from npm:
npm install @syncfusion/ej2-angular-pdfviewer --save
```
----
-
## Adding CSS references
Add the required Syncfusion styles to the `src/styles.css` file:
-```css
+{% tabs %}
+{% highlight css tabtitle="~/src/styles/styles.css" %}
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@@ -76,17 +57,19 @@ Add the required Syncfusion styles to the `src/styles.css` file:
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
-```
+{% endhighlight %}
+{% endtabs %}
----
+> **Note:** Refer to the [Themes topic](https://ej2.syncfusion.com/angular/documentation/appearance/overview) to learn more about built-in themes and different ways to refer to themes in an Angular project.
## Add the PDF Viewer component
-To load and display a PDF using server-backed mode, only the **PdfViewerModule** is required. The PDF Viewer communicates with a server-side web service through the `serviceUrl` property.
+Add the PDF Viewer component to your Angular application in server-backed mode. In this mode, the PDF Viewer communicates with a server-side web service through the `serviceUrl` property.
Update `src/app/app.ts` as shown below:
-```ts
+{% tabs %}
+{% highlight ts tabtitle="~/src/app/app.ts" %}
import { Component } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
@@ -112,37 +95,32 @@ import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
`
})
export class App {
-
- // Specifies the URL of the server-side PDF Viewer web service.
- // This endpoint handles PDF rendering and processing.
public serviceUrl: string =
'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- // Specifies the path or name of the PDF document to be loaded.
public documentPath: string =
'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
}
-```
-
-> **Note:** The service URL shown above is for evaluation purposes only. For production, host your own PDF Viewer web service.
+{% endhighlight %}
+{% endtabs %}
----
+N> The `documentPath` property sets the PDF file path to be loaded. You can provide a remote URL, Base64 string, or local file path (e.g., `'assets/sample.pdf'`) and the `serviceUrl` property specifies the server-side PDF Viewer web service endpoint for PDF rendering. The service URL shown above is for evaluation purposes only. For production, host your own PDF Viewer web service.
## Run the application
-Run the Angular application using the CLI:
+Run the following command to start the Angular application:
```bash
ng serve --open
```
-The application will start and connect to the configured PDF Viewer web service.
+After the application starts, open the localhost URL shown in the terminal to view the Angular PDF Viewer component in the browser. The output will appear as follows:
----
+
{% previewsample "/document-processing/samples/pdfviewer/angular/getting-started-cs1" %}
----
+[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/Getting%20started%20-%20Server-Back)
## Run the PDF Viewer web service
@@ -164,8 +142,6 @@ The service will run at `https://localhost:7255/pdfviewer`. Configure this URL i
> **Note:** In server-backed mode, `pdfium.js` and `pdfium.wasm` are not required because all PDF rendering happens on the server.
----
-
## Angular version compatibility and older versions
For detailed compatibility information, refer to the [Angular version support matrix](https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-version-compatibility).
@@ -176,6 +152,8 @@ For detailed compatibility information, refer to the [Angular version support ma
For older Angular versions, refer to the respective Angular PDF Viewer guides.
----
+## See also
-[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/Getting%20started%20-%20Server-Back)
+- [Getting started Angular PDF Viewer](./getting-started)
+- [Open PDF Files](./open-pdf-files)
+- [Save PDF Files](./save-pdf-files)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md b/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md
index 1b1dcfa24b..1a1da28a79 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md
@@ -11,46 +11,28 @@ domainurl: ##DomainURL##
This guide explains how to create a simple **Angular Standalone PDF Viewer** application and demonstrates the basic usage of the Syncfusion PDF Viewer component.
-> **Note:** This guide supports **Angular 21** and other recent Angular versions. Starting from Angular 19, standalone components are the default, and this documentation follows that architecture.
-
----
-
## Prerequisites
Ensure that your system meets the [Syncfusion Angular system requirements](https://ej2.syncfusion.com/angular/documentation/system-requirement).
----
-
-## Setup Angular Environment
+## Create an Angular application
-### Install Angular CLI
+Use [Angular CLI](https://angular.dev/installation) to create a new Angular application, as it provides a standardized project structure, built-in testing tools, and simplified deployment.
-Install the latest Angular CLI globally:
+Install Angular CLI globally, using the following command:
-```bash
+```
npm install -g @angular/cli
```
-To install a specific version:
+Create a new Angular application using the following commands:
-```bash
-npm install -g @angular/cli@21.0.0
```
-
----
-
-## Create an Angular Application
-
-Create a new Angular application using the Angular CLI:
-
-```bash
-ng new my-app
-cd my-app
+ng new pdfviewer-app
+cd pdfviewer-app
```
-> **Note:** In Angular 20 and later, the CLI generates `app.ts`, `app.html`, and `app.css` instead of `app.component.*` files.
-
----
+> **Note:** When prompted during project creation, select the default options: **CSS** for stylesheet, **No** for SSR/SSG, and **None** for AI tools.
## Installing Syncfusion® PDF Viewer package
@@ -60,15 +42,12 @@ Install the Syncfusion Angular PDF Viewer package from npm:
npm install @syncfusion/ej2-angular-pdfviewer --save
```
-* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the [Troubleshooting](./troubleshooting/troubleshooting) section.
-
----
-
## Adding CSS references
Add the required Syncfusion styles to the `src/styles.css` file:
-```css
+{% tabs %}
+{% highlight css tabtitle="~/src/styles/styles.css" %}
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@@ -78,17 +57,19 @@ Add the required Syncfusion styles to the `src/styles.css` file:
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
-```
+{% endhighlight %}
+{% endtabs %}
----
+> **Note:** Refer to the [Themes topic](https://ej2.syncfusion.com/angular/documentation/appearance/overview) to learn more about built-in themes and different ways to refer to themes in an Angular project.
## Add the PDF Viewer component
-To load and display a PDF document, only the **PdfViewerModule** is required.
+Add the PDF Viewer component to your Angular application to render and interact with PDF documents. The component requires the **PdfViewerModule** and its associated services.
Update `src/app/app.ts` as shown below:
-```ts
+{% tabs %}
+{% highlight ts tabtitle="~/src/app/app.ts" %}
import { Component } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
@@ -114,36 +95,37 @@ import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
`
})
export class App {
-
- // Specifies the path or Base64 string of the PDF document to be loaded.
- // You can provide a remote URL or a local file from the assets folder.
public documentPath: string =
'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-
- // Specifies the path to the PDFium resource files required by the PDF Viewer.
- // This points to a CDN-hosted ej2-pdfviewer-lib folder.
public resourcesUrl: string =
'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
}
-```
+{% endhighlight %}
+{% endtabs %}
----
+N> The `documentPath` property sets the PDF file path to be loaded. You can provide a remote URL, Base64 string, or local file path (e.g., `'assets/sample.pdf'`) and the `resourceUrl` property specifies the PDFium library resources path required for PDF rendering. This example uses CDN-hosted resources. For local resources, refer to [Load PDF Viewer with Local Resources](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/how-to/load-pdf-viewer-with-local-resources).
## Run the application
-Run the application using the Angular CLI:
+Run the following command to start the Angular application:
```bash
ng serve --open
```
-The PDF document will be rendered in the browser.
+After the application starts, open the localhost URL shown in the terminal to view the Angular PDF Viewer component in the browser. The output will appear as follows:
----
+
{% previewsample "/document-processing/samples/pdfviewer/angular/getting-started-cs1-standalone" %}
----
+[View Sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/Getting%20started%20-%20Standalone)
+
+## Video tutorial
+
+To get started quickly with Angular PDF Viewer, you can watch this video:
+
+{% youtube "https://www.youtube.com/watch?v=r8IPr_nTiHo&t=1s" %}
## Angular version compatibility and older versions
@@ -153,3 +135,9 @@ For older Angular versions, refer to the following guides:
* [Create a Standalone PDF Viewer in Angular 17 and above with-no-standalone-flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag).
* [Create a Standalone PDF Viewer in Angular 17 and above without --no-standalone flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag).
* [Create a Standalone PDF Viewer in Angular 12](./how-to/create-a-standalone-pdf-viewer-in-angular-12)
+
+## See also
+
+- [Getting started with Server-Backed Angular PDF Viewer](./getting-started-with-server-backed)
+- [Open PDF Files](./open-pdf-files)
+- [Save PDF Files](./save-pdf-files)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/images/pdfviewer-control.png b/Document-Processing/PDF/PDF-Viewer/angular/images/pdfviewer-control.png
new file mode 100644
index 0000000000..ecddea578f
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/images/pdfviewer-control.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Core_Images/pdfviewer-control.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Core_Images/pdfviewer-control.png
index 46fb505fbe..ecddea578f 100644
Binary files a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Core_Images/pdfviewer-control.png and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Core_Images/pdfviewer-control.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/getting-started-with-server-backed.md
index 5256159f35..069a946a12 100644
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/getting-started-with-server-backed.md
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/getting-started-with-server-backed.md
@@ -84,9 +84,9 @@ Open `~/Pages/_ViewImports.cshtml` and add the Syncfusion EJ2 Tag Helper import.
{% endhighlight %}
{% endtabs %}
-## Add style sheet
+## Add style sheet and script reference
-Reference the Syncfusion theme using the CDN inside the `` of `~/Pages/Shared/_Layout.cshtml`. This stylesheet provides styling for all Syncfusion components including the PDF Viewer.
+Reference the Syncfusion theme and JavaScript library using the CDN inside the `` of `~/Pages/Shared/_Layout.cshtml`. The stylesheet provides styling for all Syncfusion components including the PDF Viewer, and the script provides the core functionality for all Syncfusion components.
{% tabs %}
{% highlight c# tabtitle="~/_Layout.cshtml" %}
@@ -95,34 +95,18 @@ Reference the Syncfusion theme using the CDN inside the `` of `~/Pages/Sha
...
-
-
-{% endhighlight %}
-{% endtabs %}
-
-N> See the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme) for different ways to reference styles in an ASP.NET Core application, including [CDN](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#cdn-reference), [NPM package](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm), and [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator).
-
-## Add script reference
-
-Add the Syncfusion JavaScript library using the CDN inside the `` of `~/Pages/Shared/_Layout.cshtml`. This script provides the core functionality for all Syncfusion components.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Layout.cshtml" %}
-
-
- ...
-To use locally availabe script and style resources, follow these [instructions](./how-to/local-resources#configuring-pdf-viewer-with-local-styles-and-scripts)
-
{% endhighlight %}
{% endtabs %}
+N> To learn other ways to load themes or scripts (such as [NPM packages](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm) or [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator)), see the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme) and [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references) documentation. To use locally available script and style resources, follow these [instructions](./how-to/local-resources#configuring-pdf-viewer-with-local-styles-and-scripts)
+
## Register Syncfusion® Script Manager
-Open `~/Pages/Shared/_Layout.cshtml` and register the script manager at the end of the `` tag. The script manager initializes Syncfusion components and manages their life cycle.
+Open `~/Pages/Shared/_Layout.cshtml` and register the script manager. The script manager initializes Syncfusion components and manages their life cycle.
{% tabs %}
{% highlight c# tabtitle="~/_Layout.cshtml" %}
@@ -137,7 +121,7 @@ Open `~/Pages/Shared/_Layout.cshtml` and register the script manager at the end
{% endhighlight %}
{% endtabs %}
-N> Add the script manager `` at the end of the ``.
+N> Add the script manager `` at the end of the `` element.
## Add ASP.NET Core PDF Viewer control
@@ -168,10 +152,12 @@ An implementation example can be found [here](https://github.com/SyncfusionExamp
## Run the application
-Run the app to display the PDF in the Syncfusion® ASP.NET Core PDF Viewer in the browser.
+Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core PDF Viewer control will be rendered in the default web browser.
+[View sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Getting-Started-Examples/tree/main/PDFViewer/ASP.NET%20Core%20Tag%20Helper%20Examples)
+
## Deployment notes
- Unlike the standalone PDF Viewer which performs client-side rendering, the server-backed PDF Viewer processes and renders PDFs entirely on the server. As a result, the following files are **not required** and should be omitted during deployment:
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/getting-started.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/getting-started.md
index edfccf727e..fdb6a79fe2 100644
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/getting-started.md
@@ -82,9 +82,9 @@ Open `~/Pages/_ViewImports.cshtml` and add the Syncfusion EJ2 Tag Helper import.
{% endhighlight %}
{% endtabs %}
-## Add style sheet
+## Add style sheet and script reference
-Reference the Syncfusion theme using the CDN inside the `` of `~/Pages/Shared/_Layout.cshtml`. This stylesheet provides styling for all Syncfusion components including the PDF Viewer.
+Reference the Syncfusion theme and JavaScript library using the CDN inside the `` of `~/Pages/Shared/_Layout.cshtml`. The stylesheet provides styling for all Syncfusion components including the PDF Viewer, and the script provides the client-side functionality.
{% tabs %}
{% highlight c# tabtitle="~/_Layout.cshtml" %}
@@ -93,22 +93,6 @@ Reference the Syncfusion theme using the CDN inside the `` of `~/Pages/Sha
...
-
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Check out the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme) to learn different ways ([CDN](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#cdn-reference), [NPM package](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm), and [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator)) to reference styles in an ASP.NET Core application and achieve the expected appearance for Syncfusion® ASP.NET Core controls.
-
-## Add script reference
-
-Add the Syncfusion JavaScript library using the CDN inside the `` of `~/Pages/Shared/_Layout.cshtml`. This script provides the client-side functionality for all Syncfusion components.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Layout.cshtml" %}
-
-
- ...
@@ -116,11 +100,11 @@ Add the Syncfusion JavaScript library using the CDN inside the `` of `~/Pa
{% endhighlight %}
{% endtabs %}
-To use locally available script and style resources, follow these [instructions](./how-to/local-resources#configuring-pdf-viewer-with-local-styles-and-scripts)
+N> To learn other ways to load themes or scripts (such as [NPM packages](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm) or [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator)), see the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme) and [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references) documentation.
## Register Syncfusion® Script Manager
-Open the `~/Pages/Shared/_Layout.cshtml` page and register the script manager at the end of the `` tag. The script manager initializes Syncfusion components and manages their life cycle.
+Open the `~/Pages/Shared/_Layout.cshtml` page and register the script manager. The script manager initializes Syncfusion components and manages their life cycle.
{% tabs %}
{% highlight c# tabtitle="~/_Layout.cshtml" %}
@@ -139,7 +123,7 @@ N> Add the script manager `` at the end of the `` element.
## Add ASP.NET Core PDF Viewer control
-Add the Syncfusion® ASP.NET Core PDF Viewer Tag Helper in `~/Pages/Index.cshtml`. The `documentPath` property specifies the PDF document to load.
+Add the Syncfusion® ASP.NET Core PDF Viewer Tag Helper in `~/Pages/Index.cshtml`.
{% tabs %}
{% highlight c# tabtitle="~/Index.cshtml" %}
@@ -159,14 +143,22 @@ Add the Syncfusion® ASP.NET Core PDF Viewer
{% endhighlight %}
{% endtabs %}
-To use the `resourceUrl` and `documentPath` locally with the PDF Viewer, follow these [instructions](./how-to/local-resources#configuring-pdf-viewer-for-locally-available-pdf-documents-and-local-resources).
+N> The `documentPath` property specifies the PDF document to load in the viewer. To use the `resourceUrl` and `documentPath` with locally available PDF documents and resources, follow these [instructions](./how-to/local-resources#configuring-pdf-viewer-for-locally-available-pdf-documents-and-local-resources).
## Run the application
-Run the app to display the PDF in the Syncfusion® ASP.NET Core PDF Viewer in the browser.
+Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core PDF Viewer control will be rendered in the default web browser.
+[View sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Getting-Started-Examples/tree/main/PDFViewer/ASP.NET%20Core%20Tag%20Helper%20Examples%20-%20Standalone%20PDF%20Viewer)
+
+## Video tutorial
+
+To get started quickly with the ASP.NET Core PDF Viewer, you can watch this video:
+
+{% youtube "https://www.youtube.com/watch?v=cfWATpUjNgo&t=1s" %}
+
## See also
* [Getting started with Syncfusion® ASP.NET Core using Server backed](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/getting-started-with-server-backed)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/AspNetMVC_Images/pdfviewer-control.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/AspNetMVC_Images/pdfviewer-control.png
index 46fb505fbe..ecddea578f 100644
Binary files a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/AspNetMVC_Images/pdfviewer-control.png and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/AspNetMVC_Images/pdfviewer-control.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/getting-started-with-server-backed.md
index e31c6a09a1..071c42a4be 100644
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/getting-started-with-server-backed.md
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/getting-started-with-server-backed.md
@@ -21,7 +21,7 @@ This guide shows how to integrate the [ASP.NET MVC PDF Viewer](https://www.syncf
- [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started)
-## Install NuGet packages
+## Install Syncfusion ASP.NET MVC Package in the application
Install the following NuGet packages to add the PDF Viewer to the ASP.NET MVC application.
@@ -32,39 +32,25 @@ Install the following NuGet packages to add the PDF Viewer to the ASP.NET MVC ap
Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder.
-```
+{% tabs %}
+{% highlight c# tabtitle="~/Views/web.config" %}
-```
-
-## Add the style sheet
-
-Reference a theme from the CDN inside the `` of `~/Views/Shared/_Layout.cshtml` as follows:
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Layout.cshtml" %}
-
-
- ...
-
-
-
-
{% endhighlight %}
{% endtabs %}
-N> Check out the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentation/appearance/theme) to learn different ways (CDN, NPM package, and [CRG](https://ej2.syncfusion.com/aspnetmvc/documentation/common/custom-resource-generator)) to reference styles in an ASP.NET MVC application and ensure consistent appearance for Syncfusion® ASP.NET MVC controls.
+## Add the style sheet and script reference
-## Add the script reference
-
-Add the required scripts from the CDN inside the `` of `~/Views/Shared/_Layout.cshtml` as follows:
+Reference a theme and the required scripts from the CDN inside the `` of `~/Views/Shared/_Layout.cshtml` as follows:
{% tabs %}
{% highlight c# tabtitle="~/_Layout.cshtml" %}
...
+
+
@@ -72,6 +58,8 @@ Add the required scripts from the CDN inside the `` of `~/Views/Shared/_La
{% endhighlight %}
{% endtabs %}
+N> To learn other ways to load themes or scripts (such as [NPM packages](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references#node-package-manager-npm) or [CRG](https://ej2.syncfusion.com/aspnetmvc/documentation/common/custom-resource-generator)), see the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentation/appearance/theme) and [Adding Script Reference](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references) documentation. To configure PDF Viewer with locally available script and style resources, follow these [instructions](./how-to/local-resources#configuring-pdf-viewer-with-local-styles-and-scripts).
+
## Register the Syncfusion® script manager
Open `~/Views/Shared/_Layout.cshtml` and register the script manager in the ASP.NET MVC application as follows:
@@ -124,6 +112,8 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m
+[View sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Getting-Started-Examples/tree/main/PDFViewer/ASP.NET%20MVC%20Razor%20Examples)
+
## Deployment notes
- Unlike the standalone PDF Viewer which performs client-side rendering, the server-backed PDF Viewer processes and renders PDFs entirely on the server. As a result, the following files are **not required** and should be omitted during deployment:
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/getting-started.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/getting-started.md
index 943325137b..73412a1be7 100644
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/getting-started.md
@@ -21,7 +21,7 @@ This guide explains how to integrate the [ASP.NET MVC PDF Viewer](https://www.sy
- [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started)
-## ASP.NET MVC PDF Viewer NuGet packages installation
+## Install Syncfusion ASP.NET MVC Package in the application
To add .NET PDF Viewer control, the following NuGet packages need to be installed in your ASP.NET MVC application.
@@ -31,39 +31,25 @@ To add .NET PDF Viewer control, the following NuGet packages need to be installe
Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder.
-```
+{% tabs %}
+{% highlight c# tabtitle="~/Views/web.config" %}
-```
-
-## Add style sheet
-
-The theme is referenced by using a CDN inside the `` of `~/Views/Shared/_Layout.cshtml` as follows:
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Layout.cshtml" %}
-
-
- ...
-
-
-
-
{% endhighlight %}
{% endtabs %}
-N> Check out the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentation/appearance/theme) to learn different ways (CDN, NPM package, and [CRG](https://ej2.syncfusion.com/aspnetmvc/documentation/common/custom-resource-generator)) to reference styles in an ASP.NET MVC application and ensure the expected appearance for Syncfusion® ASP.NET MVC controls.
+## Add style sheet and script reference
-## Add script reference
-
-Add the required scripts from the CDN inside the `` of `~/Views/Shared/_Layout.cshtml` as follows:
+The theme and required scripts are referenced by using a CDN inside the `` of `~/Views/Shared/_Layout.cshtml` as follows:
{% tabs %}
{% highlight c# tabtitle="~/_Layout.cshtml" %}
...
+
+
@@ -71,7 +57,7 @@ Add the required scripts from the CDN inside the `` of `~/Views/Shared/_La
{% endhighlight %}
{% endtabs %}
-To configure PDF Viewer with locally available script and style resources, follow these [instructions](./how-to/local-resources#configuring-pdf-viewer-with-local-styles-and-scripts).
+N> To learn other ways to load themes or scripts (such as [NPM packages](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references#node-package-manager-npm) or [CRG](https://ej2.syncfusion.com/aspnetmvc/documentation/common/custom-resource-generator)), see the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentation/appearance/theme) and [Adding Script Reference](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references) documentation. To configure PDF Viewer with locally available script and style resources, follow these [instructions](./how-to/local-resources#configuring-pdf-viewer-with-local-styles-and-scripts).
## Register Syncfusion® Script Manager
@@ -93,7 +79,7 @@ N> Add the script manager `EJS().ScriptManager()` at the **end of ``**.
## Add ASP.NET MVC PDF Viewer control
-Add the Syncfusion® ASP.NET MVC PDF Viewer control in `~/Views/Home/Index.cshtml`. Load a PDF by setting the `DocumentPath` property to a file name or URL, as shown below.
+Add the Syncfusion® ASP.NET MVC PDF Viewer control in `~/Views/Home/Index.cshtml`.
{% tabs %}
{% highlight c# tabtitle="~/Index.cshtml" %}
@@ -112,7 +98,7 @@ Add the Syncfusion® ASP.NET MVC PDF Viewer
{% endhighlight %}
{% endtabs %}
-To configure [`ResourceUrl`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) and [`DocumentPath`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_DocumentPath) with locally available resources, follow these [instructions](./how-to/local-resources#configuring-pdf-viewer-for-locally-available-pdf-documents-and-local-resources).
+N> The `DocumentPath` property specifies the PDF document to load in the viewer. To configure [`ResourceUrl`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) and [`DocumentPath`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_DocumentPath) with locally available resources, follow these [instructions](./how-to/local-resources#configuring-pdf-viewer-for-locally-available-pdf-documents-and-local-resources).
## Run the application
@@ -120,6 +106,8 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m
+[View sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Getting-Started-Examples/tree/main/PDFViewer/ASP.NET%20MVC%20Razor%20Examples)
+
## See also
- [Getting started with Server-Backed ASP.NET MVC PDF Viewer](./getting-started-with-server-backed)
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/gettingstarted-images/blazor-pdfviewer.png b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/gettingstarted-images/blazor-pdfviewer.png
index 27589690a7..dba3e61694 100644
Binary files a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/gettingstarted-images/blazor-pdfviewer.png and b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/gettingstarted-images/blazor-pdfviewer.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md
index 25c867827e..4bdc4d4eed 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md
@@ -1,15 +1,15 @@
---
layout: post
-title: Deploy SfPdfViewer in Blazor .NET MAUI on Windows | Syncfusion
+title: Getting Started PDF Viewer .NET MAUI Blazor Hybrid App | Syncfusion
description: Learn how to deploy the Syncfusion Blazor SfPdfViewer component in a Blazor .NET MAUI application on Windows.
platform: document-processing
control: SfPdfViewer
documentation: ug
---
-# View PDF files using the PDF Viewer in a Blazor .NET MAUI app
+# Getting Started with the PDF Viewer in .NET MAUI Blazor Hybrid App
-This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor .NET MAUI app and deploy it on Windows.
+This section explains how to create and run a .NET MAUI Blazor Hybrid application using the [Syncfusion® Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) component.
## Prerequisites
@@ -17,20 +17,31 @@ To use the .NET MAUI project templates, install the Mobile development with .NET
## Create a new Blazor .NET MAUI app in Visual Studio
-Create a new Blazor .NET MAUI app named **PDFViewerGettingStarted**.
+Create a **Blazor MAUI App** named **PDFViewerGettingStarted** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0).
N> The PDF Viewer supports .NET 8.0 and later.
-## Install PDF Viewer NuGet packages
+## Install Syncfusion® Blazor SfPdfViewer NuGet Packages
-Install the following NuGet packages in the Blazor .NET MAUI app.
+To add **Syncfusion Blazor SfPdfViewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install:
* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer)
-* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
+* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
-## Register Syncfusion Blazor service
+Alternatively, you can utilize the following package manager command to achieve the same.
-* In the **~/_Imports.razor** file, add the following namespaces:
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.SfPdfViewer -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add import namespaces
+
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SfPdfViewer` namespaces.
{% tabs %}
{% highlight razor tabtitle="~/_Imports.razor" %}
@@ -41,7 +52,9 @@ Install the following NuGet packages in the Blazor .NET MAUI app.
{% endhighlight %}
{% endtabs %}
-* Register Syncfusion Blazor service in the **~/MauiProgram.cs** file.
+## Register Syncfusion® Blazor Service
+
+Register the Syncfusion® Blazor service in the **~/MauiProgram.cs** file.
{% tabs %}
{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="3 20 28" %}
@@ -81,12 +94,12 @@ public static class MauiProgram
{% endhighlight %}
{% endtabs %}
-## Add stylesheet and script
+## Add stylesheet and script resources
-Add the following stylesheet and script to the head and body sections of **~/wwwroot/index.html**.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script at the end of the `` in the **~/wwwroot/index.html** file as shown below:
{% tabs %}
-{% highlight html hl_lines="3 7" %}
+{% highlight html tabtitle="index.html" hl_lines="3 7" %}
@@ -100,15 +113,16 @@ Add the following stylesheet and script to the head and body sections of **~/www
{% endhighlight %}
{% endtabs %}
-## Add the PDF Viewer component
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+
+## Add Syncfusion® Blazor PDF Viewer Component
Add the Syncfusion® PDF Viewer (Next-Gen) component to **~/Pages/Index.razor**.
{% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
@page "/"
-
@using Syncfusion.Blazor.SfPdfViewer
If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
## Run on Windows
-Run the app on Windows.
+In the Visual Studio toolbar, click the **Windows Machine** to build and run the app. Ensure the run profile is set to `Windows Machine` before starting the app.
@@ -147,14 +161,11 @@ N> If any errors occur while using the Android Emulator, see [Troubleshooting An
-N> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20.NET%20MAUI/MauiBlazorWindow).
+N> To learn how to open, view, or interact with PDF files in the PDF Viewer component, see [Open and Save](.././opening-pdf-file). For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20.NET%20MAUI/MauiBlazorWindow).
-## See also
+## See Also
* [Getting Started with Blazor PDF Viewer Component in WinForms Blazor Hybrid App](./winforms-blazor-app)
-
* [Getting Started with Blazor PDF Viewer Component in WPF Blazor Hybrid App](./wpf-blazor-app)
-
* [Supported features: desktop vs. mobile](./features#supported-features-desktop-vs-mobile)
-
* [Render a PDF document from an embedded source in the .NET MAUI Android app](../faqs/how-to-deploy-maui-using-android-emulator)
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md
index b767ae90e5..2b265a9432 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md
@@ -1,15 +1,15 @@
---
layout: post
-title: Getting started with SfPdfViewer in a Blazor Web App | Syncfusion
+title: Getting Started with Blazor PDF Viewer Component | Syncfusion
description: Learn how to get started with the SfPdfViewer control in a Blazor Web App to view, comment on, and fill PDF forms.
platform: document-processing
control: SfPdfViewer
documentation: ug
---
-# View PDF files using the PDF Viewer in a Blazor Web App
+# Getting Started with the Blazor PDF Viewer in Web App
-This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code.
+This section briefly explains how to include the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
{% tabcontents %}
@@ -19,9 +19,9 @@ This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-N> If using an interactive render mode such as `WebAssembly` or `Auto`, ensure the required .NET workloads are installed for SkiaSharp usage in a Blazor Web App. Run the following command:
-* dotnet workload install wasm-tools
-* The above code will only install the latest available workload on the machine, such as .NET 10. If you need to install a specific .NET version like .NET 9 or .NET 8, please use a command such as `dotnet workload install wasm-tools-net8` and `dotnet workload install wasm-tools-net9`.
+N> If using interactive render modes (WebAssembly or Auto), install the required .NET workloads for SkiaSharp: `dotnet workload install wasm-tools`
+* Installs the latest SDK workload (e.g., .NET 10)
+* For specific versions, use wasm-tools-net8 or wasm-tools-net9
## Create a new Blazor Web App in Visual Studio
@@ -29,31 +29,26 @@ Create a Blazor Web App using Visual Studio 2022 via [Microsoft Templates](https
N> Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) when creating a Blazor Web App.
-## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages
+## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages in the App
-To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package).
+To add **Syncfusion Blazor SfPdfViewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
-Alternatively, run the following command in the Package Manager Console to achieve the same.
+If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install Syncfusion® Blazor components NuGet packages within the client project.
-{% tabs %}
+Alternatively, you can utilize the following package manager command to achieve the same.
-{% highlight c# tabtitle="Package Manager" %}
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
-dotnet add package Syncfusion.Blazor.SfPdfViewer -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.SfPdfViewer -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
-
{% endtabs %}
-If using the `WebAssembly` or `Auto` interactive render mode, install the NuGet packages in the client project to add the component to the Web App.
-
-N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this version is referenced.
+N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this version is referenced.
* [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1)
-
-
{% endtabcontent %}
{% tabcontent Visual Studio Code %}
@@ -62,9 +57,9 @@ N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this vers
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-N> If using an interactive render mode such as WebAssembly or Auto, ensure the required .NET workloads are installed for SkiaSharp usage in a Blazor Web App. Run the following command:
-* dotnet workload install wasm-tools
-* The above code will only install the latest available workload on the machine, such as .NET 10. If you need to install a specific .NET version like .NET 9 or .NET 8, please use a command such as `dotnet workload install wasm-tools-net8` and `dotnet workload install wasm-tools-net9`.
+N> If using interactive render modes (WebAssembly or Auto), install the required .NET workloads for SkiaSharp: `dotnet workload install wasm-tools`
+* Installs the latest SDK workload (e.g., .NET 10)
+* For specific versions, use wasm-tools-net8 or wasm-tools-net9
## Create a new Blazor Web App in Visual Studio Code
@@ -84,11 +79,13 @@ cd BlazorWebApp.Client
N> Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) when creating a Blazor Web App.
-## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages
+## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages in the App
-To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package).
+If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install Syncfusion® Blazor components NuGet packages within the client project.
-Alternatively, run the following command in the Package Manager Console to achieve the same.
+* Press Ctrl+` to open the integrated terminal in Visual Studio Code.
+* Ensure you're in the project root directory where your `.csproj` file is located.
+* Run the following command to install [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
{% tabs %}
@@ -102,13 +99,11 @@ dotnet restore
{% endtabs %}
-If using the `WebAssembly` or `Auto` interactive render mode, install the NuGet packages in the client project to add the component to the Web App.
+N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this version is referenced.
* [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1)
-
-
{% endtabcontent %}
{% endtabcontents %}
@@ -130,8 +125,6 @@ After the package is installed, open the ~/_Imports.razor file from the client p
Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App.
-N> If the interactive render mode is set to WebAssembly or Auto, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App.
-
{% tabs %}
{% highlight c# tabtitle="(~/Program.cs) Server" hl_lines="2 9 11 13" %}
@@ -198,11 +191,11 @@ var app = builder.Build();
{% endhighlight %}
{% endtabs %}
-N> [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size)
+N> If the interactive render mode is set to WebAssembly or Auto, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size)
-## Add stylesheet and script
+## Add stylesheet and script resources
-Add the following stylesheet and script to the head section of **~/Components/App.razor**.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file.
{% tabs %}
{% highlight razor tabtitle="App.razor" hl_lines="3 7" %}
@@ -219,31 +212,23 @@ Add the following stylesheet and script to the head section of **~/Components/Ap
{% endhighlight %}
{% endtabs %}
-## Add Blazor PDF Viewer component
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
-Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~/Pages/*.razor** file. If interactivity location is Per page/component, define a render mode at the top of the page as follows:
+## Add Syncfusion® Blazor PDF Viewer component
-| Interactivity location | RenderMode | Code |
-| --- | --- | --- |
-| Per page/component | Auto | @rendermode InteractiveAuto |
-| | WebAssembly | @rendermode InteractiveWebAssembly |
-| | Server | @rendermode InteractiveServer |
-| | None | --- |
+Add the Syncfusion Blazor PDF Viewer (Next-Gen) component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
-N> If the interactivity location is set to Global and the render mode is set to Auto, WebAssembly, or Server, the render mode is configured in the App.razor file by default.
-
- Enable interactivity only via client-side rendering (CSR) by using the WebAssembly or Auto option
+N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
{% tabs %}
{% highlight razor %}
-@* Your App render mode define here *@
+@* desired render mode define here *@
@rendermode InteractiveAuto
{% endhighlight %}
{% endtabs %}
-
Add the Syncfusion® PDF Viewer component in **~/Pages/Index.razor**.
{% tabs %}
@@ -260,13 +245,15 @@ Add the Syncfusion® PDF Viewer component in
N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF. Use the **Open** toolbar option to browse and open a PDF.
-## Run the app
+* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor PDF Viewer in your default web browser.
+
+
-Run the app to display the PDF in the Syncfusion® Blazor PDF Viewer in the browser.
+You can also experiment directly using the interactive playground below for a quick demo:
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Web App SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png)" %}
+{% playground "https://blazorplayground.syncfusion.com/embed/hXhHtILIfHjHlTTE?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2" %}
-N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WebAppServerMode).
+N> To learn how to open, view, or interact with PDF files in the PDF Viewer component, see [Open and Save](.././opening-pdf-file). For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WebAppServerMode).
## See also
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md
index 04812e301a..8e0f952148 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md
@@ -1,15 +1,15 @@
---
layout: post
-title: Getting started with SfPdfViewer in a Blazor WASM app | Syncfusion
+title: Getting Started with Blazor PDF Viewer Component in WASM | Syncfusion
description: Learn how to get started with the Syncfusion Blazor SfPdfViewer component in a Blazor WebAssembly (WASM) app.
platform: document-processing
control: SfPdfViewer
documentation: ug
---
-# View PDF files using the PDF Viewer in a Blazor WebAssembly (WASM) app
+# Getting Started with the PDF Viewer in Blazor WebAssembly (WASM) app
-This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor WebAssembly (WASM) app using Visual Studio or Visual Studio Code. A fully functional example project is available in the [GitHub repository](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20WebAssembly).
+This section briefly explains how to include the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
{% tabcontents %}
@@ -19,34 +19,32 @@ This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-N> To use the PDF Viewer with SkiaSharp in a Blazor WebAssembly app, ensure the required .NET workloads are installed by running:
-* dotnet workload install wasm-tools
-* dotnet workload install wasm-tools-net8 (For .NET 8.0) or dotnet workload install wasm-tools-net9 (For .NET 9.0) or dotnet workload install wasm-tools-net10 (For .NET 10.0)
+N> For WebAssembly Application, install the required .NET workloads for SkiaSharp: `dotnet workload install wasm-tools`
+* Installs the latest SDK workload (e.g., .NET 10)
+* For specific versions, use wasm-tools-net8 or wasm-tools-net9
## Create a new Blazor App in Visual Studio
You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
-## Install NuGet packages
+## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages
-To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package).
+To add **Syncfusion Blazor SfPdfViewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
-Alternatively, run the following command in the Package Manager Console to achieve the same.
+Alternatively, you can utilize the following package manager command to achieve the same.
{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.SfPdfViewer -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet add package SkiaSharp.Views.Blazor -v 3.119.1
-dotnet restore
+Install-Package Syncfusion.Blazor.SfPdfViewer -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+Install-Package SkiaSharp.Views.Blazor -Version 3.119.1
{% endhighlight %}
-
{% endtabs %}
-N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this version is referenced.
+N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this version is referenced.
+* [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1)
{% endtabcontent %}
@@ -56,9 +54,9 @@ N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this vers
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-N> To use the PDF Viewer with SkiaSharp in a Blazor WebAssembly app, ensure the required .NET workloads are installed by running:
-* dotnet workload install wasm-tools
-* dotnet workload install wasm-tools-net8 (For .NET 8.0) or dotnet workload install wasm-tools-net9 (For .NET 9.0) or dotnet workload install wasm-tools-net10 (For .NET 10.0)
+N> For WebAssembly Application, install the required .NET workloads for SkiaSharp: `dotnet workload install wasm-tools`
+* Installs the latest SDK workload (e.g., .NET 10)
+* For specific versions, use wasm-tools-net8 or wasm-tools-net9
## Create a new Blazor App in Visual Studio Code
@@ -78,11 +76,11 @@ cd BlazorApp
{% endtabs %}
-## Install Syncfusion® Blazor NuGet packages in the app
-
-To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package).
+## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages
-Alternatively, run the following command in the Package Manager Console to achieve the same.
+N> Press Ctrl+` to open the integrated terminal in Visual Studio Code.
+* Ensure you're in the project root directory where your `.csproj` file is located.
+* Run the following command to install [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
{% tabs %}
@@ -97,7 +95,10 @@ dotnet restore
{% endtabs %}
+N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+
N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this version is referenced.
+* [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1)
{% endtabcontent %}
@@ -105,7 +106,7 @@ N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this vers
## Add import namespaces
-* In the **~/_Imports.razor** file, add the following namespaces:
+After the package is installed, open the ~/_Imports.razor file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SfPdfViewer` namespaces.
{% tabs %}
{% highlight razor tabtitle="~/_Imports.razor" %}
@@ -118,7 +119,7 @@ N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this vers
## Register Syncfusion® Blazor Service
-* Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly App.
{% tabs %}
{% highlight C# tabtitle="(~/Program.cs)" hl_lines="3 9 13" %}
@@ -141,9 +142,9 @@ await builder.Build().RunAsync();
{% endhighlight %}
{% endtabs %}
-## Add stylesheet and script
+## Add stylesheet and script resources
-Add the following stylesheet and script to the head section of **wwwroot/index.html**.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **wwwroot/index.html** file.
{% tabs %}
{% highlight razor tabtitle="index.html" hl_lines="3 7" %}
@@ -160,9 +161,9 @@ Add the following stylesheet and script to the head section of **wwwroot/index.h
{% endhighlight %}
{% endtabs %}
-## Add Blazor PDF Viewer component
+## Add Syncfusion® Blazor PDF Viewer Component
-Add the Syncfusion® PDF Viewer (Next-Gen) component to **~/Pages/Index.razor**.
+Add the Syncfusion® PDF Viewer (Next-Gen) component in **~/Pages/Home.razor**.
{% tabs %}
{% highlight razor tabtitle="Home.razor" %}
@@ -179,13 +180,15 @@ Add the Syncfusion® PDF Viewer (Next-Gen) c
N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF. Use the **Open** toolbar option to browse and open a PDF.
-## Run the app
+* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor PDF Viewer in your default web browser.
+
+
-Run the app to display the PDF in the Syncfusion® Blazor PDF Viewer in the browser.
+You can also experiment directly using the interactive playground below for a quick demo:
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor WebAssembly SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png)" %}
+{% playground "https://blazorplayground.syncfusion.com/embed/hXhHtILIfHjHlTTE?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2" %}
-N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WasmStandalone).
+N> To learn how to open, view, or interact with PDF files in the PDF Viewer component, see [Open and Save](.././opening-pdf-file). For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WasmStandalone).
## See also
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started-with-server-backed.md
index 76a98fc7ec..2ed1f24fcf 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started-with-server-backed.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started-with-server-backed.md
@@ -20,7 +20,15 @@ This example uses a simple HTML-based setup with CDN links for Syncfusion compon
### Create application folder
-Create an app folder `my-app` for the Essential JS 2 JavaScript components.
+Create an app folder `pdf-viewer-app` for the Essential JS 2 JavaScript components.
+
+Your application structure should look like this:
+
+```text
+pdf-viewer-app/
+├── index.html
+├── index.js
+```
### Add style and script references
@@ -36,7 +44,7 @@ The Essential JS 2 component's global scripts and styles are hosted at the follo
>
> Styles: [`https://cdn.syncfusion.com/ej2/{{ site.releaseversion }}/ej2-base/styles/material.css`](https://cdn.syncfusion.com/ej2/{{ site.releaseversion }}/ej2-base/styles/material.css)
-Create an HTML page (index.html) in `my-app` location and add the CDN link references.
+Create an HTML page (index.html) in `pdf-viewer-app` location and add the CDN link references.
{% tabs %}
{% highlight html tabtitle="index.html" hl_lines="8 9 10 11 12 13 14 15 16 17 19" %}
@@ -67,27 +75,42 @@ Create an HTML page (index.html) in `my-app` location and add the CDN link refer
## Adding the PDF Viewer component
-Add the `Div` element and initiate the **PDF Viewer** component in the index.html by using the following code.
+Add a container element for the PDF Viewer control in the `index.html` file and then initialize the control.
{% tabs %}
{% highlight html tabtitle="index.html" %}
+
+
+
+ EJ2 PDF Viewer
+
+
-
+
-
+
-
-
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+Now, initialize the PDF Viewer component in the `index.js` file:
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+
+// Initialize PDF Viewer component
+var pdfviewer = new ej.pdfviewer.PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
+});
+
+// PDF Viewer control rendering starts
+pdfviewer.appendTo('#PdfViewer');
{% endhighlight %}
{% endtabs %}
@@ -98,14 +121,20 @@ For creating a new PDF Viewer serviceUrl, follow the steps provided in the [link
## Run the application
-Run the `index.html` in a web browser using a local web server. The PDF document will be rendered in the browser.
+Now run the following command in the console to start the development server. This command serves the application locally on your machine:
```bash
npx serve .
```
+After the application starts, open the localhost URL displayed in the terminal in your web browser. The PDF document will be rendered in the browser. The output will appear as follows:
+
+
+
{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-getting-started-cs1" %}
+[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/Save%20and%20Load/Load%20PDF%20file%20from%20URL)
+
## Deployment notes
- The PDF Viewer supports dynamically changing the [serviceURL](https://ej2.syncfusion.com/documentation/api/pdfviewer#serviceurl). After changing `serviceUrl` at runtime, call `pdfViewer.dataBind()` to apply the new value. This behavior applies to versions after 23.1.36.
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md
index 6ffe687c3e..dd4a95ac30 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md
@@ -12,31 +12,117 @@ domainurl: ##DomainURL##
This guide explains how to create and run a **JavaScript (ES5) PDF Viewer** application using Syncfusion Essential JS 2 in **standalone mode**.
-> **Note:** Standalone mode renders PDF files directly in the browser without requiring a server-side web service. Essential JS 2 for JavaScript provides an ES5-compatible global script build that works in modern browsers without a build step.
-
## Setup the development environment
This example uses a simple HTML-based setup with CDN links for Syncfusion components.
### Create application folder
-Create an app folder `my-app` for the Essential JS 2 JavaScript components.
+Create an app folder `pdf-viewer-app` for the Essential JS 2 JavaScript components.
+
+Your application structure should look like this:
+
+```text
+pdf-viewer-app/
+├── index.html
+├── index.js
+```
### Add style and script references
-The Essential JS 2 component's global scripts and styles are hosted at the following CDN link formats.
+Add the required Syncfusion® PDF Viewer style and script references to the `index.html` file using one of the following methods:
+
+{% tabcontents %}
+
+{% tabcontent Using Local Resources %}
+
+To use local scripts and styles for the Syncfusion® PDF Viewer, follow these steps:
+
+1. Download the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2) build](https://www.syncfusion.com/downloads/essential-js2/) installed on your machine.
**Syntax:**
-> Script: `https://cdn.syncfusion.com/ej2/{Version}/dist/{PACKAGE_NAME}.min.js`
+> Script: `**(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web(Essential JS 2)/JavaScript/{PACKAGE_NAME}/dist/{PACKAGE_NAME}.min.js`
>
-> Styles: `https://cdn.syncfusion.com/ej2/{Version}/{PACKAGE_NAME}/styles/material.css`
+> Styles: `**(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web(Essential JS 2)/JavaScript/{PACKAGE_NAME}/styles/material.css`
**Example:**
-> Script: [`https://cdn.syncfusion.com/ej2/{{ site.releaseversion }}/dist/ej2.min.js`](https://cdn.syncfusion.com/ej2/{{ site.releaseversion }}/dist/ej2.min.js)
+> Script: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/19.3.53/Web(Essential JS 2)/JavaScript/ej2/dist/ej2.min.js`
+>
+> Styles: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/19.3.53/Web(Essential JS 2)/JavaScript/ej2-js-es5/styles/material.css`
+
+Alternatively, clone the [`Essential JS 2 quickstart`](https://github.com/syncfusion/ej2-quickstart.git) project and install the required packages by running the following commands.
+
+```
+git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
+cd quickstart
+npm install
+```
+
+2. Download the `pdfium.js` and `pdfium.wasm` files from the following links:
+
+**Syntax:**
+> `pdfium.js`: `https://cdn.syncfusion.com/ej2/{Version}/dist/ej2-pdfviewer-lib/pdfium.js`
>
-> Styles: [`https://cdn.syncfusion.com/ej2/{{ site.releaseversion }}/ej2-base/styles/material.css`](https://cdn.syncfusion.com/ej2/{{ site.releaseversion }}/ej2-base/styles/material.css)
+> `pdfium.wasm`: `https://cdn.syncfusion.com/ej2/{Version}/dist/ej2-pdfviewer-lib/pdfium.wasm`
+
+**Example:**
+> `pdfium.js`: [`https://cdn.syncfusion.com/ej2/{{ site.releaseversion }}/dist/ej2-pdfviewer-lib/pdfium.js`](https://cdn.syncfusion.com/ej2/{{ site.releaseversion }}/dist/ej2-pdfviewer-lib/pdfium.js)
+>
+> `pdfium.wasm`: [`https://cdn.syncfusion.com/ej2/{{ site.releaseversion }}/dist/ej2-pdfviewer-lib/pdfium.wasm`](https://cdn.syncfusion.com/ej2/{{ site.releaseversion }}/dist/ej2-pdfviewer-lib/pdfium.wasm)
+
+3. Create a folder named `pdf-viewer-app/resources` and copy the EJ2 scripts and styles from the installed location into the `pdf-viewer-app/resources` directory. Include the `ej2-pdfviewer-lib` folder and PDF documents in the same location. The `ej2-pdfviewer-lib` folder should contain `pdfium.js` and `pdfium.wasm` files.
+
+4. Add the PDF Viewer and its dependent control style and script references inside the `` section of your `index.html` file using local resources.
+
+{% tabs %}
+{% highlight html tabtitle="index.html" %}
+
+
+ EJ2 PDF Viewer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
-Create an HTML page (index.html) in `my-app` location and add the CDN link references.
+{% tabcontent Using CDN Links %}
+
+Reference the scripts and styles directly from the CDN.
+
+```text
+Script: https://cdn.syncfusion.com/ej2/{VERSION}/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
+Style: https://cdn.syncfusion.com/ej2/{VERSION}/{PACKAGE_NAME}/styles/{THEME_NAME}.css
+```
+
+Create an HTML page (index.html) in `pdf-viewer-app` location and add the CDN link references.
{% tabs %}
{% highlight html tabtitle="index.html" hl_lines="8 9 10 11 12 13 14 15 16 17 19" %}
@@ -45,7 +131,7 @@ Create an HTML page (index.html) in `my-app` location and add the CDN link refer
EJ2 PDF Viewer
-
+
@@ -65,45 +151,99 @@ Create an HTML page (index.html) in `my-app` location and add the CDN link refer
{% endhighlight %}
{% endtabs %}
+{% endtabcontent %}
+
+{% endtabcontents %}
+
## Adding the PDF Viewer component
-Add the `Div` element and initiate the **PDF Viewer** component in the index.html by using the following code.
+Add a container element for the PDF Viewer control in the `index.html` file and then initialize the control.
{% tabs %}
{% highlight html tabtitle="index.html" %}
+
+
+
+ EJ2 PDF Viewer
+
+
-
+
-
+
-
-
+
+
{% endhighlight %}
{% endtabs %}
-To configure PDF Viewer with local resources for script and style references, and the `documentPath` and `resourceUrl` properties, refer to the [instructions](./how-to/use-local-script-and-style-references) here.
+Now, initialize the PDF Viewer component in the `index.js` file:
+
+{% tabcontents %}
+
+{% tabcontent Using Local Resources %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+
+// Initialize PDF Viewer component
+var pdfviewer = new ej.pdfviewer.PdfViewer({
+ documentPath: window.location.origin + '/resources/pdfsuccinctly.pdf',
+ resourceUrl: window.location.origin + '/resources/ej2-pdfviewer-lib'
+});
+
+// PDF Viewer control rendering starts
+pdfviewer.appendTo('#PdfViewer');
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% tabcontent Using CDN Links %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+
+// Initialize PDF Viewer component
+var pdfviewer = new ej.pdfviewer.PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/{{ site.releaseversion }}/dist/ej2-pdfviewer-lib'
+});
+
+// PDF Viewer control rendering starts
+pdfviewer.appendTo('#PdfViewer');
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+N> The `documentPath` property is used to set the path of the PDF file to be loaded in the PDF Viewer. The `resourceUrl` property is used to set the path of the PDF Viewer library resources required for PDF rendering. For local resources, ensure the `ej2-pdfviewer-lib` folder contains the required `pdfium.js` and `pdfium.wasm` files.
## Run the application
-Run the `index.html` in a web browser using a local web server. The PDF document will be rendered in the browser.
+Now run the following command in the console to start the development server. This command serves the application locally on your machine:
```bash
npx serve .
```
+After the application starts, open the localhost URL displayed in the terminal in your web browser. The PDF document will be rendered in the browser. The output will appear as follows:
+
+
+
+You can also explore the PDF Viewer interactively using the live sample below.
+
{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/es5-getting-started-cs2" %}
+[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Refer%20resource%20url%20locally)
+
## See also
- [Getting started with Server-Backed JavaScript PDF Viewer](./getting-started)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/pdfviewer-control.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/pdfviewer-control.png
new file mode 100644
index 0000000000..ecddea578f
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/pdfviewer-control.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started-with-server-backed.md
index 6ae6c34c0f..9475630e8e 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started-with-server-backed.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started-with-server-backed.md
@@ -12,43 +12,55 @@ domainurl: ##DomainURL##
This guide explains how to create and run the **TypeScript PDF Viewer in server-backed mode**. In this mode, PDF rendering and processing are performed on a server-side web service, while the TypeScript application acts as the client.
-> **Note:** This guide supports recent versions of Essential JS 2. Server-backed mode is recommended for large files, restricted client environments, or server-side processing requirements.
+## Prerequisites
----
+To get started, ensure the following software is installed on your machine:
-## Setup the development environment
+- [Git](https://git-scm.com/downloads)
+- [Node.js (`v14.15.0` or later)](https://nodejs.org/en/)
+- [Visual Studio Code](https://code.visualstudio.com/)
+## Create a TypeScript application
-Open a command prompt in the target directory and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack).
+Create a simple TypeScript application using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository.
-This example uses the Syncfusion Essential JS 2 **quickstart webpack project**.
+> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/).
-### Clone the quickstart project
+**Step 1:** Open the command prompt from the required directory and clone the quickstart project from GitHub.
```bash
git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart
-cd ej2-quickstart
```
-### Install dependencies
+**Step 2:** Navigate to the `ej2-quickstart` folder.
```bash
-npm install
+cd ej2-quickstart
```
----
+**Step 3:** By default, the `ej2-quickstart` repository is preconfigured with the [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in `~/package.json`. This package installs all Syncfusion Essential JS 2 components, including the PDF Viewer and other EJ2 controls.
-## Installing Syncfusion® PDF Viewer package
+To install **only the PDF Viewer component**, replace the dependency with [@syncfusion/ej2-pdfviewer](https://www.npmjs.com/package/@syncfusion/ej2-pdfviewer) in `package.json`:
-The quickstart project already includes the `@syncfusion/ej2` meta package. No additional installation is required if it is present.
+```json
+"dependencies": {
+ "@syncfusion/ej2-pdfviewer": "*"
+}
+```
----
+**Step 4:** Install the dependent npm packages.
-## Adding CSS references
+```bash
+npm install
+```
+
+## Add CSS references
Add the required Syncfusion styles to `src/styles/styles.css`:
-```css
+{% tabs %}
+{% highlight css tabtitle="~/src/styles/styles.css" %}
+
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@@ -58,9 +70,11 @@ Add the required Syncfusion styles to `src/styles/styles.css`:
@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
-```
----
+{% endhighlight %}
+{% endtabs %}
+
+N> Refer to the [Themes topic](https://ej2.syncfusion.com/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a TypeScript project.
## Add the PDF Viewer component
@@ -68,7 +82,8 @@ To load and display a PDF in server-backed mode, configure the PDF Viewer with t
Update `src/app.ts` as shown below:
-```ts
+{% tabs %}
+{% highlight ts tabtitle="~/src/app.ts" %}
import { PdfViewer, Toolbar, Magnification,
Navigation, Annotation, LinkAnnotation,
ThumbnailView, BookmarkView, TextSelection,
@@ -88,18 +103,19 @@ pdfviewer.appendTo('#PdfViewer');
// Load a PDF document through the server
pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', '');
-```
+{% endhighlight %}
+{% endtabs %}
Add a container element in `index.html`:
-```html
+{% tabs %}
+{% highlight html tabtitle="index.html" %}
-```
+{% endhighlight %}
+{% endtabs %}
> **Note:** The Web API service URL shown above is provided for evaluation only. For production, host your own PDF Viewer web service.
----
-
## Run the application
Run the application using the following command:
@@ -108,9 +124,11 @@ Run the application using the following command:
npm start
```
-The application will connect to the configured PDF Viewer web service and render the document in the browser.
+The application will connect to the configured PDF Viewer web service and render the document in the browser. The image below shows how the PDF Viewer is rendered in the browser:
----
+
+
+[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/Save%20and%20Load/Load%20PDF%20file%20from%20URL)
## Run the PDF Viewer web service
@@ -138,11 +156,15 @@ Configure this URL in the `serviceUrl` property of the PDF Viewer.
> **Important:** In server-backed mode, do **not** include `pdfium.js` or `pdfium.wasm`. All rendering is performed on the server.
----
-
N> For hosting the web service on Linux, include [SkiaSharp.NativeAssets.Linux](https://nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1). For AWS environments, use the following packages:
| **Amazon Web Services (AWS)** |**NuGet package name** |
| --- | --- |
| AWS Lambda|[SkiaSharp.NativeAssets.Linux](https://nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)|
-| AWS Elastic Beanstalk |[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)|
\ No newline at end of file
+| AWS Elastic Beanstalk |[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)|
+
+## See also
+
+- [Getting started in TypeScript PDF Viewer](./getting-started)
+- [Open PDF Files](./open-pdf-files)
+- [Save PDF Files](./save-pdf-files)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started.md
index 084f45b0d8..1bd21d31b0 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started.md
@@ -1,4 +1,5 @@
---
+layout: post
title: Setup for Local Development – TypeScript PDF Viewer | Syncfusion
description: Learn how to set up and run the Syncfusion TypeScript PDF Viewer in standalone mode using Essential JS 2.
platform: document-processing
@@ -11,40 +12,55 @@ domainurl: ##DomainURL##
This guide explains how to create and run a **TypeScript PDF Viewer** application using Syncfusion Essential JS 2 in **standalone mode**.
-> **Note:** Standalone mode renders PDF files directly in the browser without requiring a server-side web service.
+## Prerequisites
----
+To get started, ensure the following software is installed on your machine:
+
+- [Git](https://git-scm.com/downloads)
+- [Node.js (`v14.15.0` or later)](https://nodejs.org/en/)
+- [Visual Studio Code](https://code.visualstudio.com/)
-## Setup the development environment
+## Create a TypeScript application
-This example uses the Syncfusion Essential JS 2 quickstart project with a webpack configuration.
+Create a simple TypeScript application using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository.
-### Clone the quickstart project
+> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/).
+
+**Step 1:** Open the command prompt from the required directory and clone the quickstart project from GitHub.
```bash
git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart
-cd ej2-quickstart
```
-### Install dependencies
+**Step 2:** Navigate to the `ej2-quickstart` folder.
```bash
-npm install
+cd ej2-quickstart
```
----
+**Step 3:** By default, the `ej2-quickstart` repository is preconfigured with the [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in `~/package.json`. This package installs all Syncfusion Essential JS 2 components, including the PDF Viewer and other EJ2 controls.
-## Installing Syncfusion® PDF Viewer package
+To install **only the PDF Viewer component**, replace the dependency with [@syncfusion/ej2-pdfviewer](https://www.npmjs.com/package/@syncfusion/ej2-pdfviewer) in `package.json`:
-The quickstart project already includes the `@syncfusion/ej2` meta package. No additional installation is required if it is present.
+```json
+"dependencies": {
+ "@syncfusion/ej2-pdfviewer": "*"
+}
+```
----
+**Step 4:** Install the dependent npm packages.
-## Adding CSS references
+```bash
+npm install
+```
+
+## Add CSS references
Add the required Syncfusion styles to `src/styles/styles.css`:
-```css
+{% tabs %}
+{% highlight css tabtitle="~/src/styles/styles.css" %}
+
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@@ -54,15 +70,19 @@ Add the required Syncfusion styles to `src/styles/styles.css`:
@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
-```
----
+{% endhighlight %}
+{% endtabs %}
+
+N> Refer to the [Themes topic](https://ej2.syncfusion.com/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a TypeScript project.
## Add the PDF Viewer component
Import the PDF Viewer and inject only the required modules. Update `src/app.ts` as shown below:
-```ts
+{% tabs %}
+{% highlight ts tabtitle="~/src/app.ts" %}
+
import { PdfViewer, Toolbar, Magnification, Navigation,
Annotation, LinkAnnotation, ThumbnailView,
BookmarkView, TextSelection, TextSearch,
@@ -85,15 +105,18 @@ import { PdfViewer, Toolbar, Magnification, Navigation,
pdfviewer.resourceUrl =
'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
pdfviewer.appendTo('#PdfViewer');
-```
+
+{% endhighlight %}
+{% endtabs %}
+
Add a container element for the PDF Viewer in `index.html`:
-```html
+{% tabs %}
+{% highlight html tabtitle="index.html" %}
-```
-
----
+{% endhighlight %}
+{% endtabs %}
## Run the application
@@ -103,10 +126,16 @@ Build and launch the application using the following command:
npm start
```
-The PDF document will be rendered in the browser.
+The image below shows how the PDF Viewer is rendered in the browser:
----
+
{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/getting-started-cs2" %}
----
+[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/Save%20and%20Load)
+
+## See also
+
+- [Getting started with Server-Backed TypeScript PDF Viewer](./getting-started-with-server-backed)
+- [Open PDF Files](./open-pdf-files)
+- [Save PDF Files](./save-pdf-files)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/pdfviewer-control.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/pdfviewer-control.png
new file mode 100644
index 0000000000..ecddea578f
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/pdfviewer-control.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Form-Filling-Edit.md b/Document-Processing/PDF/PDF-Viewer/maui/Form-Filling-Edit.md
new file mode 100644
index 0000000000..6c436d1f80
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Form-Filling-Edit.md
@@ -0,0 +1,256 @@
+---
+layout: post
+title: Edit Form Fields in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to edit PDF form fields programmatically using the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
+---
+
+# Edit Form Fields in .NET MAUI PDF Viewer (SfPdfViewer)
+
+The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to programmatically set, modify, and read values for all supported form field types. Use the [FormFields](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_FormFields) collection to retrieve fields by name and cast them to the appropriate type before modifying.
+
+## Editing form fields programmatically
+
+All form field edits shown below should be placed in your page's code-behind (`MainPage.xaml.cs`). The document must be fully loaded before accessing [FormFields](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_FormFields) — call these from the [DocumentLoaded](https://help.syncfusion.com/cr/document-processing/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentLoaded") event handler or a button click after the document is open.
+
+### Editing text form fields
+
+A text form field can be modified using the [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.TextFormField.html#Syncfusion_Maui_PdfViewer_TextFormField_Text) property. The following code snippet illustrates retrieving a text form field named "name" from the PDF Viewer.
+
+{% tabs %}
+{% highlight C# tabtitle="MainPage.xaml.cs" %}
+
+// Call after DocumentLoaded fires, or from a button_Clicked handler.
+FormField formField = pdfViewer.FormFields.Where(x => x.Name == "name").FirstOrDefault();
+
+if (formField is TextFormField nameTextBox)
+{
+ // Set the value of the "name" text field.
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Editing checkbox form fields
+
+By modifying the [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.CheckboxFormField.html#Syncfusion_Maui_PdfViewer_CheckboxFormField_IsChecked) property, the checkbox field can be checked or unchecked programmatically. The following code snippet illustrates retrieving a checkbox form field named "newsletter" from the PDF Viewer.
+
+{% tabs %}
+{% highlight C# %}
+
+FormField formField = PdfViewer.FormFields.Where(x => x.Name == "newsletter").FirstOrDefault();
+
+if (formField is CheckboxFormField checkBox)
+{
+ // Mark the checkbox as checked.
+ checkBox.IsChecked = true;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Editing combo box form fields
+
+The [SelectedItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ComboBoxFormField.html#Syncfusion_Maui_PdfViewer_ComboBoxFormField_SelectedItem) property can be used to programmatically choose an item from the combo box. The [SelectedItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ComboBoxFormField.html#Syncfusion_Maui_PdfViewer_ComboBoxFormField_SelectedItem) should be one of the values from the [ComboBoxFormField.Items](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ComboBoxFormField.html#Syncfusion_Maui_PdfViewer_ComboBoxFormField_Items) array. The following code snippet illustrates retrieving a combobox form field named "state" from the PDF Viewer.
+
+{% tabs %}
+{% highlight C# %}
+
+FormField formField = PdfViewer.FormFields.Where(x => x.Name == "state").FirstOrDefault();
+
+if (formField is ComboBoxFormField comboBox)
+{
+ // Select the desired item from the combo box.
+ comboBox.SelectedItem = comboBox.Items[4];
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Editing list box form fields
+
+The [SelectedItems](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ListBoxFormField.html#Syncfusion_Maui_PdfViewer_ListBoxFormField_SelectedItems) property can be used to programmatically choose an item from the list box. The [SelectedItems](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ListBoxFormField.html#Syncfusion_Maui_PdfViewer_ListBoxFormField_SelectedItems) should contain only the values from the [ListBoxFormFields.Items](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ListBoxFormField.html#Syncfusion_Maui_PdfViewer_ListBoxFormField_Items) array. One or more selections are supported by the list box. The below code snippet illustrates modifying a single-select list box form field named "courses" from the PDF Viewer.
+
+{% tabs %}
+{% highlight C# %}
+
+FormField formField = PdfViewer.FormFields.Where(x => x.Name == "courses").FirstOrDefault();
+
+if (formField is ListBoxFormField listBox)
+{
+ // Select the desired item from the list box.
+ listBox.SelectedItems = new ObservableCollection { listBox.Items[0] };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+The below code snippet illustrates modifying a multi-select list box form field named "courses" from the PDF Viewer.
+
+{% tabs %}
+{% highlight C# %}
+
+FormField formField = PdfViewer.FormFields.Where(x => x.Name == "courses").FirstOrDefault();
+
+if (formField is ListBoxFormField listBox)
+{
+ // Select the desired item from the list box.
+ listBox.SelectedItems = new System.Collections.ObjectModel.ObservableCollection { listBox.Items[1], listBox.Items[2], listBox.Items[3] };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+### Editing radio button form fields
+
+Programmatically select an item from the radio buttons using the [SelectedItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.RadioButtonFormField.html#Syncfusion_Maui_PdfViewer_RadioButtonFormField_SelectedItem) property. The [SelectedItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.RadioButtonFormField.html#Syncfusion_Maui_PdfViewer_RadioButtonFormField_SelectedItem) should be one of the values from the [RadioButtonFormField.Items](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.RadioButtonFormField.html#Syncfusion_Maui_PdfViewer_RadioButtonFormField_Items) array. The following code snippet illustrates retrieving a radio button form field named "gender" from the PDF Viewer.
+
+{% tabs %}
+{% highlight C# %}
+
+FormField formField = PdfViewer.FormFields.Where(x => x.Name == "gender").FirstOrDefault();
+
+if (formField is RadioButtonFormField radioButton)
+{
+ // Select the desired item from the radio buttons.
+ radioButton.SelectedItem = radioButton.Items[0];
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Editing signature form fields
+
+Programmatically, add a signature to an unsigned signature field by creating and assigning an ink annotation to the [SignatureFormField.Signature](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SignatureFormField.html#Syncfusion_Maui_PdfViewer_SignatureFormField_Signature) property. The following code snippet illustrates retrieving a signature form field named "signature" from the PDF Viewer.
+
+{% tabs %}
+{% highlight C# %}
+
+SignatureFormField? signature = PdfViewer.FormFields.Where(x => x.Name == "signature").FirstOrDefault() as SignatureFormField;
+if (signature != null)
+{
+ List> inkPointsCollection = new();
+ inkPointsCollection.Add(new List { 10f, 10f, 10f, 20f, 20f, 20f, 30f, 30f, 30f, 40f, 40f, 40f, 50f, 60f });
+ InkAnnotation inkSignature = new InkAnnotation(inkPointsCollection, signature.PageNumber);
+ inkSignature.Color = Colors.Red;
+ // Add the created handwritten signature to the signature form field.
+ signature.Signature = inkSignature;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+The [Signature](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SignatureFormField.html#Syncfusion_Maui_PdfViewer_SignatureFormField_Signature) property is of type [InkAnnotation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.InkAnnotation.html) and it will behave like an ink after signing. If the PDF document is saved, the signature will be preserved as an ink annotation in the saved document.
+
+#### Suppressing the signature modal view
+
+The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to suppress the signature modal view and use your own UI in its place. This can be achieved by setting the `FormFieldModalViewAppearingEventArgs.Cancel` property to `true` in the [SignatureModalViewAppearing](https://help.syncfusion.com/cr/document-processing/Syncfusion.Maui.PdfViewer.FormFieldModalViewAppearingEventArgs.html") event handler.
+
+The below code snippet illustrates suppressing the signature modal view and using a UI implemented in the app in its place. In this illustration, it is assumed that the signature is produced in the form of an image stream when the user completes drawing the signature in the custom dialog. When the signing is completed using the custom dialog, a stamp annotation is created and assigned as the signature of the form field.
+
+{% tabs %}
+{% highlight c# %}
+
+SignatureFormField? signatureFormField;
+pdfviewer.SignatureModalViewAppearing += PdfViewer_SignatureModalViewAppearing;
+
+private void PdfViewer_SignatureModalViewAppearing(object? Sender, FormFieldModalViewAppearingEventArgs e)
+{
+ e.Cancel = true;
+ signatureFormField = e.FormField as SignatureFormField;
+
+ // Implement your own UI for creating a signature.
+ ShowCustomDialog();
+}
+
+Private void customDialogOkButton_Clicked(object sender, EventArgs e)
+{
+ //Get the signature in the form of a Stream instance (possibly converted from an image of the user's freehand drawing)
+ signatureImageStream = GetSignatureImageStream();
+
+ // Create a stamp annotation. The bounds values are not necessary since the stamp will be automatically fit over the signature form field.
+ StampAnnotation signatureStamp = new StampAnnotation(signatureImageStream, signatureFormField.PageNumber, new RectF(0, 0, 0, 0));
+
+ signatureFormField.Signature = signatureStamp;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Button form fields
+
+Button form fields will be rendered in the PDF viewer. But the PDF viewer supports only the `GoTo` actions that navigates to a particular location in the PDF document alone. Other types of button actions are not supported.
+
+## Flatten form fields only on save
+
+The [FlattenOnSave](https://help.syncfusion.com/cr/document-processing/Syncfusion.Maui.PdfViewer.FormField.html#Syncfusion_Maui_PdfViewer_FormField_FlattenOnSave) property converts form fields into non-editable content only when the PDF document is saved. This means the form fields remain editable while the document is open, and are flattened (made part of the document content) during the save operation, preventing any further modification afterward.
+
+### Flatten specific form fields
+
+You can selectively flatten specific form fields, such as signature fields, by iterating through the form field collection.
+
+{% tabs %}
+{% highlight c# %}
+
+foreach (var item in pdfViewer.FormFields)
+{
+ //Iterate Only signature form field and flatten it
+ if (item is SignatureFormField signature)
+ {
+ item.FlattenOnSave = true;
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Flatten all form fields
+
+To flatten all form fields in the document, set the FlattenOnSave property for each field:
+
+{% tabs %}
+{% highlight c# %}
+
+//Iterate all the form fields and set flatten
+foreach (var item in pdfViewer.FormFields)
+{
+ item.FlattenOnSave = true;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Controlling form field editing at the viewer Level
+
+The `AllowEditFormFields` property is used to control form field editing at the viewer level. By default, editing is enabled, allowing users to interact with all supported form fields. When this property is set to false, all form fields become non-editable, making the document effectively read-only without modifying individual field properties. This behavior applies to all form field types and takes effect immediately on the loaded document.
+
+You can disable editing programmatically using the following:
+
+{% tabs %}
+{% highlight xaml %}
+
+{% endhighlight %}
+
+{% highlight c# %}
+// Disable form field editing
+pdfViewer.AllowEditFormFields = false;
+{% endhighlight %}
+{% endtabs %}
+
+This property supports dynamic changes at runtime, meaning you can enable or disable form field editing at the viewer level based on requirements, and the changes will be applied instantly.
+
+N>Setting AllowEditFormFields to false does not modify the ReadOnly property of individual form fields. It acts as an additional layer of control, and a field remains non-editable if either its ReadOnly property is true or viewer-level editing is disabled
+
+## See Also
+- [Form Filling Overview](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/form-filling-overview)
+- [Form Fields Collection](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/form-filling-collection)
+- [Show and Hide Form Fields](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/form-filling-show-hide)
+- [Customize Form Fields](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/form-filling-customization)
+- [Form Field Events](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/form-filling-events)
+- [Import and Export Form Data](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/form-filling-import-export)
+- [Electronic Signature](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/signature)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Getting-Started.md b/Document-Processing/PDF/PDF-Viewer/maui/Getting-Started.md
index 74317e31d9..0f7ee4352e 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Getting-Started.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Getting-Started.md
@@ -101,61 +101,61 @@ Open the `MainPage.xaml` file and follow the steps below.
2. In Visual Studio, right-click the added PDF document and set its `Build Action` as `Embedded Resource`.
3. In this example, we will load the PDF document through MVVM binding. Create a new C# file named `PdfViewerViewModel.cs` and add the following code snippet.
-{% tabs %}
-{% highlight c# tabtitle="PdfViewerViewModel.cs" %}
-
-using System.Reflection;
-using System.ComponentModel;
-
-namespace PdfViewerExample
-{
- class PdfViewerViewModel : INotifyPropertyChanged
+ {% tabs %}
+ {% highlight c# tabtitle="PdfViewerViewModel.cs" %}
+
+ using System.Reflection;
+ using System.ComponentModel;
+
+ namespace PdfViewerExample
{
- private Stream pdfDocumentStream;
+ class PdfViewerViewModel : INotifyPropertyChanged
+ {
+ private Stream pdfDocumentStream;
- ///
- /// Occurs when a property value changes.
- ///
- public event PropertyChangedEventHandler? PropertyChanged;
+ ///
+ /// Occurs when a property value changes.
+ ///
+ public event PropertyChangedEventHandler? PropertyChanged;
- ///
- /// Gets or sets the stream of the currently loaded PDF document.
- ///
- public Stream PdfDocumentStream
- {
- get
+ ///
+ /// Gets or sets the stream of the currently loaded PDF document.
+ ///
+ public Stream PdfDocumentStream
{
- return pdfDocumentStream;
+ get
+ {
+ return pdfDocumentStream;
+ }
+ set
+ {
+ pdfDocumentStream = value;
+ OnPropertyChanged(nameof(PdfDocumentStream));
+ }
}
- set
+
+ ///
+ /// Initializes a new instance of the class.
+ ///
+ public PdfViewerViewModel()
{
- pdfDocumentStream = value;
- OnPropertyChanged(nameof(PdfDocumentStream));
+ // Load the embedded PDF document stream.
+ pdfDocumentStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("PdfViewerExample.Assets.PDF_Succinctly.pdf");
}
- }
- ///
- /// Initializes a new instance of the class.
- ///
- public PdfViewerViewModel()
- {
- // Load the embedded PDF document stream.
- pdfDocumentStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("PdfViewerExample.Assets.PDF_Succinctly.pdf");
+ ///
+ /// Raises the event for the specified property name.
+ ///
+ /// The name of the property that changed.
+ public void OnPropertyChanged(string name)
+ {
+ PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
+ }
}
-
- ///
- /// Raises the event for the specified property name.
- ///
- /// The name of the property that changed.
- public void OnPropertyChanged(string name)
- {
- PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
- }
}
-}
-{% endhighlight %}
-{% endtabs %}
+ {% endhighlight %}
+ {% endtabs %}
4. Open the `MainPage.xaml` file again and add the default namespace of the created .NET MAUI project and name it as `local`. Here the default namespace of the demo sample `PdfViewerExample` is used.
5. Set an instance of the `PdfViewerViewModel` class as the `BindingContext` of the `ContentPage`.
@@ -168,6 +168,7 @@ namespace PdfViewerExample
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Magnification.md b/Document-Processing/PDF/PDF-Viewer/maui/Magnification.md
index 725767fe01..dc4d5b61be 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Magnification.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Magnification.md
@@ -153,7 +153,7 @@ PdfViewer.PersistZoomOnPageChange = false;
{% endhighlight %}
{% endtabs %}
-### Enable or Disable Double-Tap Zoom
+## Enable or Disable Double-Tap Zoom
The PDF Viewer allows users to zoom in and out of the document using a double-tap gesture. This behavior can be controlled programmatically using the `AllowDoubleTapZoom` property.
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/liquid-glass-effect.md b/Document-Processing/PDF/PDF-Viewer/maui/liquid-glass-effect.md
index 6c55181ed6..927a0c26ad 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/liquid-glass-effect.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/liquid-glass-effect.md
@@ -100,8 +100,6 @@ N>
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
* This feature is available only in `.NET 10.`
-
-
## See Also
- [UI Customization](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/ui-customization)
- [Toolbar Customization](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/toolbar-customization)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md
index 61ecff12f5..f4bb389396 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md
@@ -14,40 +14,32 @@ This section explains the steps to create a server-backed React PDF Viewer and d
## Prerequisites
-To get started with Syncfusion® React UI components, ensure the compatible version of React.
-* React supported version >= `15.5.4+`.
-* Required node version >= `14.0.0+`(NPM Package Manager).
+[System requirements for Syncfusion® React components](https://ej2.syncfusion.com/react/documentation/system-requirement)
-## Create a React app
+## Create a React application
-To set up a React application, use Vite (for example, `npm create vite@latest`), which provides a fast development environment, smaller bundle sizes, and optimized production builds compared to traditional tools such as `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/).
+Use [`Vite`](https://vitejs.dev/guide/) to create a new React application, as it provides a faster development environment, smaller bundle sizes, and optimized production builds.
-N> To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
-
-To create a new React application, run the following command.
+To create a new React application, run one of the following commands based on your preferred environment.
{% tabs %}
-{% highlight bash tabtitle="TypeScript" %}
+{% highlight bash tabtitle="JavaScript" %}
-npm create vite@latest my-app -- --template react-ts
+npm create vite@latest my-app -- --template react
cd my-app
-npm run dev
{% endhighlight %}
-{% highlight bash tabtitle="JavaScript" %}
+{% highlight bash tabtitle="TypeScript" %}
-npm create vite@latest my-app -- --template react
+npm create vite@latest my-app -- --template react-ts
cd my-app
-npm run dev
{% endhighlight %}
{% endtabs %}
## Install the Syncfusion® PDF Viewer packages
-All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry.
-
-To install PDF Viewer component, use the following command:
+Install the [React PDF Viewer](https://www.npmjs.com/package/@syncfusion/ej2-react-pdfviewer) package from npm using the following command:
```
npm install @syncfusion/ej2-react-pdfviewer --save
@@ -57,7 +49,8 @@ npm install @syncfusion/ej2-react-pdfviewer --save
Add the React PDF Viewer component’s CSS reference as given below in `src/index.css` file.
-```css
+{% tabs %}
+{% highlight css tabtitle="src/index.css" %}
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@@ -66,7 +59,9 @@ Add the React PDF Viewer component’s CSS reference as given below in `src/inde
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
-```
+{% endhighlight %}
+{% endtabs %}
+
Add the following import statements for the PDF Viewer along with the default imports in the file (src/index.js when using JavaScript/JSX, or src/app.tsx when using TypeScript/TSX), and include the PDF Viewer initialization code inside the function to render the PDF Viewer component.
@@ -142,19 +137,11 @@ Use the following command to run the application in browser.
npm run dev
```
-Output will be appears as follows.
+After the application starts, open the localhost URL shown in the terminal to view the React PDF Viewer in the browser. The output will appear as follows:
-{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/pdfviewer/react/base-cs1/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/pdfviewer/react/base-cs1/app/index.tsx %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/react/base-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
+
+
+You can also explore the PDF Viewer interactively using the live sample below.
{% previewsample "/document-processing/code-snippet/pdfviewer/react/base-cs1" %}
@@ -171,6 +158,6 @@ N> For hosting the web service on the Linux platform, ensure to include the [Ski
**See also**
-- [Annotations in PDF Viewer](./annotation/overview)
-- [Form Designer in PDF Viewer](./forms/overview#form-designer)
-- [Organize PDF pages](./organize-pages/overview)
\ No newline at end of file
+- [Getting started with Standalone React PDF Viewer](./getting-started-with-server-backed)
+- [Open PDF Files](./open-pdf-files)
+- [Save PDF Files](./save-pdf-files)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
index 4620b79f1c..fd92e2878b 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
@@ -14,31 +14,25 @@ This section explains the steps to create a standalone React PDF Viewer and demo
## Prerequisites
-To get started with Syncfusion® React UI components, ensure the compatible version of React.
-* React supported version >= `15.5.4+`.
-* Required node version >= `14.0.0+`(NPM Package Manager).
+[System requirements for Syncfusion® React components](https://ej2.syncfusion.com/react/documentation/system-requirement)
-## Create a React app
+## Create a React application
-To set up a React application, use Vite (for example, `npm create vite@latest`), which provides a fast development environment, smaller bundle sizes, and optimized production builds compared to tools such as `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/).
+Use [`Vite`](https://vitejs.dev/guide/) to create a new React application, as it provides a faster development environment, smaller bundle sizes, and optimized production builds.
-N> To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
-
-To create a new React application, run the following command.
+To create a new React application, run one of the following commands based on your preferred environment.
{% tabs %}
{% highlight bash tabtitle="JavaScript" %}
-npm create vite@latest my-app -- --template react
-cd my-app
-npm run dev
+npm create vite@latest pdf-viewer-app -- --template react
+cd pdf-viewer-app
{% endhighlight %}
{% highlight bash tabtitle="TypeScript" %}
-npm create vite@latest my-app -- --template react-ts
-cd my-app
-npm run dev
+npm create vite@latest pdf-viewer-app -- --template react-ts
+cd pdf-viewer-app
{% endhighlight %}
{% endtabs %}
@@ -46,7 +40,7 @@ npm run dev
## Install the Syncfusion® PDF Viewer packages
-All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry.
+Install the [React PDF Viewer](https://www.npmjs.com/package/@syncfusion/ej2-react-pdfviewer) package from npm using the following command:
```
npm install @syncfusion/ej2-react-pdfviewer --save
@@ -56,7 +50,8 @@ npm install @syncfusion/ej2-react-pdfviewer --save
Add the React PDF Viewer component’s CSS reference as given below in `src/index.css` file.
-```css
+{% tabs %}
+{% highlight css tabtitle="src/index.css" %}
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@@ -65,7 +60,9 @@ Add the React PDF Viewer component’s CSS reference as given below in `src/inde
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
-```
+{% endhighlight %}
+{% endtabs %}
+
Add the following import statements for the PDF Viewer along with the default imports in the file (src/index.js when using JavaScript/JSX, or src/app.tsx when using TypeScript/TSX), and include the PDF Viewer initialization code inside the function to render the PDF Viewer component.
@@ -140,95 +137,24 @@ Now run the `npm run dev` command in the console to start the development server
npm run dev
```
-Output appears as follows.
+After the application starts, open the localhost URL shown in the terminal to view the React PDF Viewer in the browser. The output will appear as follows:
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% raw %}
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
- BookmarkView,ThumbnailView, Print, TextSelection, Annotation, TextSearch,
- FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer';
-export function App() {
-return (
-
-
- // Specifies the modules required for the PDF Viewer
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render();
-{% endraw %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% raw %}
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
- BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch,
- FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer';
-export function App() {
-return (
-
-
- // Specifies the modules required for the PDF Viewer
-
-
-
-
-
-{% endraw %}
-{% endhighlight %}
-{% endtabs %}
+
+
+You can also explore the PDF Viewer interactively using the live sample below.
{% previewsample "/document-processing/code-snippet/pdfviewer/react/base-cs1-standalone" %}
-**See also**
+[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Getting%20Started).
+
+## Video tutorial
+
+To get started quickly with React PDF Viewer, you can watch this video:
+
+{% youtube "https://www.youtube.com/watch?v=VJibluQFWns" %}
+
+## See also
-- [PDF Viewer Annotations](./annotation/overview)
-- [PDF Viewer Form Designer](./forms/overview#form-designer)
-- [Organize PDF pages](./organize-pages/overview)
\ No newline at end of file
+- [Getting started with Server-Backed React PDF Viewer](./getting-started-with-server-backed)
+- [Open PDF Files](./open-pdf-files)
+- [Save PDF Files](./save-pdf-files)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/pdfviewer-control.png b/Document-Processing/PDF/PDF-Viewer/react/images/pdfviewer-control.png
new file mode 100644
index 0000000000..ecddea578f
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/pdfviewer-control.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/uwp/Getting-Started.md b/Document-Processing/PDF/PDF-Viewer/uwp/Getting-Started.md
index 6a73d77458..6b35799c31 100644
--- a/Document-Processing/PDF/PDF-Viewer/uwp/Getting-Started.md
+++ b/Document-Processing/PDF/PDF-Viewer/uwp/Getting-Started.md
@@ -43,7 +43,7 @@ The following list of assemblies are required for adding a PDF viewer control to
Syncfusion.SfShared.UWP
This component contains various UI controls (Numeric UpDown) that are used in the PDF Viewer.
-
+
Each assembly must be placed together with its corresponding resource files (i.e., the resource files for an assembly should reside in the same folder as that assembly). The assemblies do not all have to be in a single folder — each assembly may live in its own folder so long as its resource files are kept alongside it. The screenshot shows only the SfPdfViewer assembly for brevity.
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-with-server-backed.md
index 1f80aca792..ca943d3a17 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-with-server-backed.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-with-server-backed.md
@@ -8,21 +8,17 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Getting started with server-backed Vue PDF Viewer
+# Getting started with server-backed Vue PDF Viewer Component in Vue 2
This section explains how to create the **PDF Viewer** component and configure its functionalities in a Vue 2 application using Vue CLI with a server-backed architecture. In this mode, PDF rendering and processing are handled by a web service.
## Prerequisites
-Before getting started, ensure the following are installed:
+[System requirements for Syncfusion® Vue components](https://ej2.syncfusion.com/vue/documentation/system-requirements)
-- [System requirements for Syncfusion Vue components](https://ej2.syncfusion.com/vue/documentation/system-requirements)
-- Node.js v14.15.0 or later
-- Vue CLI
+## Create a Vue Application
-## Create a Vue 2 app
-
-Create a Vue 2 application using Vue CLI.
+Create a Vue application using Vue CLI.
{% tabs %}
{% highlight bash tabtitle="npm" %}
@@ -42,9 +38,9 @@ When prompted, select **Default ([Vue 2] babel, eslint)**.
> For Vue 3 application setup, see [Create a Vue 3 app](./getting-started-application).
-## Install the Syncfusion PDF Viewer packages
+## Install the Syncfusion® Vue PDF Viewer packages
-Install the Syncfusion PDF Viewer package from npm.
+Install the [Vue PDF Viewer](https://www.npmjs.com/package/@syncfusion/ej2-vue-pdfviewer) package from npm using the following command:
{% tabs %}
{% highlight bash tabtitle="npm" %}
@@ -58,9 +54,9 @@ yarn add @syncfusion/ej2-vue-pdfviewer
## Import Syncfusion® CSS styles
-You can import themes for the Syncfusion® Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator), or [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). Refer to [themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme) for more details about built-in themes and available approaches.
+Add the required CSS styles for the PDF Viewer component and its dependencies to your `App.vue` file.
-In this example, the `Material` theme is applied using CSS styles available in the installed packages. The required `Material` CSS styles for the PDF Viewer component and its dependencies are imported into the `