Key-Value Extraction Showcase Demo Code Sample

Requirements

Quickly extract key-value pairs from PDFs, convert values into JSON for easy analysis, and display annotations that highlight each paired element.

This demo allows you to:

Upload your own PDF file or test on sample files.
Extract a JSON containing the key-value elements in the PDF.
Create colorized key-value annotations for extracted paired elements.

Implementation steps

To add key-value extraction capability with WebViewer:

Step 1: Choose your preferred web stack for WebViewer.
Step 2: Add the ES6 JavaScript sample code provided in this guide.

Once you generate your license key, it will automatically be included in your sample code below.

License Key

1// ES6 Compliant Syntax
2// GitHub Copilot v1.0, Claude Sonnet 4, November 13, 2025
3// File: index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
8
9// Key-Value Extraction Demo
10// This code demonstrates how to extract key-value pairs from documents using WebViewer
11//
12// **Important** 
13// 1. You must get a license key from Apryse for the server to run. 
14// A trial key can be obtained from:
15// https://docs.apryse.com/core/guides/get-started/trial-key
16//
17// 2. You need to also run the `npm install` command at /key-value-extraction/server/ location to install the `@pdftron/pdfnet-node` and `@pdftron/data-extraction` packages.
18
19function initializeWebViewer() {
20
21    // This code initializes the WebViewer with the basic settings
22    WebViewer({
23        path: '/lib',
24        licenseKey: licenseKey,
25        enableFilePicker: true,
26    }, document.getElementById('viewer')).then((instance) => {
27
28        // Add the demo-specific functionality
29        customizeUI(instance).then(() => {
30            // Create UI controls after demo is initialized
31            UIElements.createUIControls(instance);
32        });
33    });
34}
35
36// Starting page for extraction
37let startPage = 1;
38
39// Global variable to hold result data
40globalThis.resultData = null;
41
42// Custom File factory function to hold file metadata (not to be confused with browser's File API)
43function FileMetadata(options) {
44    return {
45        name: options.name,
46        displayName: options.displayName,
47        path: options.path,
48        extension: options.extension,
49        displayExtension: options.displayExtension,
50        id: options.id,
51    };
52}
53
54const files = {
55    DRIVERS_LICENSE: FileMetadata({
56        name: 'sample-license.pdf',
57        displayName: 'Driver\'s License',
58        path: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/sample-license.pdf',
59        extension: 'pdf',
60        id: 100
61    }),
62    SALES_INVOICE: FileMetadata({
63        name: 'sales-invoice.pdf',
64        displayName: 'Sales Invoice',
65        path: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/sales-invoice.pdf',
66        extension: 'pdf',
67        id: 14
68    })
69}
70
71const sampleDocuments = [
72    files.DRIVERS_LICENSE,
73    files.SALES_INVOICE
74];
75globalThis.sampleDocuments = sampleDocuments;
76
77const defaultFile = sampleDocuments[1].path; // SALES_INVOICE
78
79const customizeUI = async (instance) => {
80    // Customize the UI for the key value extraction demo
81    instance.UI.setToolbarGroup('toolbarGroup-View');
82    instance.UI.disableElements(['thumbnailControl']);
83
84    // Reset variables when new document is loaded
85    instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
86        globalThis.resultData = null;
87        startPage = 1;
88
89        // Reset the JSON display area and Color Legend
90        UIElements.resetUI(instance);
91    });
92
93    // Load the default file for demonstration
94    if (defaultFile) {
95        instance.UI.loadDocument(defaultFile);
96    }
97};
98
99// Function to extract key-value pairs from title block via server
100const extractKeyValuePairs = async (instance) => {
101    const doc = instance.Core.documentViewer.getDocument();
102    if (doc) {
103        const pdfBuffer = await doc.getFileData({ flags: instance.Core.SaveOptions.LINEARIZED });
104        console.log('Sending PDF to server for key-value extraction...');
105        const pdfBlob = new Blob([pdfBuffer], { type: 'application/pdf' });
106        const formData = new FormData();
107        formData.append('pdffile', pdfBlob, 'viewerDocument.pdf');
108
109        // Send the PDF to the server to extract key-value pairs
110        const postResponse = await fetch('http://localhost:5050/server/handler.js/extract-key-value-pairs', {
111            method: 'POST',
112            body: formData,
113        });
114
115        if (postResponse.status !== 200) {
116            throw new Error(`Server error during PDF upload: ${postResponse.status}`);
117        }
118
119        // Retrieve and parse the JSON response
120        const jsonResponse = await postResponse.json();
121        const docStructureData = JSON.parse(jsonResponse);
122        globalThis.resultData = JSON.stringify(docStructureData, null, 2);
123
124        // Draw annotations on the document based on extracted data
125        drawAnnotations(docStructureData, instance);
126    }
127}
128
129globalThis.extractKeyValuePairs = extractKeyValuePairs; // Make extractKeyValuePairs globally available so that the UIElements module can access it
130
131// Function to draw annotations on the document based on extracted key-value data
132const drawAnnotations = (docStructureData, instance) => {
133    const { annotationManager, Annotations } = instance.Core;
134
135    // Retrieve the first page's data
136    const page = docStructureData.pages[startPage - 1];
137    const pageNumber = page?.properties?.pageNumber;
138    console.log(`Processing Page ${pageNumber} for annotations...`);
139    for (const kv of page.keyValueElements ?? []) {
140        const valueRect = kv?.rect;
141        const keyRect = kv?.key?.rect;
142        const hasValueWords = (kv?.words?.length ?? 0) > 0;
143
144        // Only draw if value has words
145        if (!hasValueWords) {
146            console.log('Skipping annotation for key-value pair with no value words.');
147            continue;
148        }
149        // value: blue
150        const valueAnnot = new Annotations.RectangleAnnotation({
151            PageNumber: pageNumber,
152            X: valueRect[0],
153            Y: valueRect[1],
154            Width: valueRect[2] - valueRect[0],
155            Height: valueRect[3] - valueRect[1],
156            StrokeColor: new Annotations.Color(0, 0, 255),
157            StrokeThickness: 1,
158        });
159        annotationManager.addAnnotation(valueAnnot);
160        annotationManager.redrawAnnotation(valueAnnot);
161
162        // key: red
163        const keyAnnot = new Annotations.RectangleAnnotation({
164            PageNumber: pageNumber,
165            X: keyRect[0],
166            Y: keyRect[1],
167            Width: keyRect[2] - keyRect[0],
168            Height: keyRect[3] - keyRect[1],
169            StrokeColor: new Annotations.Color(255, 0, 0),
170            StrokeThickness: 1,
171        });
172        annotationManager.addAnnotation(keyAnnot);
173        annotationManager.redrawAnnotation(keyAnnot);
174
175        // Green connector
176        const line = new Annotations.LineAnnotation();
177        line.pageNumber = pageNumber;
178        line.StrokeColor = new Annotations.Color(0, 255, 0);
179        line.StrokeThickness = 1;
180        line.Start = topLeftPoint(valueRect, instance);
181        line.End = topLeftPoint(keyRect, instance);
182        annotationManager.addAnnotation(line);
183        annotationManager.redrawAnnotation(line);
184    }
185};
186
187// Helper function to get top-left point of a rectangle
188const topLeftPoint = ([x1, y1, x2, y2], instance) => {
189    return new instance.Core.Math.Point(Math.min(x1, x2), Math.min(y1, y2));
190};
191
192// Cleanup function for when the demo is closed or page is unloaded
193const cleanup = (instance) => {
194    if (instance !== undefined && instance.UI) {
195        if (instance.Core.documentViewer.getDocument()) {
196            // Insert any other cleanup code here
197        }
198        console.log('Cleaning up title-block-data-extraction demo');
199    }
200};
201
202// Register cleanup for page unload
203globalThis.addEventListener('beforeunload', () => cleanup(instance));
204globalThis.addEventListener('unload', () => cleanup(instance));
205
206// Helper function to load the ui-elements.js script
207function loadUIElementsScript() {
208    return new Promise((resolve, reject) => {
209        if (globalThis.UIElements) {
210            console.log('UIElements already loaded');
211            resolve();
212            return;
213        }
214        const script = document.createElement('script');
215        script.src = '/showcase-demos/key-value-extraction/client/ui-elements.js';
216        script.onload = function () {
217            console.log('✅ UIElements script loaded successfully');
218            resolve();
219        };
220        script.onerror = function () {
221            console.error('Failed to load UIElements script');
222            reject(new Error('Failed to load ui-elements.js'));
223        };
224        document.head.appendChild(script);
225    });
226}
227
228// Load UIElements script first, then initialize WebViewer
229loadUIElementsScript().then(() => {
230    initializeWebViewer();
231}).catch((error) => {
232    console.error('Failed to load UIElements:', error);
233});
234

1// ES6 Compliant Syntax
2// GitHub Copilot v1.0, Claude Sonnet 4, November 13, 2025
3// File: handler.js
4// This file will handle key-value extraction requests.
5
6const fs = require('node:fs');
7const { PDFNet } = require('@pdftron/pdfnet-node');
8
9// **Important** 
10// 1. You must get a license key from Apryse for the server to run. 
11// A trial key can be obtained from:
12// https://docs.apryse.com/core/guides/get-started/trial-key 
13// 
14// 2. You need to also run the `npm install` command at /key-value-extraction/server/ location to install the `@pdftron/pdfnet-node` and `@pdftron/data-extraction` packages.
15const licenseKey = 'YOUR_SERVER_LICENSE_KEY';
16const multer = require('multer');
17const storage = multer.diskStorage({
18  destination: function (req, file, cb) {
19    cb(null, 'sentFiles/')
20  },
21  filename: function (req, file, cb) {
22    // Save with original filename and extension
23    cb(null, file.originalname)
24  }
25});
26const upload = multer({ storage: storage });
27const { response } = require('express');
28const e = require('express');
29const serverFolder = 'server';
30const sentFiles = 'sentFiles';
31const serverHandler = `/${serverFolder}/handler.js`;
32
33const handler = async (app) => {
34
35  // Function to initialize PDFNet and check for module availability
36  async function initializePDFNet() {
37    // Create folder sentFiles that will hold the sent files, if it doesn't exist
38    if (!fs.existsSync(sentFiles))
39      fs.mkdirSync(sentFiles);  
40
41    // Initialize PDFNet
42    await PDFNet.initialize(licenseKey);
43
44    // Specify the Data Extraction library path
45    await PDFNet.addResourceSearchPath('./node_modules/@pdftron/data-extraction/lib/');
46
47    // Check if the Apryse SDK Data Extraction module is available.
48    if (await PDFNet.DataExtractionModule.isModuleAvailable(PDFNet.DataExtractionModule.DataExtractionEngine.e_GenericKeyValue))
49      console.log('Apryse SDK Data Extraction module is available.');
50    else
51      console.log('Unable to run: Apryse SDK Data Extraction module not available.');
52  }
53
54  // Handle POST request sent to '/server/handler.js/extract-key-value-pairs'
55  // This endpoint receives the PDF file path, extracts key-value data from the title block, and returns it as JSON
56  app.post(`${serverHandler}/extract-key-value-pairs`, upload.single('pdffile'), async (request, response) => {
57    try {
58      console.log('Received PDF for key-value extraction');
59      const pdfPath = request.file.path;
60      const jsonResponse = await extractKeyValuePairs(pdfPath);
61      response.status(200).json(jsonResponse);
62    } catch (error) {
63      console.error('Error extracting key-value data:', error);
64      response.status(500).send('Error extracting key-value data');
65    } finally {
66      // Cleanup: remove the sent PDF file
67      const pdfPath = request.file.path;
68      fs.unlink(pdfPath, (err) => {
69        if (err) {
70          console.error(`Error removing PDF file ${pdfPath}: ${err.message}`);
71        }
72      });
73    }
74  });
75
76  // Function to extract key-value pairs from PDF using Data Extraction module
77  const extractKeyValuePairs = async (pdf) => {
78    try {
79      // Set up data extraction options
80      const options = new PDFNet.DataExtractionModule.DataExtractionOptions();
81      console.log('Setting extraction language to English');
82      options.setLanguage('eng');
83      options.setPages('1-1'); // Extract from first page only
84
85      // Extract key-value data from the PDF using the provided JSON template
86      const jsonString = await PDFNet.DataExtractionModule.extractDataAsString(pdf, PDFNet.DataExtractionModule.DataExtractionEngine.e_GenericKeyValue, options);
87      return jsonString;
88      
89    } catch (err) {
90      console.log(err);
91      throw new Error(err);
92    }
93  };
94
95  // Initialize PDFNet
96  PDFNet.runWithoutCleanup(initializePDFNet, licenseKey).then(
97    function onFulfilled() {
98      response.status(200);
99    },
100    function onRejected(error) {
101      // log error and close response
102      console.error('Error initializing PDFNet', error);
103      response.status(503).send();
104    }
105  );
106};
107
108module.exports = handler;
109

1// ES6 Compliant Syntax
2// GitHub Copilot v1.0, Claude Sonnet 4, November 13, 2025
3// File: server.js
4// This file is to run a server in localhost.
5
6const express = require('express');
7const fs = require('node:fs');
8const bodyParser = require('body-parser');
9const handler = require('./handler.js');
10const port = process.env.PORT || 5050;
11const app = express();
12const sentPdfs = 'sentPdfs';
13
14// CORS middleware to allow cross-origin requests from the playground
15app.use((req, res, next) => {
16  res.header('Access-Control-Allow-Origin', '*');
17  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
18  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
19  
20  // Handle preflight OPTIONS requests
21  if (req.method === 'OPTIONS') {
22    res.sendStatus(200);
23  } else {
24    next();
25  }
26});
27
28app.use(bodyParser.text());
29app.use('/client', express.static('../client')); // For statically serving 'client' folder at '/'
30
31handler(app);
32
33// Run server
34const server = app.listen(port, 'localhost', (err) => {
35  if (err) {
36    console.error(err);
37  } else {
38    console.info(`Server is listening at http://localhost:${port}`);
39  }
40});
41
42// Server shutdown and cleanup
43function shutdown() {
44  console.log('Cleanup started...');
45
46  // Example: Close server
47  server.close(() => {
48    console.log('Server closed.');
49
50    // Removes sent PDFs folder
51    if (fs.existsSync(sentPdfs))
52      fs.rmdirSync(sentPdfs, { recursive: true });
53
54    // If no async cleanup, exit directly
55    process.exit(0);
56  });
57}
58
59// Handle shutdown signals
60process.on('SIGINT', shutdown);   // Ctrl+C
61process.on('SIGTERM', shutdown);  // kill command or Docker stop
62process.on('uncaughtException', (err) => {
63  console.error('Uncaught Exception:', err);
64  shutdown();
65});

1// ES6 Compliant Syntax
2// GitHub Copilot v1.0, Claude Sonnet 4, November 13, 2025
3// File: ui-elements.js
4// UI Elements class to create and manage custom UI controls
5// Helper code to add controls to the viewer holding the buttons
6
7class UIElements {
8    // Function to check if the user is on a mobile device
9    static isMobileDevice = () => {
10        // Use modern User-Agent Client Hints API if available (Chrome 90+, Edge 90+)
11        if (globalThis.navigator.userAgentData) {
12            return globalThis.navigator.userAgentData.mobile === true;
13        }
14        // Fallback: combine touch-point detection with a concise UA check
15        const isTouchDevice = globalThis.navigator.maxTouchPoints > 0;
16        const mobileUA = /android|iphone|ipad|ipod|blackberry|windows phone/i.test(globalThis.navigator.userAgent);
17        return isTouchDevice && mobileUA;
18    }
19
20    // JSON Code Block Element
21    static jsonElement = () => {
22        const wrapper = document.createElement('div');
23        wrapper.className = 'json-wrapper';
24        wrapper.style.display = 'none'; // Initially hidden
25
26        // Container for the JSON code block
27        const container = document.createElement('div');
28        container.className = 'json-container';
29
30        // Code block for JSON
31        const codePre = document.createElement('pre');
32        codePre.className = 'json-pre';
33
34        const codeBlock = document.createElement('code');
35        codeBlock.id = 'json-code';
36        codeBlock.contentEditable = false;
37
38        // Assemble the JSON code block
39        codePre.appendChild(codeBlock);
40        container.appendChild(codePre);
41        wrapper.appendChild(container);
42        return wrapper;
43    };
44
45    // Extract Key Value Pairs button
46    static extractKeyValuePairsButton = (instance) => {
47        // Spinner element to indicate loading
48        const spinner = document.createElement('div');
49        spinner.className = 'spinner';
50
51        // Button element for extracting key-value pairs
52        const button = document.createElement('button');
53        button.className = 'btn extract-btn';
54        button.textContent = 'Extract Key-Value Pairs';
55        button.onclick = async () => {
56            try {
57                button.disabled = true;
58                spinner.style.display = 'inline-block';
59                await globalThis.extractKeyValuePairs(instance);
60            } catch (e) {
61                console.error(e);
62                button.disabled = false;
63            }
64            finally {
65                // Hide spinner when done
66                spinner.style.display = 'none';
67
68                // Display the extracted JSON data
69                const jsonWrapper = document.querySelector('.json-wrapper');
70                const jsonCodeBlock = document.getElementById('json-code');
71                if (globalThis.resultData) {
72                    jsonCodeBlock.textContent = JSON.stringify(JSON.parse(globalThis.resultData), null, 2);
73                    jsonWrapper.style.display = 'flex';
74                } else {
75                    jsonCodeBlock.textContent = '';
76                    jsonWrapper.style.display = 'none';
77                }
78
79                // Show color legend if extraction was successful
80                const legendContainer = document.querySelector('.legend-container');
81                if (globalThis.resultData) {
82                    legendContainer.style.display = 'flex';
83                } else {
84                    legendContainer.style.display = 'none';
85                }
86            }
87        };
88
89        button.appendChild(spinner);
90
91        return button;
92    }
93
94    // Legends for the Annotations
95    static colorLegend = () => {
96        const legendContainer = document.createElement('div');
97        legendContainer.className = 'legend-container';
98
99        const colors = ['rgb(255, 0, 0)', 'rgb(0, 0, 255)', 'rgb(0, 255, 0)'];
100        const labels = ['Key', 'Value', 'Connector'];
101
102        for (let i = 0; i < colors.length; i++) {
103            const legendItem = document.createElement('div');
104            legendItem.className = 'legend-item';
105
106            const colorBox = document.createElement('span');
107            colorBox.className = 'color-box';
108            colorBox.style.backgroundColor = colors[i];
109
110            const label = document.createElement('span');
111            label.textContent = labels[i];
112
113            legendItem.appendChild(colorBox);
114            legendItem.appendChild(label);
115            legendContainer.appendChild(legendItem);
116        }
117
118        return legendContainer;
119    }
120
121    // Reset JSON Code Block and Legend
122    static resetUI = () => {
123        // Hide JSON code block
124        const jsonWrapper = document.querySelector('.json-wrapper');
125        const jsonCodeBlock = document.getElementById('json-code');
126        jsonCodeBlock.textContent = '';
127        jsonWrapper.style.display = 'none';
128
129        // Hide legend
130        const legendContainer = document.querySelector('.legend-container');
131        legendContainer.style.display = 'none';
132
133        // Enable Extract button
134        const extractButton = document.querySelector('.extract-btn');
135        extractButton.disabled = false;
136    }
137
138
139    // Gallery Picker Element
140    static galleryPicker = (instance) => {
141        const galleryGrid = document.createElement('div');
142        galleryGrid.className = 'gallery-grid';
143
144        const sampleDocuments = globalThis.sampleDocuments;
145        const filesArray = [
146            { name: sampleDocuments[0].displayName, thumbnail: '/showcase-demos/key-value-extraction/client/gallery/thumbs/sample-license.png', url: sampleDocuments[0].path },
147            { name: sampleDocuments[1].displayName, thumbnail: '/showcase-demos/key-value-extraction/client/gallery/thumbs/sales-invoice.png' , url: sampleDocuments[1].path }
148        ];
149
150        // Render the grid of thumbnails
151        for (const file of filesArray) {
152            const thumbDiv = document.createElement('div');
153            thumbDiv.className = 'gallery-thumb';
154            thumbDiv.title = file.name;
155            thumbDiv.tabIndex = 0;
156            thumbDiv.setAttribute('role', 'button');
157            thumbDiv.setAttribute('aria-label', file.name);
158            thumbDiv.onclick = () => handleClick(file);
159            thumbDiv.onkeydown = (e) => {
160                if (e.key === 'Enter' || e.key === ' ') {
161                    handleClick(file);
162                }
163            };
164
165            const img = document.createElement('img');
166            img.src = file.thumbnail;
167            img.alt = file.displayName;
168            img.className = 'gallery-thumb-img';
169            thumbDiv.appendChild(img);
170
171            const label = document.createElement('div');
172            label.className = 'gallery-thumb-label';
173            label.textContent = `${file.name}`;
174            label.onclick = (e) => {
175                e.stopPropagation();
176                fetch(file.url).then(response => {
177                    if (!response.ok) {
178                        throw new Error('Could not fetch file: ' + response.statusText);
179                    }
180                    return response.blob();
181                }).then(blob => {
182                    const url = globalThis.URL.createObjectURL(blob);
183                    const a = document.createElement('a');
184                    a.style.display = 'none';
185                    a.href = url;
186                    a.download = file.name;
187                    document.body.appendChild(a);
188                    a.click();
189                    globalThis.URL.revokeObjectURL(url);
190                    a.remove();
191                }).catch(error => {
192                    console.error('There was a problem with the fetch operation:', error);
193                });
194            };
195            thumbDiv.appendChild(label);
196
197            galleryGrid.appendChild(thumbDiv);
198        }
199
200        const handleClick = (file) => {
201            instance.UI.loadDocument(file.url, { filename: file.name, extension: file.extension });
202        };
203
204        return galleryGrid;
205    };
206
207    static createUIControls = (instance) => {
208        // Create a container for all controls
209        const controlsContainer = document.createElement('div');
210        controlsContainer.className = 'button-container';
211
212        // Add the extract button and the legend to the controls container
213        controlsContainer.appendChild(this.extractKeyValuePairsButton(instance));
214        controlsContainer.appendChild(this.colorLegend());
215
216        // Insert the JSON code block and controls container into the playground viewer element (top bar)
217        const playgroundViewerElement = document.getElementById('playground-viewer');
218        playgroundViewerElement.insertBefore(this.jsonElement(), playgroundViewerElement.firstChild);
219        playgroundViewerElement.insertBefore(controlsContainer, playgroundViewerElement.firstChild);
220
221        // Create a gallery container
222        const galleryContainer = document.createElement('div');
223        galleryContainer.className = 'gallery-container';
224        galleryContainer.appendChild(this.galleryPicker(instance));
225
226        // Add the gallery container to the viewer element (left side)
227        const viewerElement = document.getElementById('viewer');
228        viewerElement.style.display = 'flex';
229        viewerElement.style.flexDirection = 'row';
230        viewerElement.insertBefore(galleryContainer, viewerElement.firstChild);
231    };
232}

1/* CSS standards Compliant Syntax */
2/* GitHub Copilot v1.0, Claude Sonnet 4, October 22, 2025 */
3/* File: index.css */
4
5/* Button Styles */
6.btn {
7    display: flex;
8    align-items: center;
9    justify-content: center;
10    background-color: #0056b3;
11    margin: 10px;
12    padding: 5px 10px;
13    border: 1px solid #ccc;
14    border-radius: 4px;
15    cursor: pointer;
16    font-size: 14px;
17    font-weight: bold;
18    transition: all 0.2s ease;
19    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
20    color: white;
21    width: 240px;
22}
23
24.btn:hover {
25    background-color: #003d80;
26    transform: translateY(-1px);
27    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
28}
29
30.btn:active {
31    transform: translateY(1px);
32    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
33}
34
35.btn:disabled {
36    opacity: 0.4;
37    cursor: not-allowed;
38    box-shadow: none;
39    background-color: #E7EBEE;
40    color: #5A6268;
41}
42
43.btn .spinner {
44    display: none;
45    border-top: 2px solid currentColor;
46    border-right: 2px solid currentColor;
47    border-bottom-style: solid;
48    border-left-style: solid;
49    border-radius: 99999px;
50    border-bottom-width: 2px;
51    border-left-width: 2px;
52    border-bottom-color: transparent;
53    border-left-color: transparent;
54    animation: rotateBorder 0.45s linear 0s infinite;
55    width: 1em;
56    height: 1em;    
57}
58
59@keyframes rotateBorder {
60    0% {
61        transform: rotate(0deg);
62    }
63    100% {
64        transform: rotate(365deg);
65    }
66}
67
68/* Button Container */
69.button-container {
70    display: flex;
71    flex-direction: row;
72    align-items: center;
73    gap: 15px;
74    margin: 5px 0;
75    padding: 16px;
76    padding-bottom: 5px;
77    border-bottom: 1px solid #DFE1E6;
78    background-color: rgba(112, 198, 255, 0.2);
79}
80
81/* JSON Display Container */
82.json-pre {
83    height: 90%;
84    font-family: monospace;
85    white-space: pre-wrap;
86    display: block;
87    overflow: scroll;
88    background-color: #f1f3f5;
89}
90
91.json-wrapper {
92    width: 100%;
93    max-width: 100%;
94    box-sizing: border-box;
95}
96
97.json-container {
98    display: flex;
99    min-height: 140px;
100    max-height: 200px;
101    width: 100%;
102    max-width: 100%;
103    border-radius: 2px;
104    border: 1px solid rgba(0, 0, 0, 0.12);
105    overflow-y: auto;
106    overflow-x: auto;
107    flex-grow: 1;
108    position: relative;
109    padding-bottom: 2px;
110    background-color: rgb(244, 245, 247);
111    box-sizing: border-box;
112}
113
114.json-container .json-pre {
115    font-family: monospace;
116    white-space: pre-wrap;
117    width: 100%;
118    max-width: 100%;
119    margin: 0;
120    padding: 8px;
121    box-sizing: border-box;
122    overflow-wrap: break-word;
123}
124
125#json-code {
126    width: 100%;
127    max-width: 100%;
128    display: block;
129    box-sizing: border-box;
130    background: transparent;
131    border: none;
132    outline: none;
133    resize: none;
134    font-family: inherit;
135}
136
137/* Legend Container */
138.legend-container {
139    display: none;
140    flex-direction: row;
141    gap: 10px;
142}
143
144.legend-item {
145    display: flex;
146    align-items: center;
147    gap: 5px;
148}
149
150.color-box {
151    display: inline-block;
152    width: 16px;
153    height: 16px;
154    border: 1px solid #ccc;
155    border-radius: 3px;
156}
157
158/* Gallery Container on the left */
159.gallery-container {
160    width: 300px;
161    max-width: 300px;
162    display: flex;
163    flex-direction: column;
164    align-items: flex-start;
165    border-right: 1px solid #e0e0e0;
166    background-color: rgba(112, 198, 255, 0.2);
167    transition: margin 0.25s ease-in-out, opacity 0.25s ease-in-out;
168    height: 100%;
169}
170
171/* Gallery Picker Styles */
172.gallery-grid {
173    display: grid;
174    margin: 8px;
175    margin-left: 8px;
176}
177
178.gallery-thumb {
179    display: flex;
180    align-items: center;
181    flex-direction: column;
182    margin-top: 10px;
183    cursor: pointer;
184}
185
186.gallery-thumb-img {
187    border-radius: 6px;
188    height: 140px;
189    max-width: 235px;
190    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 5px 0 rgba(0, 0, 0, 0.1);
191    transition: transform 0.1s ease;
192}
193
194.gallery-thumb-img:hover,
195.gallery-thumb-img:focus {
196    transform: scale(1.05);
197    border: 1px solid;
198    border-color: #0206a8;
199}
200
201.gallery-thumb-label {
202    font-size: 0.875rem;
203    line-height: 20px;
204    color: #0206A8;
205    letter-spacing: -0.3px;
206}
207
208/* Responsive Design */
209@media (max-width: 768px) {
210    #viewer {
211        flex-direction: column;
212    }
213
214    .gallery-container {
215        width: 150px;
216        height: auto;
217        border-right: none;
218        border-bottom: 1px solid #e0e0e0;
219        align-items: center;
220    }
221}
222
223

1{
2  "name": "cad-viewer-server",
3  "version": "1.0.0",
4  "description": "CAD Viewer Demo Server Component",
5  "main": "server.js",
6  "scripts": {
7    "start": "node server.js",
8    "dev": "node server.js"
9  },
10  "dependencies": {
11    "@pdftron/data-extraction": "^11.8.0",
12    "@pdftron/pdfnet-node": "^11.8.0",
13    "body-parser": "^1.20.2",
14    "express": "^4.18.2",
15    "multer": "^1.4.4",
16    "open": "^9.1.0"
17  },
18  "keywords": [
19    "pdf",
20    "server",
21    "pdftron",
22    "webviewer"
23  ],
24  "author": "Apryse",
25  "license": "MIT"
26}
27

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales

Product:

Key-Value Extraction Showcase Demo Code Sample

Implementation steps

License Key