Skip to content

Commit aa2bade

Browse files
AnanthaGokulaRamanAnanthaGokulaRaman
authored
Merge pull request #2298 from syncfusion-content/diataxis-changes_dev
1010807: Getting Started with React PDF Viewer in Gatsby App
2 parents 1b33024 + 8186ba3 commit aa2bade

7 files changed

Lines changed: 151 additions & 13 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -899,9 +899,10 @@
899899
Environment Integration
900900
<ul>
901901
<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/nextjs-getting-started">NextJS</a></li>
902-
<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/share-point">SharePoint Framework (SPFx)</a></li>
903902
<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/preact">Preact</a></li>
904903
<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/remix">Remix</a></li>
904+
<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/share-point">SharePoint Framework (SPFx)</a></li>
905+
<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/gatsby">Gatsby</a></li>
905906
</ul>
906907
</li>
907908
<li><a href="/document-processing/pdf/pdf-viewer/react/feature-module">Feature Modules</a></li>

‎Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
---
2+
layout: post
3+
title: Getting started with React PDF Viewer in Gatsby | Syncfusion
4+
description: How to integrate the Syncfusion React PDF Viewer into a Gatsby site (quickstart, how-to, reference, explanation).
5+
control: PDF Viewer
6+
platform: document-processing
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Getting started with the React PDF Viewer in Gatsby
12+
13+
How to integrate the Syncfusion React PDF Viewer into a Gatsby site. Use the Quickstart below to get a working viewer, then consult the How-to and Reference sections for configuration details (WASM, static assets, and SSR notes).
14+
15+
## Quickstart for Gatsby
16+
17+
1. Create or open your Gatsby site.
18+
19+
```bash
20+
# create a new Gatsby site (or use an existing one)
21+
gatsby new my-gatsby-site
22+
cd my-gatsby-site
23+
npm install
24+
```
25+
26+
2. Install the PDF Viewer package:
27+
28+
```bash
29+
npm install @syncfusion/ej2-react-pdfviewer --save
30+
```
31+
32+
3. Optional — host runtime locally or use the CDN
33+
34+
If you want to host the viewer runtime and WASM locally, copy the runtime files into Gatsby's `static` directory so they are served at the root URL (`/`). The example component below uses the CDN `resourceUrl` for a quick demo; hosting locally is recommended for production.
35+
36+
Optional local copy (Unix/macOS / Git Bash / WSL):
37+
38+
```bash
39+
cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib static/ej2-pdfviewer-lib
40+
# copy a sample PDF to static/assets (create folder if needed)
41+
mkdir -p static/assets && cp ./path/to/sample.pdf static/assets/sample.pdf
42+
```
43+
44+
4. Add viewer CSS imports to `src/components/layout.css` (recommended for Gatsby component-scoped styling):
45+
46+
Create `src/components/layout.css` and add the imports below (relative path to `node_modules` used from `src/components`):
47+
48+
```css
49+
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
50+
@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
51+
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
52+
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
53+
@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
54+
@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
55+
@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
56+
@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
57+
```
58+
59+
Then import the stylesheet in `gatsby-browser.js` at your project root so it is included in the client bundle:
60+
61+
```js
62+
// gatsby-browser.js
63+
import './src/components/layout.css';
64+
```
65+
66+
5. Use a client-only approach (Gatsby is server-side rendered). A simple and reliable pattern is to render the viewer after mount with a mounted flag. Create `src/components/pdfviewer.js` with the component below (the example also shows where to register a Syncfusion license if you have one):
67+
68+
```js
69+
// src/components/pdfviewer.js
70+
import React, { useEffect, useState } from 'react';
71+
import {
72+
PdfViewerComponent,
73+
Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
74+
BookmarkView, ThumbnailView, Print, TextSelection, TextSearch
75+
, FormFields, FormDesigner, Inject
76+
} from '@syncfusion/ej2-react-pdfviewer';
77+
78+
export default function PdfViewer() {
79+
const [isClient, setIsClient] = useState(false);
80+
81+
useEffect(() => setIsClient(true), []);
82+
83+
if (!isClient) return null; // prevent SSR crash (window not defined)
84+
85+
return (
86+
<div style={{ height: "100vh" }}>
87+
<PdfViewerComponent
88+
id="pdfViewer"
89+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
90+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
91+
style={{ height: "100%", width: "100%" }}
92+
>
93+
<Inject services={[
94+
Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
95+
BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
96+
Magnification, FormFields, FormDesigner
97+
]} />
98+
</PdfViewerComponent>
99+
</div>
100+
);
101+
}
102+
```
103+
104+
Add a page that uses the component at `src/pages/index.js`:
105+
106+
```js
107+
// src/pages/index.js
108+
import React from "react";
109+
import PdfViewer from "../components/pdfviewer";
110+
export default function PdfViewerPage() {
111+
return (
112+
<main>
113+
<h1 style={{ padding: "10px 20px", background: "#f5f5f5" }}>
114+
Syncfusion PDF Viewer in Gatsby
115+
</h1>
116+
<PdfViewer />
117+
</main>
118+
);
119+
}
120+
```
121+
122+
6. Run the Gatsby dev server:
123+
124+
```bash
125+
npm run develop
126+
```
127+
128+
## See also
129+
130+
- [Getting started overview](../getting-started-overview)
131+
- [Creating a Next.js application using Syncfusion React PDF Viewer](./nextjs-getting-started)
132+
- [Getting started with Syncfusion React PDF Viewer in Remix](./remix)

‎Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,9 +104,10 @@ yarn add @syncfusion/ej2-react-pdfviewer
104104

105105
Syncfusion<sup style="font-size:70%">&reg;</sup> React components include built-in themes. Import the PDF Viewer theme and base styles to match the look and feel of the application.
106106

107-
/* Where to add the imports: */
108-
/* - App Router: put these in `src/app/globals.css` */
109-
/* - Pages Router: put them in `pages/_app.js` or its imported global CSS */
107+
Where to add the imports:
108+
109+
- App Router: put these in `src/app/globals.css`
110+
- Pages Router: put them in `pages/_app.js` or its imported global CSS
110111

111112
{% tabs %}
112113
{% highlight css tabtitle="globals.css" %}

‎Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,13 @@ documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# React Router v7 Quickstart
11+
# React Router v7 (Remix) Quickstart
1212

13-
N> Remix's framework features were merged into React Router v7 and later. This guide targets React Router v7's framework-mode and shows a client-only (standalone) integration of the Syncfusion React PDF Viewer.
13+
## Overview
14+
15+
N> Remix's framework features were merged into React Router v7 and later. This guide targets React Router v7's framework-mode and shows a client-only (standalone) integration of the Syncfusion React PDF Viewer. Keep the viewer client-only to avoid SSR/runtime errors.
16+
17+
## Quickstart
1418

1519
## Prerequisites
1620

@@ -35,7 +39,7 @@ Different starters create different folder layouts. Pick the mapping that matche
3539

3640
Use the file paths that match your project layout when following the steps below.
3741

38-
## Step 1 — Create a React + React Router (v7) app
42+
## Step 1 — Create a Remix or React Router v7 app
3943

4044
If you want the React Router framework-mode project (creates an `app/` tree), use the official scaffolding tool:
4145

‎Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Syncfusion React PDF Viewer in SPFx
11+
# React PDF Viewer in SharePoint Framework
1212

1313
## Overview
1414

@@ -92,7 +92,7 @@ Important: ensure any host you use serves `.wasm` files with Content-Type `appli
9292

9393
Create `PdfViewerClient.tsx` under `src/webparts/pdfViewer/components` and paste the minimal example below. This component is client-only and safe for SPFx (which runs in the browser):
9494

95-
```jsx
95+
```ts
9696
// src/webparts/pdfViewer/components/PdfViewerClient.tsx
9797
import * as React from 'react';
9898
import {
@@ -131,7 +131,7 @@ export default PdfViewerClient;
131131

132132
Open the web part main React file (for example `src/webparts/pdfViewer/components/PdfViewer.tsx` created by the generator) and render `PdfViewerClient`:
133133

134-
```jsx
134+
```ts
135135
import * as React from 'react';
136136
import PdfViewerClient from './PdfViewerClient';
137137

‎Document-Processing/PDF/PDF-Viewer/react/open-pdf-files.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ This simple example demonstrates the minimal steps to show a PDF document in the
2020
2. Set `documentPath` to a publicly accessible URL.
2121

2222
Example (TypeScript / React):
23-
```jsx
23+
```ts
2424
import * as React from 'react';
2525
import * as ReactDOM from 'react-dom/client';
2626
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,

‎Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ public IActionResult Download([FromBody] Dictionary<string, string> jsonObject)
7171

7272
Set the `serviceUrl` to point to your web service (for example, replace `https://localhost:44396/pdfviewer` with your server URL). Also set `documentPath` to the document URL you want to load.
7373

74-
```jsx
74+
```js
7575
import * as ReactDOM from 'react-dom';
7676
import * as React from 'react';
7777
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
@@ -105,7 +105,7 @@ root.render(<App />);
105105

106106
The built-in toolbar includes a download option that saves the updated PDF to the user's local file system. You can also trigger the same behavior programmatically by calling the viewer's [`download()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#download) API.
107107

108-
```jsx
108+
```js
109109
import * as ReactDOM from 'react-dom/client';
110110
import * as React from 'react';
111111
import './index.css';

0 commit comments

Comments
 (0)