@unionpdf/react

This pacakge contains several React components for showing PDF files on Web.

Install

1npm install @unionpdf/react

Usage

1function App() {
2  const engine = createMockPdfEngine();
3  const pdfAppElemRef = useRef<HTMLDivElement>(null);
4  const [viewport, setViewport] = useState({ x: 0, y: 0 });
5
6  useLayoutEffect(() => {
7    const pdfAppElem = pdfAppElemRef.current;
8    if (pdfAppElem) {
9      const style = getComputedStyle(pdfAppElem);
10      console.log(style.height, style.width);
11    }
12  }, [pdfAppElemRef.current]);
13
14  return (
15    <PdfNativeAdapterProvider>
16      <div className="App">
17        <LoggerContextProvider logger={logger}>
18          <ThemeContextProvider
19            theme={{
20              background: 'blue',
21            }}
22          >
23            <PdfApplicationContextProvider provider={provider}>
24              <PdfEditorStampsContextProvider
25                stamps={stamps}
26                onAddStamp={addStamp}
27                onRemoveStamp={removeStamp}
28              >
29                <PdfEngineContextProvider engine={engine}>
30                  <PdfApplication>
31                    <PdfNavigatorContextProvider>
32                      <PdfDocument
33                        file={file}
34                        password={password}
35                        onOpenSuccess={() => {
36                          setIsPasswordOpened(false);
37                        }}
38                        onOpenFailure={(error: PdfEngineError) => {
39                          if (error.code === PdfiumErrorCode.Password) {
40                            setIsPasswordOpened(true);
41                          }
42                        }}
43                      >
44                        <PdfEditorContextProvider>
45                          <PdfToolbar onClose={closeFile} />
46                          <PdfPageAnnotationComponentContextProvider
47                            component={PdfPageDefaultAnnotation}
48                          >
49                            <PdfLinkAnnoContextProvider
50                              onClick={(evt, annotation) => {
51                                console.log(evt, annotation);
52                              }}
53                            >
54                              <PdfPages
55                                prerenderRange={[-1, 1]}
56                                cacheRange={[-1, 1]}
57                                pageLayers={[
58                                  PdfPageCanvasLayer,
59                                  PdfPageTextLayer,
60                                  PdfPageAnnotationsLayer,
61                                  PdfPageEditorLayer,
62                                ]}
63                              />
64                            </PdfLinkAnnoContextProvider>
65                          </PdfPageAnnotationComponentContextProvider>
66                          <PdfMetadata />
67                          <PdfThumbnails
68                            layout={{
69                              direction: 'vertical',
70                              itemsCount: 2,
71                            }}
72                            size={{ width: 100, height: 100 }}
73                            scaleFactor={0.25}
74                          />
75                          <PdfBookmarks />
76                          <PdfSearchPanel />
77                          <PdfAttachments />
78                          <PdfSignatures />
79                          <PdfDownloader />
80                          <PdfPrinter method={PrinterMethod.Iframe} />
81                          <PdfEditor />
82                        </PdfEditorContextProvider>
83                      </PdfDocument>
84                    </PdfNavigatorContextProvider>
85                  </PdfApplication>
86                </PdfEngineContextProvider>
87              </PdfEditorStampsContextProvider>
88            </PdfApplicationContextProvider>
89          </ThemeContextProvider>
90        </LoggerContextProvider>
91      </div>
92    </PdfNativeAdapterProvider>
93  );
94}

PDF Page Layer

Every pdf page contains multiple layers, like canvas layer for rendering content or annotation layer for showing differnt kinds of annotations

Of course, you can build your own pdf page layer, every layer is a React component that will be rendered into pdf page

Below shows how to display the page number in the bottom of every pdf page

1function PdfPageNumber(props: { index: number }) {
2  return (
3    <div
4      className="pdf__page__number"
5      style={{
6        color: 'white',
7        position: 'absolute',
8        bottom: 0,
9        left: '50%',
10        transform: 'translate(-50%, -50%)',
11      }}
12    >
13      {index + 1}
14    </div>
15  );
16}
17
18<PdfPages
19  visibleRange={[-1, 1]}
20  viewport={viewport}
21  pageLayers={[PdfPageCanvasLayer, PdfPageNumber]}
22/>;

For the full code you can check the demo app

Supported PDF Page Layers

1. Canvas Layer

   This layer will render PDF content into canvas

2. Text Layer

   This layer will display PDF text in HTML Node

3. Annotation Layer

   This layer will display annotations, supported annotations including

   3.1 Link

   3.2 Text

   3.3 Widget (Basic ArcoForm, XFA is not supported yet)

4. Editor Layer

   This layer is for editing pdf files, supports features

   4.1 drawing new ink annotations 4.2 move annotations through drag and drop

   Also, it has build in support for undo/redo.

5. Decoration Layer This laywer is for showing dynamic decoration on pdf page, which won't save to pdf file

How to write a pdf plugin

A PDF Plugin is a component that can add specific functionalty to PDF document. In the plugins folder, there are several buildin plugins.

1. PdfPages renders all the pdf pages in the PDF files.
2. PdfThumbnails renders thumbnails.
3. PdfOutlines renders outlines.
4. PdfAttachments for accessing attachments
5. PdfMetadata for rendering file metadata
6. PdfSearchPanel for searing text in pdf file
7. PdfSignatures for retrieving signatures in pdf file
8. PdfEditor for editing files
9. PdfPrinter for printing files
10. PdfDownloader for downloading file
11. PdfUploader for uploading file

To build a pdf plugin, you just need to use hooks usePdfDocument and usePdfEngine to provide functionalities. Do note that you should avoid coupling between plugins.