diff --git a/examples/acroforms/README.md b/examples/acroforms/README.md new file mode 100644 index 000000000..50bf5bcf0 --- /dev/null +++ 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 new file mode 100644 index 000000000..bba3a7755 --- /dev/null +++ b/examples/acroforms/acroforms.html @@ -0,0 +1,44 @@ + + + + + + + AcroForms example + + + + + + + + + + +
+ + + + diff --git a/examples/acroforms/acroforms.js b/examples/acroforms/acroforms.js new file mode 100644 index 000000000..ca17a61b8 --- /dev/null +++ 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 deleted file mode 100644 index 91924e576..000000000 --- a/examples/acroforms/forms.js +++ /dev/null @@ -1,160 +0,0 @@ - -// -// Basic AcroForms input controls rendering -// - -'use strict'; - -// Specify the PDF with AcroForm here -var pdfWithFormsPath = '../../test/pdfs/f1040.pdf'; - -var formFields = {}; - -function setupForm(div, content, viewport) { - function bindInputItem(input, item) { - if (input.name in formFields) { - var value = formFields[input.name]; - if (input.type == 'checkbox') { - input.checked = value; - } else if (!input.type || input.type == 'text') { - input.value = value; - } - } - input.onchange = function pageViewSetupInputOnBlur() { - if (input.type == 'checkbox') { - formFields[input.name] = input.checked; - } else if (!input.type || input.type == 'text') { - formFields[input.name] = input.value; - } - }; - } - function createElementWithStyle(tagName, item) { - var element = document.createElement(tagName); - var rect = PDFJS.Util.normalizeRect( - viewport.convertToViewportRectangle(item.rect)); - element.style.left = Math.floor(rect[0]) + 'px'; - element.style.top = Math.floor(rect[1]) + 'px'; - element.style.width = Math.ceil(rect[2] - rect[0]) + 'px'; - element.style.height = Math.ceil(rect[3] - rect[1]) + 'px'; - return element; - } - function assignFontStyle(element, item) { - var fontStyles = ''; - if ('fontSize' in item) { - fontStyles += 'font-size: ' + Math.round(item.fontSize * - viewport.fontScale) + 'px;'; - } - switch (item.textAlignment) { - case 0: - fontStyles += 'text-align: left;'; - break; - case 1: - fontStyles += 'text-align: center;'; - break; - case 2: - fontStyles += 'text-align: right;'; - break; - } - element.setAttribute('style', element.getAttribute('style') + fontStyles); - } - - content.getAnnotations().then(function(items) { - for (var i = 0; i < items.length; i++) { - var item = items[i]; - switch (item.subtype) { - case 'Widget': - if (item.fieldType != 'Tx' && item.fieldType != 'Btn' && - item.fieldType != 'Ch') { - break; - } - var inputDiv = createElementWithStyle('div', item); - inputDiv.className = 'inputHint'; - div.appendChild(inputDiv); - var input; - if (item.fieldType == 'Tx') { - input = createElementWithStyle('input', item); - } - if (item.fieldType == 'Btn') { - input = createElementWithStyle('input', item); - if (item.flags & 32768) { - input.type = 'radio'; - // radio button is not supported - } else if (item.flags & 65536) { - input.type = 'button'; - // pushbutton is not supported - } else { - input.type = 'checkbox'; - } - } - if (item.fieldType == 'Ch') { - input = createElementWithStyle('select', item); - // select box is not supported - } - input.className = 'inputControl'; - input.name = item.fieldName; - input.title = item.alternativeText; - assignFontStyle(input, item); - bindInputItem(input, item); - div.appendChild(input); - break; - } - } - }); -} - -function renderPage(div, pdf, pageNumber, callback) { - pdf.getPage(pageNumber).then(function(page) { - var scale = 1.5; - var viewport = page.getViewport(scale); - - var pageDisplayWidth = viewport.width; - var pageDisplayHeight = viewport.height; - - var pageDivHolder = document.createElement('div'); - pageDivHolder.className = 'pdfpage'; - pageDivHolder.style.width = pageDisplayWidth + 'px'; - pageDivHolder.style.height = pageDisplayHeight + 'px'; - div.appendChild(pageDivHolder); - - // Prepare canvas using PDF page dimensions - var canvas = document.createElement('canvas'); - var context = canvas.getContext('2d'); - canvas.width = pageDisplayWidth; - canvas.height = pageDisplayHeight; - pageDivHolder.appendChild(canvas); - - // Render PDF page into canvas context - var renderContext = { - canvasContext: context, - viewport: viewport - }; - page.render(renderContext).promise.then(callback); - - // Prepare and populate form elements layer - var formDiv = document.createElement('div'); - pageDivHolder.appendChild(formDiv); - - setupForm(formDiv, page, viewport); - }); -} - -// In production, the bundled pdf.js shall be used instead of RequireJS. -require.config({paths: {'pdfjs': '../../src'}}); -require(['pdfjs/display/api', 'pdfjs/display/global'], function (api, global) { - // In production, change this to point to the built `pdf.worker.js` file. - global.PDFJS.workerSrc = '../../src/worker_loader.js'; - - // Fetch the PDF document from the URL using promises. - api.getDocument(pdfWithFormsPath).then(function getPdfForm(pdf) { - // Rendering all pages starting from first - var viewer = document.getElementById('viewer'); - var pageNumber = 1; - renderPage(viewer, pdf, pageNumber++, function pageRenderingComplete() { - if (pageNumber > pdf.numPages) { - return; // All pages rendered - } - // Continue rendering of the next page - renderPage(viewer, pdf, pageNumber++, pageRenderingComplete); - }); - }); -}); diff --git a/examples/acroforms/index.html b/examples/acroforms/index.html deleted file mode 100644 index 6a217edd0..000000000 --- a/examples/acroforms/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - -
- - -