Interactive forms: rewrite AcroForms example

This patch lets the AcroForms example make use of the built-in interactive forms functionality in PDF.js. This makes the example: - much easier to understand; - more feature-complete; - in sync with the core when new functionality is added; - similar to the other examples in terms of structure.
Whxin2017 · Feb 5, 2017 · 63fa268 · 63fa268
1 parent 8d684b5
commit 63fa268
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 183 deletions.
diff --git a/examples/acroforms/README.md b/examples/acroforms/README.md
@@ -0,0 +1,11 @@
+## Overview
+
+Example to demonstrate PDF.js library usage for rendering files with AcroForms.
+
+## Getting started
+
+Build PDF.js using `gulp dist` and run `gulp server` to start a web server.
+You can then work with the example at
+http://localhost:8888/examples/acroforms/acroforms.html.
+
+Refer to `acroforms.js` for the source code of the example.
diff --git a/examples/acroforms/acroforms.html b/examples/acroforms/acroforms.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+Copyright 2017 Mozilla Foundation
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<html dir="ltr">
+  <head>
+    <meta charset="utf-8">
+
+    <title>AcroForms example</title>
+
+    <link rel="stylesheet" href="../../build/dist/web/pdf_viewer.css">
+
+    <script src="../../build/dist/build/pdf.js"></script>
+    <script src="../../build/dist/web/pdf_viewer.js"></script>
+
+    <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+    .page {
+      position: relative;
+    }
+    </style>
+  </head>
+
+  <body>
+    <div id="pageContainer"></div>
+
+    <script src="acroforms.js"></script>
+  </body>
+</html>
diff --git a/examples/acroforms/acroforms.js b/examples/acroforms/acroforms.js
@@ -0,0 +1,49 @@
+/* Copyright 2017 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+PDFJS.workerSrc = '../../build/dist/build/pdf.worker.js';
+
+var DEFAULT_URL = '../../test/pdfs/f1040.pdf';
+var DEFAULT_SCALE = 1.0;
+
+var container = document.getElementById('pageContainer');
+
+// Fetch the PDF document from the URL using promises.
+PDFJS.getDocument(DEFAULT_URL).then(function (doc) {
+  // Use a promise to fetch and render the next page.
+  var promise = Promise.resolve();
+
+  for (var i = 1; i <= doc.numPages; i++) {
+    promise = promise.then(function (pageNum) {
+      return doc.getPage(pageNum).then(function (pdfPage) {
+        // Create the page view.
+        var pdfPageView = new PDFJS.PDFPageView({
+          container: container,
+          id: pageNum,
+          scale: DEFAULT_SCALE,
+          defaultViewport: pdfPage.getViewport(DEFAULT_SCALE),
+          annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory(),
+          renderInteractiveForms: true,
+        });
+
+        // Associate the actual page with the view and draw it.
+        pdfPageView.setPdfPage(pdfPage);
+        return pdfPageView.draw();
+      });
+    }.bind(null, i));
+  }
+});
diff --git a/examples/acroforms/forms.js b/examples/acroforms/forms.js
diff --git a/examples/acroforms/index.html b/examples/acroforms/index.html