ViewerPDFDiffTest

This JavaScript sample compares two PDF files (can also be DOCX, XLSX, PPTX, PNG, JPG) and uses an image comparison algorithm to show where the documents are different (no servers or other external dependencies required). Comparison documents are typically displayed overlayed in the viewer but an option exists to show documents side by side by syncing different WebViewer instances (see side by side demo). Once two documents have been compared their difference will be displayed in red or blue. Red indicates a change that has occurred in the original document and blue indicates what has been added to the new document (black indicates no changes). This functionality is commonly used in construction software, where drawings or blueprints are compared to identify where changes have occurred. This sample works on all browsers (including IE11) and mobile devices without using plug-ins. To view an example visit our PDF Comparison demo. Learn more about our Web SDK.

1(async exports => {
2 const PDFNet = exports.Core.PDFNet;
3 let Core = null;
4 let Annotations = null;
5
6 const parentDoc = window.parent.window.document;
7 const uploadedDoc = [null, null];
8
9 const getDiffOptions = async () => {
10 const redColor = new Annotations.Color(200, 0, 0, 1);
11 const blueColor = new Annotations.Color(0, 200, 200, 1);
12
13 const options = await PDFNet.createDiffOptions();
14
15 // instead of Annotations.Color, we can pass in an objects in the form {R: 200, G: 0, B: 0, A: 1}
16 options.setColorA(redColor);
17 options.setColorB(blueColor);
18
19 options.setBlendMode(5);
20 return options;
21 };
22
23 const compareDoc = async (doc1, doc2) => {
24 const newDoc = await PDFNet.PDFDoc.create();
25 newDoc.lock();
26
27 const options = await getDiffOptions();
28
29 const pages = [];
30 const itr = await doc1.getPageIterator(1);
31 const itr2 = await doc2.getPageIterator(1);
32
33 let i = 0;
34 for (itr; await itr.hasNext(); itr.next()) {
35 const page = await itr.current();
36 pages[i] = [page];
37 i++;
38 }
39
40 i = 0;
41 for (itr2; await itr2.hasNext(); itr2.next()) {
42 const page = await itr2.current();
43 (pages[i] || (pages[i] = [null])).push(page);
44 i++;
45 }
46
47 pages.forEach(async ([p1, p2]) => {
48 if (!p1) {
49 p1 = new PDFNet.Page('0');
50 }
51 if (!p2) {
52 p2 = new PDFNet.Page('0');
53 }
54
55 await newDoc.appendVisualDiff(p1, p2, options);
56 });
57
58 await newDoc.unlock();
59 instance.UI.loadDocument(newDoc);
60 };
61
62 const enableCompareButton = async () => {
63 const compareButton = parentDoc.getElementById('compareButton');
64
65 if (!compareButton.classList.contains('disabled')) {
66 return;
67 }
68
69 compareButton.classList.remove('disabled');
70
71 compareButton.addEventListener('click', async () => {
72 const doc1 = uploadedDoc[0];
73 const doc2 = uploadedDoc[1];
74 compareDoc(doc1, doc2);
75 });
76 };
77
78 const getPDFDocFromUpload = async (file, fileIndex) => {
79 const newDoc = await Core.createDocument(file, {});
80 uploadedDoc[fileIndex] = await newDoc.getPDFDoc();
81 if (uploadedDoc[1] !== null && uploadedDoc[0] !== null) {
82 enableCompareButton();
83 }
84 };
85
86 parentDoc.getElementById('fileUpload1').addEventListener('change', e => {
87 getPDFDocFromUpload(e.target.files[0], 0);
88 });
89
90 parentDoc.getElementById('fileUpload2').addEventListener('change', e => {
91 getPDFDocFromUpload(e.target.files[0], 1);
92 });
93
94 const init = async () => {
95 Core = window.Core;
96 Annotations = window.Core.Annotations;
97 Core.enableFullPDF();
98 await PDFNet.initialize();
99 };
100
101 window.addEventListener('viewerLoaded', async () => {
102 await init();
103 const doc1 = await PDFNet.PDFDoc.createFromURL('../../samples/files/test_doc_1.pdf');
104 const doc2 = await PDFNet.PDFDoc.createFromURL('../../samples/files/test_doc_2.pdf');
105 await compareDoc(doc1, doc2);
106
107 parentDoc.getElementById('fileUpload1').disabled = false;
108 parentDoc.getElementById('fileUpload2').disabled = false;
109 });
110})(window);
111// eslint-disable-next-line spaced-comment
112//# sourceURL=config.js

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales