|
1 | 1 | # WebViewer - React sample
|
2 | 2 |
|
3 |
| -[WebViewer](https://docs.apryse.com/documentation/web/) is a powerful JavaScript-based PDF Library that is part of the [Apryse SDK](https://apryse.com/). It provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate and manipulate PDFs that can be embedded into web projects. |
4 |
| - |
5 |
| - |
6 |
| - |
7 |
| -This repo is specifically designed for any users interested in integrating WebViewer into React project. You can watch [a video here](https://youtu.be/bVhWXuLSL0k) to help you get started. |
8 |
| - |
9 |
| -## Demos |
10 |
| - |
11 |
| -- [Customizable out-of-the-box UI](https://showcase.apryse.com/toolbar-customization) |
12 |
| -- [PDF Viewer](https://showcase.apryse.com/) |
13 |
| -- [DOCX Editor](https://showcase.apryse.com/office-editor) |
14 |
| -- [Annotation & Markup](https://showcase.apryse.com/annotation-permissions) |
15 |
| -- [Generate PDFs from DOCX template](https://showcase.apryse.com/office-template-fill) |
16 |
| -- [Digital Signatures](https://showcase.apryse.com/digital-signatures) |
17 |
| -- [PDF Text Editing](https://showcase.apryse.com/pdf-editing) |
18 |
| -- [Page Manipulation](https://showcase.apryse.com/pdf-page-manipulation-api) |
19 |
| -- [Redaction](https://showcase.apryse.com/redaction) |
20 |
| -- [Form Building](https://showcase.apryse.com/pdf-form-build) |
21 |
| -- [Annotate Videos](https://showcase.apryse.com/annotate-video-frames) |
22 |
| -- [More](https://showcase.apryse.com/) |
23 |
| - |
24 |
| -## Trial |
25 |
| - |
26 |
| -You can obtain the trial key by signing-up on our [developer portal](https://dev.apryse.com/). |
27 |
| - |
28 |
| - |
29 |
| -## Initial setup |
30 |
| - |
31 |
| -Before you begin, make sure your development environment includes [Node.js](https://nodejs.org/en/). |
32 |
| - |
33 |
| -This sample requires Node version 20. To check your version, run `node -v` in a terminal/console window. |
34 |
| - |
35 |
| -In order to set the license key, you will need to set the string in the WebViewer sample. One such way is by passing it into the constructor of the WebViewer: https://docs.apryse.com/documentation/web/faq/add-license/#passing-into-constructor |
36 |
| - |
37 |
| -Follow the steps below to set the license key in this sample: |
38 |
| - |
39 |
| -- Locate the app.component.ts file at /src/app.js |
40 |
| -- Replace "your_license_key" with your license |
41 |
| -- Save the file |
42 |
| - |
43 |
| - |
44 |
| -## Install |
45 |
| - |
46 |
| -``` |
47 |
| -git clone https://github.com/ApryseSDK/webviewer-react-sample.git |
48 |
| -cd webviewer-react-sample |
49 |
| -npm install |
50 |
| -``` |
51 |
| - |
52 |
| -## Run |
53 |
| - |
54 |
| -``` |
55 |
| -npm start |
56 |
| -``` |
57 |
| - |
58 |
| -After the app starts, you will be able to see WebViewer running on `localhost:3000`. |
59 |
| - |
60 |
| -## Build |
61 |
| - |
62 |
| -Run `npm run build` to build the project. The build artifacts will be stored in the `build/` directory. See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. |
63 |
| - |
64 |
| -To test the build directory locally you can use [serve](https://www.npmjs.com/package/serve) or [http-server](https://www.npmjs.com/package/http-server). In case of serve, by default it strips the .html extension stripped from paths. We added serve.json configuration to disable cleanUrls option. |
65 |
| - |
66 |
| -## GitHub Pages |
67 |
| -You can deploy your app to [GitHub Pages](https://pdftron.github.io/webviewer-react-sample/). To do so, make sure to update paths accordingly, for example, to deploy on `pdftron.github.io/webviewer-react-sample`, modify the `path`: |
68 |
| - |
69 |
| -``` |
70 |
| -WebViewer( |
71 |
| - { |
72 |
| - path: '/webviewer-react-sample/webviewer/lib', |
73 |
| - initialDoc: '/webviewer-react-sample/files/PDFTRON_about.pdf', |
74 |
| - }, |
75 |
| - viewer.current, |
76 |
| -).then((instance) => { |
77 |
| -``` |
78 |
| - |
79 |
| -## WebViewer APIs |
80 |
| - |
81 |
| -See [API documentation](https://docs.apryse.com/api/web/WebViewerInstance.html). |
82 |
| - |
83 |
| -## Contributing |
84 |
| - |
85 |
| -See [contributing](./CONTRIBUTING.md). |
86 |
| - |
87 |
| -## License |
88 |
| - |
89 |
| -See [license](./LICENSE). |
90 |
| - |
| 3 | +⚠️ This sample has been moved to the [webviewer-samples repo](https://github.com/ApryseSDK/webviewer-samples/tree/main/webviewer-react). ⚠️ |
0 commit comments