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 63d70b5807..ade11f9129 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,7 +11,7 @@ domainurl: ##DomainURL## This section explains how to create a simple Angular application and add the server-backed [Syncfusion® Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) component with the minimum required setup. -N> Starting with the 2026 Vol 2 main release (June 2026), no new features will be added to the Server PDF Viewer, as almost all of the PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the [migration documentation](./server-to-standalone) to transition to the Standalone PDF Viewer. +N> As of the 2026 Vol 2 main release (July 6, 2026), no new features will be added to the server-backed PDF Viewer, as almost all of the PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, refer to the [migration documentation](./server-to-standalone) to transition to the Standalone PDF Viewer. ## Prerequisites @@ -82,7 +82,7 @@ Add the following PDF Viewer and dependent component style references to the `sr 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: +The example below uses a standalone component. The default project uses standalone components, and the root component file is `src/app/app.ts`. Update it as shown below: {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -136,7 +136,7 @@ ng serve --open {% endhighlight %} {% endtabs %} -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: +After the application starts, open `http://localhost` (the default Angular dev server URL) in a modern browser such as Chrome, Edge, Firefox, or Safari to view the Angular PDF Viewer component. The output will appear as follows: ![Rendered PDF Viewer in browser](images/pdfviewer-control.png) @@ -148,8 +148,7 @@ After the application starts, open the localhost URL shown in the terminal to vi To host your own PDF Viewer service: -1. Download the web service sample from GitHub: - [GitHub Web Service Sample](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices) +1. Download or clone the [EJ2-PDFViewer-WebServices repository](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices). 2. Navigate to the appropriate folder based on your .NET version: - .NET 6.0 → [PdfViewerWebService_6.0](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_6.0) - .NET 8.0 → [PdfViewerWebService_8.0](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_8.0) diff --git a/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md b/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md index df45be9255..290ce74bb0 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md @@ -17,9 +17,9 @@ This section explains how to create a simple Angular application and add the sta ## Create an Angular application -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. +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. Use an Angular CLI version that matches the target Angular version (e.g., Angular CLI 17 for Angular 17 projects). -Install Angular CLI globally, using the following command: +Install Angular CLI globally using the following command: {% tabs %} {% highlight bash tabtitle="npm" %} @@ -40,7 +40,7 @@ cd pdfviewer-app {% endhighlight %} {% endtabs %} -> **Note:** When prompted during project creation, select the default options: **CSS** for stylesheet, **No** for SSR/SSG, and **None** for AI tools. +> **Note:** When prompted during project creation, select the default options: **CSS** for stylesheet, **No** for SSR/SSG, and **None** for AI tools. The available prompts may vary by Angular CLI version; accept the default values for any prompts not listed here. ## Install the Syncfusion® Angular PDF Viewer package @@ -78,7 +78,7 @@ Add the following PDF Viewer and dependent component style references to the `sr ## Add the Syncfusion® Angular PDF Viewer component to the application -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. +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 (for full functionality). Update `src/app/app.ts` as shown below: @@ -96,10 +96,10 @@ import { PdfViewerModule, LinkAnnotationService, BookmarkViewService, selector: 'app-root', standalone: true, imports: [PdfViewerModule], - providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService, + providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, - AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService], + FormDesignerService, FormFieldsService, AnnotationService, PageOrganizerService], template: ` Looking for the full Angular PDF Viewer component overview, features, pricing, and documentation? Visit the [Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) page. +> Looking for the full Angular PDF Viewer component overview, features, pricing, and documentation? Visit the [Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) page. + ## See also - [Getting started with Server-Backed Angular PDF Viewer](./getting-started-with-server-backed) 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 b486604ae1..37a20a6c0b 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 @@ -11,7 +11,7 @@ documentation: ug This section explains how to add the [Syncfusion® Server-backed ASP.NET Core PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk) to a ASP.NET Core Web application using Visual Studio or Visual Studio Code. A complete working sample is available on [GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Getting-Started-Examples/tree/main/PDFViewer/ASP.NET%20Core%20Tag%20Helper%20Examples). -N> Starting with the 2026 Vol 2 main release (June 2026), no new features will be added to the Server PDF Viewer, as almost all of the PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the [migration documentation](./server-to-standalone) to transition to the Standalone PDF Viewer. +> **Deprecation notice:** Starting with the 2026 Vol 2 main release (July 6, 2026), no new features will be added to the Server PDF Viewer, as almost all PDF Viewer functionality is now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the [migration documentation](./server-to-standalone) to transition to the Standalone PDF Viewer. ## Prerequisites @@ -24,7 +24,7 @@ N> Starting with the 2026 Vol 2 main release (June 2026), no new features will b ## Create a new ASP.NET Core Web App in Visual Studio -Create an ASP.NET Core Web App using Visual Studio 2022 by the following the instructions [here](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=visualstudio). +Create an ASP.NET Core Web App using Visual Studio 2022 by following the instructions [here](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=visualstudio). ## ASP.NET Core PDF Viewer NuGet package installation @@ -131,7 +131,7 @@ Add the Syncfusion® ASP.NET Core PDF Viewer ## Implement server-side handlers -Add the server side code to `Index.cshtml.cs` in the `Pages` folder. The class should contain handler methods that process all PDF operations on the server, such as loading documents, rendering pages, handling annotations, and managing downloads. +Add the server-side code to `Index.cshtml.cs` in the `Pages` folder. The class should contain handler methods that process all PDF operations on the server, such as loading documents, rendering pages, handling annotations, and managing downloads. An implementation example can be found [here](https://github.com/SyncfusionExamples/ASP-NET-Core-Getting-Started-Examples/blob/main/PDFViewer/ASP.NET%20Core%20Tag%20Helper%20Examples/Pages/Index.cshtml.cs). @@ -175,4 +175,7 @@ function load() { ## See also -* [Getting Started with Syncfusion® ASP.NET Core](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started) \ No newline at end of file +* [Getting Started with Syncfusion® ASP.NET Core](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started) +* [Migrate from Server-Backed to Standalone PDF Viewer](./server-to-standalone) +* [Getting Started with Standalone PDF Viewer](./getting-started) +* [ASP.NET Core PDF Viewer How-To Guides](./how-to-overview) \ No newline at end of file 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 7687328caf..d6ac7cedeb 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 @@ -70,7 +70,7 @@ dotnet restore ## Add Syncfusion® ASP.NET Core Tag Helper -Open `~/Pages/_ViewImports.cshtml` and add the Syncfusion EJ2 Tag Helper import. This makes all Syncfusion tag helpers available throughout the application. +Open `~/Pages/_ViewImports.cshtml` and add the Syncfusion EJ2 Tag Helper imports. This makes all Syncfusion tag helpers (including the PDF Viewer) available throughout the application. {% tabs %} {% highlight c# tabtitle="~/_ViewImports.cshtml" %} @@ -90,7 +90,7 @@ Reference the Syncfusion theme and JavaScript library using the CDN inside the ` - + {% endhighlight %} @@ -111,7 +111,7 @@ Open the `~/Pages/Shared/_Layout.cshtml` page and register the script manager `< {% endhighlight %} {% endtabs %} -## Add ASP.NET Core PDF Viewer control +## Add ASP.NET Core PDF Viewer Tag Helper Add the Syncfusion® ASP.NET Core PDF Viewer Tag Helper in `~/Pages/Index.cshtml`. @@ -125,7 +125,7 @@ Add the Syncfusion® ASP.NET Core PDF Viewer {% endhighlight %} {% endtabs %} -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). +N> The `documentPath` property can point to a remote URL (as shown above) or to a local PDF file. 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). For the full list of PDF Viewer properties such as `enableDownload`, `enablePrint`, and `resourceUrl`, see the [PDF Viewer API reference](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html). ## Run the application 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 986ef98978..7a5d811682 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 @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Server-Backed JavaScript PDF Viewer | Syncfusion -description: Learn how to set up and use the Syncfusion JavaScript PDF Viewer in server-backed mode using CDN resources, injecting modules and web service configuration. +description: Learn how to set up and use the Syncfusion JavaScript PDF Viewer in server-backed mode using CDN resources and web service configuration. platform: document-processing control: PDF Viewer documentation: ug @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section explains how to create the PDF Viewer component and configure its features in JavaScript (global script) using CDN-hosted resources in **server-backed mode**. -N> Starting with the 2026 Vol 2 main release (June 2026), no new features will be added to the Server PDF Viewer, as almost all of the PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the [migration documentation](./server-to-standalone) to transition to the Standalone PDF Viewer. +N> Starting with the 2026 Vol 2 main release (July 6, 2026), no new features will be added to the Server PDF Viewer. This is because almost all PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the [migration documentation](./server-to-standalone) to transition to the Standalone PDF Viewer. > Ensure that the same version is used for all script and style references to avoid compatibility issues. @@ -64,7 +64,7 @@ Add a container element for the PDF Viewer control in the `index.html` file and {% endhighlight %} {% endtabs %} -Now, initialize the PDF Viewer component in the `index.js` file: +Now, initialize the Syncfusion® PDF Viewer component in the `index.js` file: {% tabs %} {% highlight js tabtitle="index.js" %} @@ -72,6 +72,7 @@ Now, initialize the PDF Viewer component in the `index.js` file: // Initialize PDF Viewer component var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + // Demo service URL for evaluation only. For production, host your own web service. serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer' }); @@ -81,6 +82,8 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} +The `documentPath` property sets the URL of the PDF file to load in the viewer and accepts HTTP/HTTPS URLs or relative paths. The `serviceUrl` property must point to a PDF Viewer web service that exposes the required APIs; the web service and the client page must be served from origins that satisfy CORS requirements, and the service must be reachable from the client. + To configure PDF Viewer with local resources for script and style references, and the `documentPath` property, refer to the instructions [here](./how-to/use-local-script-and-style-references). For creating a new PDF Viewer serviceUrl, follow the steps provided in the [link](./how-to/create-pdfviewer-service) or to locally host an already available web service, follow these [instructions](#run-a-locally-hosted-pdf-viewer-web-service). @@ -137,7 +140,7 @@ document.getElementById('load').addEventListener('click', function () { ## Run a locally hosted PDF Viewer web service -1. Download the sample from the [Web service sample in GitHub](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices). +1. Download or clone the sample from the [Web service sample in GitHub](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices) (for example, `git clone https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices.git`). 2. Navigate to the `ASP.NET Core` folder and open it in the command prompt. 3. Navigate to the appropriate subfolder based on your .NET version: @@ -169,7 +172,7 @@ dotnet run {% tabs %} {% highlight bash tabtitle="CLI" %} - var pdfviewer = new ej.pdfviewer.PdfViewer({ + var pdfViewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", serviceUrl: 'https://localhost:7255/pdfviewer' }); 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 b4fafe0c97..ecd2493b95 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md @@ -46,7 +46,7 @@ To use local scripts and styles for the Syncfusion® PDF Viewer, follow these st > > 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, Run the following command to clone the [`Essential JS 2 quickstart`](https://github.com/syncfusion/ej2-quickstart.git) project from GitHub and install the required packages. +Alternatively, run the following command to clone the [`Essential JS 2 quickstart`](https://github.com/syncfusion/ej2-quickstart.git) project from GitHub and install the required packages. {% tabs %} {% highlight bash tabtitle="CLI" %} @@ -70,7 +70,7 @@ npm install > > `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. +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. Copy the `ej2-pdfviewer-lib` folder (containing `pdfium.js` and `pdfium.wasm`) and the sample PDF document into the `pdf-viewer-app/resources` directory as well. 4. Add the PDF Viewer and its dependent control style and script references inside the `` section of your `index.html` file using local resources. @@ -133,7 +133,7 @@ Create an HTML page (index.html) in `pdf-viewer-app` location and add the CDN li {% endtabcontents %} -## Add the Syncfusion® PDF Viewer component +## Add Syncfusion® PDF Viewer component Add a container element for the PDF Viewer control in the `index.html` file and then initialize the control inside the `` section of your `index.html` file. @@ -146,7 +146,7 @@ Add a container element for the PDF Viewer control in the `index.html` file and {% endhighlight %} {% endtabs %} -Now, initialize the PDF Viewer component in the `index.js` file: +Initialize the PDF Viewer component in the `index.js` file: {% tabcontents %} @@ -212,9 +212,9 @@ 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" %} -N> [View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Refer%20resource%20url%20locally). Looking for the full JavaScript PDF Viewer component overview, features, pricing, and documentation? Visit the [JavaScript PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) page. +N> [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) +- [Getting started with Server-Backed JavaScript PDF Viewer](./getting-started-with-server-backed) - [Feature modules](./feature-module) \ No newline at end of file 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 4b29420927..079c725a73 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 @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section explains how to create a simple React application and add the server-backed [React PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/react-pdf-viewer) component with the minimum required setup. -N> Starting with the 2026 Vol 2 main release (June 2026), no new features will be added to the Server PDF Viewer, as almost all of the PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the [migration documentation](./server-to-standalone) to transition to the Standalone PDF Viewer. +N> Starting with the 2026 Vol 2 main release (July 6, 2026), no new features will be added to the Server PDF Viewer, as almost all of the PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the [migration documentation](./server-to-standalone) to transition to the Standalone PDF Viewer. ## Prerequisites diff --git a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md index ea266ae248..bc47478bc2 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Vue PDF Viewer | Syncfusion +title: Getting Started with Vue 3 PDF Viewer | Syncfusion description: Learn how to scaffold a Vite project and integrate the Syncfusion Vue PDF Viewer using the Composition or Options API. control: Getting Started application platform: document-processing @@ -14,11 +14,10 @@ This section explains how to create a Vue 3 application with Vite and integrate ## API Approaches -**Composition API** – A modern approach to organizing component logic by composing smaller, reusable functions. This method offers better code organization and reusable for complex components. +**Composition API** – A modern approach to organizing component logic by composing smaller, reusable functions. This method offers better code organization and is more reusable for complex components. **Options API** – The traditional Vue approach that organizes component logic into a series of options (data, methods, computed properties, watchers, life cycle hooks, etc.). - ## Prerequisites Install Node.js (version 18 or later recommended) along with npm or Yarn before creating the project. Review the [system requirements for Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements) to confirm supported platforms. @@ -133,7 +132,7 @@ Import the PDF Viewer component and required modules in the `