Implement WebViewer Cross-Origin Resource Sharing - CORS

This sample shows how to serve WebViewer's lib from a different domain. This project implements Cross-Origin Resource Sharing (CORS) as a client server webviewer-app that fetches resources from a server webviewer-lib in another domain. The dependency reference to @pdftron/webviewer exists in both webviewer-lib\package.json and webviewer-app\package.json.

It is recommended to serve the WebViewer lib on the same domain as the app itself for additional performance and security.

WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.

Click the button below to view the full project in GitHub.

1import React, { useEffect, useRef } from 'react';
2import WebViewer from '@pdftron/webviewer';
3import './App.css';
4
5function App() {
6  const viewer = useRef<HTMLDivElement>(null);
7
8  useEffect(() => {
9    WebViewer(
10      {
11        path: 'http://localhost:8081/lib/',
12      },
13      viewer.current as HTMLDivElement,
14    ).then((instance) => {
15      const url = 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf';
16      instance.UI.loadDocument(url);
17
18      const { documentViewer, Annotations } = instance.Core;
19      documentViewer.addEventListener('documentLoaded', () => {
20        const annotManager = documentViewer.getAnnotationManager();
21        const rectangle = new Annotations.RectangleAnnotation();
22        rectangle.PageNumber = 2;
23        rectangle.X = 100;
24        rectangle.Y = 100;
25        rectangle.Width = 250;
26        rectangle.Height = 250;
27        rectangle.Author = annotManager.getCurrentUser();
28        annotManager.addAnnotation(rectangle);
29      });
30    });
31
32  }, []);
33
34  return (
35    <div className="App">
36      <div className="webviewer" ref={viewer}></div>
37    </div>
38  );
39}
40
41export default App;
42

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales

Product:

Implement WebViewer Cross-Origin Resource Sharing - CORS