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 baa5a4acc7..5626c427d9 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 @@ -11,7 +11,7 @@ documentation: ug This section explains how to integrate the [ASP.NET MVC PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk) into an ASP.NET MVC application using Visual Studio. -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 Volume 2 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 @@ -43,12 +43,12 @@ Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.ej2version }} > Make sure that the `Microsoft.AspNet.Mvc` package and its dependency packages are updated to the latest version. -## Add namespace +## Add required namespaces Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder. {% tabs %} -{% highlight c# tabtitle="web.config" %} +{% highlight C# tabtitle="web.config" %} @@ -60,7 +60,7 @@ Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder. 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" %} +{% highlight C# tabtitle="_Layout.cshtml" %} @@ -77,7 +77,7 @@ N> To learn other ways to load themes or scripts (such as [NPM packages](https:/ Register the script manager at the end of the `` element in the `~/Views/Shared/_Layout.cshtml` file. {% tabs %} -{% highlight c# tabtitle="_Layout.cshtml" %} +{% highlight C# tabtitle="_Layout.cshtml" %} @Html.EJS().ScriptManager() @@ -90,12 +90,12 @@ Register the script manager at the end of the `` element in the `~/Views/S 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. {% tabs %} -{% highlight c# tabtitle="Index.cshtml" %} +{% highlight C# tabtitle="Index.cshtml" %}
- + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
@@ -119,7 +119,8 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m ## 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: +-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 from any deployment bundle: + - `pdfium.js` - `pdfium.wasm` @@ -129,8 +130,8 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m | **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)| + | AWS Lambda|[SkiaSharp.NativeAssets.Linux 3.119.1](https://nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)| + | AWS Elastic Beanstalk |[SkiaSharp.NativeAssets.Linux.NoDependencies 3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)| - The `serviceUrl` can be updated dynamically at runtime. After updating the value, invoke `pdfViewer.dataBind()` to apply the change and then load the document. This feature is supported in version 23.1.36 or later. @@ -140,6 +141,7 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m } ``` +## Troubleshooting + +- **Blank viewer / no requests fired:** verify `ServiceUrl` points to a reachable controller action and that the script manager (`@Html.EJS().ScriptManager()`) is registered at the end of ``. +- **404 on `ServiceUrl` requests:** confirm the route is registered (default attribute routing applies) and the controller returns the `PdfViewerProcessor` response. +- **Missing native assets on Linux:** confirm the `SkiaSharp.NativeAssets.Linux` package (3.119.1) is deployed alongside the app; check the host for `libskiasharp.so` load errors. +- **License warnings in the browser console:** ensure `SyncfusionLicenseProvider.RegisterLicense` is called once at application start. + ## See also - [Getting Started with Syncfusion ASP.NET MVC Standalone PDF Viewer](./getting-started) 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 8f5e5b4b45..c318305e2e 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 @@ -23,7 +23,7 @@ This section explains how to integrate the [ASP.NET MVC PDF Viewer](https://www. ## 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. +To add the .NET PDF Viewer control, the following NuGet package needs to be installed in your ASP.NET MVC application. * [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) @@ -58,9 +58,9 @@ The theme and required scripts are referenced by using a CDN inside the `` {% tabs %} {% highlight c# tabtitle="_Layout.cshtml" %} - + - + {% endhighlight %} @@ -83,7 +83,7 @@ Open `~/Views/Shared/_Layout.cshtml` page and register the script manager at the ## Add ASP.NET MVC PDF Viewer control -Add the Syncfusion® ASP.NET MVC PDF Viewer control in `~/Views/Home/Index.cshtml`. +Add the Syncfusion® ASP.NET MVC PDF Viewer control to `~/Views/Home/Index.cshtml`. {% tabs %} {% highlight c# tabtitle="Index.cshtml" %} @@ -98,7 +98,7 @@ Add the Syncfusion® ASP.NET MVC PDF Viewer {% endhighlight %} {% endtabs %} -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). +N> The `DocumentPath` property specifies the PDF document to load in the viewer. The `DocumentPath` value can be a remote HTTPS URL (as shown above) or a server-relative path. For locally available PDF documents, scripts, and styles, configure the [`ResourceUrl`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) and `DocumentPath` properties together by following these [instructions](./how-to/local-resources#configuring-pdf-viewer-for-locally-available-pdf-documents-and-local-resources). ## Run the application @@ -106,6 +106,8 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m ![ASP.NET MVC PDF Viewer Control](AspNetMVC_Images/pdfviewer-control.png) +N> If the viewer area is blank or the PDF fails to load, see the [PDF Viewer troubleshooting guide](./troubleshooting/document-loading-issues) for guidance on common issues (404 on the document, CORS, license warnings, and missing scripts). + > A fully functional example project is available in the [GitHub repository](https://github.com/SyncfusionExamples/ASP-NET-MVC-Getting-Started-Examples/tree/main/PDFViewer/ASP.NET%20MVC%20Razor%20Examples). ## See also 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 d0abd3d541..899ee88bd9 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 @@ -8,11 +8,11 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting Started with TypeScript PDF Viewer (Server-Backed) +# Getting Started with Server-Backed TypeScript PDF Viewer -This section 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. +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. -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 @@ -100,15 +100,15 @@ Update `src/app.ts` as shown below: {% tabs %} {% highlight ts tabtitle="app.ts" %} -import { PdfViewer, Toolbar, Magnification, +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, - ThumbnailView, BookmarkView, TextSelection, - TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + ThumbnailView, BookmarkView, TextSelection, + TextSearch, FormFields } from '@syncfusion/ej2-pdfviewer'; PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, - FormFields, FormDesigner); + FormFields); const pdfviewer: PdfViewer = new PdfViewer({ // Specifies the URL of the server-side PDF Viewer web service @@ -144,6 +144,8 @@ npm start 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: +*Rendered PDF Viewer in the browser* + ![Rendered PDF Viewer in browser](images/pdfviewer-control.png) > [View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/Save%20and%20Load/Load%20PDF%20file%20from%20URL) @@ -185,7 +187,7 @@ Configure this URL in the `serviceUrl` property of the PDF Viewer. 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** | +| **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)| @@ -194,6 +196,8 @@ N> Looking for the full JavaScript PDF Viewer component overview, features, pric ## See also -- [Getting started in TypeScript PDF Viewer](./getting-started) +Related resources for further exploration: + +- [Getting started with Standalone 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 6d76b81ccc..26de8d8800 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Setup for Local Development – TypeScript PDF Viewer | Syncfusion +title: Getting Started with the 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 control: PDF Viewer @@ -26,7 +26,7 @@ Create a simple TypeScript application using the Essential® JS 2 [quickstart](h > 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. +**Step 1:** Open a terminal (command prompt on Windows, or Terminal on macOS/Linux) in the directory where you want the project to live, and clone the quickstart project from GitHub. {% tabs %} {% highlight bash tabtitle="CLI" %} @@ -42,7 +42,7 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -**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. +**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. To install **only the PDF Viewer component**, replace the dependencies with [@syncfusion/ej2-pdfviewer](https://www.npmjs.com/package/@syncfusion/ej2-pdfviewer) in `package.json`: @@ -89,28 +89,28 @@ Import the PDF Viewer and inject only the required modules. Update `src/app.ts` {% tabs %} {% highlight ts tabtitle="app.ts" %} -import { PdfViewer, Toolbar, Magnification, Navigation, +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; - PdfViewer.Inject(Toolbar, Magnification, Navigation, - Annotation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, TextSearch, - FormFields, FormDesigner); - - let pdfviewer: PdfViewer = new PdfViewer(); - // Specifies the URL or path of the PDF document to be loaded. - // You can provide a remote URL or a local PDF file path. - pdfviewer.documentPath = - 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; - - // Specifies the URL of the PDFium resource files required by the PDF Viewer. - // This should point to the ej2-pdfviewer-lib folder, either from a CDN - // or a locally hosted location. - pdfviewer.resourceUrl = - 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; - pdfviewer.appendTo('#PdfViewer'); +PdfViewer.Inject(Toolbar, Magnification, Navigation, + Annotation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, TextSearch, + FormFields, FormDesigner); + +let pdfviewer: PdfViewer = new PdfViewer(); + +// Specifies the URL or path of the PDF document to be loaded. +// You can provide a remote URL or a local PDF file path. +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + +// Specifies the URL of the PDFium resource files required by the PDF Viewer. +// This should point to the ej2-pdfviewer-lib folder, either from a CDN +// or a locally hosted location. +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + +pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md index fdf107c0e0..c67c8ff4b8 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md +++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md @@ -112,7 +112,7 @@ Then import the stylesheet according to your starter: create-react-router (`app/root.tsx`): -```tsx +```ts // app/root.tsx import './app.css'; ``` diff --git a/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/document-loading-issues.md b/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/document-loading-issues.md index 9cd92b1205..b56f74257c 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/document-loading-issues.md +++ b/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/document-loading-issues.md @@ -9,12 +9,12 @@ documentation: ug # Resolve Document Loading Issues in Syncfusion Version 23.1 or Later -If a PDF does not render in the viewer after upgrading to v23.1 or newer, use the checklist below to identify and resolve common causes. The most frequent fix is calling `dataBind()` before `load()` so data binding is initialized correctly in the newer lifecycle. +If a PDF does not render in the viewer after upgrading to v23.1 or newer, use the checklist below to identify and resolve common causes. The most frequent fix is calling `dataBind()` before `load()` so data binding is initialized correctly in the newer life cycle. Example: {% raw %} -```tsx +```ts import * as ReactDOM from 'react-dom'; import * as React from 'react'; import './index.css'; @@ -61,11 +61,11 @@ Troubleshooting checklist (in order) 5. CORS configuration: for cross-origin `serviceUrl` or document URLs, ensure the server sets `Access-Control-Allow-Origin` and allows the `Authorization` header if used. 6. Content Security Policy: confirm CSP allows loading resources from the target origins (scripts, fonts, and media). 7. Version and cache: update to the latest PDF Viewer release and clear caches (browser/Service Worker) to rule out stale assets. -8. Server behavior: if the viewer uses a backend service, verify the service is running and returns correct responses for PDF requests. +8. Server behavior: if the viewer uses a backed service, verify the service is running and returns correct responses for PDF requests. React-specific notes -- Prefer using a React ref to access the `PdfViewerComponent` instance instead of `document.getElementById(...)` where possible: `const viewerRef = useRef(null);` then `` and call `viewerRef.current.dataBind()` / `viewerRef.current.load(...)` after the ref is initialized. -- If calling `dataBind()` and `load()` from lifecycle methods or hooks, ensure they run after the component mounts (for example in `useEffect` with the correct dependencies). +- Prefer using a React ref to access the `PdfViewerComponent` instance instead of `document.getElementById(...)` where possible: `viewerRef = useRef(null);` then `` and call `viewerRef.current.dataBind()` / `viewerRef.current.load(...)` after the ref is initialized. +- If calling `dataBind()` and `load()` from life cycle methods or hooks, ensure they run after the component mounts (for example in `useEffect` with the correct dependencies). Following this checklist typically resolves document loading issues encountered after upgrading to v23.1 or newer. \ No newline at end of file