notmasteryet
14 years ago
4 changed files with 192 additions and 78 deletions
@ -0,0 +1,141 @@
@@ -0,0 +1,141 @@
|
||||
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */ |
||||
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */ |
||||
|
||||
//
|
||||
// Basic AcroForms input controls rendering
|
||||
//
|
||||
|
||||
'use strict'; |
||||
|
||||
var formFields = {}; |
||||
|
||||
function setupForm(div, content, scale) { |
||||
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); |
||||
element.style.left = (item.x * scale) + 'px'; |
||||
element.style.top = (item.y * scale) + 'px'; |
||||
element.style.width = Math.ceil(item.width * scale) + 'px'; |
||||
element.style.height = Math.ceil(item.height * scale) + 'px'; |
||||
return element; |
||||
} |
||||
function assignFontStyle(element, item) { |
||||
var fontStyles = ''; |
||||
if ('fontSize' in item) |
||||
fontStyles += 'font-size: ' + Math.round(item.fontSize * scale) + '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); |
||||
} |
||||
|
||||
var items = content.getAnnotations(); |
||||
for (var i = 0; i < items.length; i++) { |
||||
var item = items[i]; |
||||
switch (item.type) { |
||||
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.fullName; |
||||
input.title = item.alternativeText; |
||||
assignFontStyle(input, item); |
||||
bindInputItem(input, item); |
||||
div.appendChild(input); |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
|
||||
function renderPage(div, pdf, pageNumber, callback) { |
||||
var page = pdf.getPage(pageNumber); |
||||
var scale = 1.5; |
||||
|
||||
var pageDisplayWidth = page.width * scale; |
||||
var pageDisplayHeight = page.height * scale; |
||||
|
||||
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
|
||||
page.startRendering(context, callback); |
||||
|
||||
// Prepare and populate form elements layer
|
||||
var formDiv = document.createElement('div'); |
||||
pageDivHolder.appendChild(formDiv); |
||||
|
||||
setupForm(formDiv, page, scale); |
||||
} |
||||
|
||||
PDFJS.getPdf(pdfWithFormsPath, function getPdfForm(data) { |
||||
// Instantiate PDFDoc with PDF data
|
||||
var pdf = new PDFJS.PDFDoc(data); |
||||
|
||||
// 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); |
||||
}); |
||||
}); |
||||
|
||||
@ -0,0 +1,51 @@
@@ -0,0 +1,51 @@
|
||||
<!doctype html> |
||||
<html> |
||||
|
||||
<head> |
||||
<!-- In production, only one script (pdf.js) is necessary --> |
||||
<!-- In production, change the content of PDFJS.workerSrc below --> |
||||
<script type="text/javascript" src="../../src/core.js"></script> |
||||
<script type="text/javascript" src="../../src/util.js"></script> |
||||
<script type="text/javascript" src="../../src/canvas.js"></script> |
||||
<script type="text/javascript" src="../../src/obj.js"></script> |
||||
<script type="text/javascript" src="../../src/function.js"></script> |
||||
<script type="text/javascript" src="../../src/charsets.js"></script> |
||||
<script type="text/javascript" src="../../src/cidmaps.js"></script> |
||||
<script type="text/javascript" src="../../src/colorspace.js"></script> |
||||
<script type="text/javascript" src="../../src/crypto.js"></script> |
||||
<script type="text/javascript" src="../../src/evaluator.js"></script> |
||||
<script type="text/javascript" src="../../src/fonts.js"></script> |
||||
<script type="text/javascript" src="../../src/glyphlist.js"></script> |
||||
<script type="text/javascript" src="../../src/image.js"></script> |
||||
<script type="text/javascript" src="../../src/metrics.js"></script> |
||||
<script type="text/javascript" src="../../src/parser.js"></script> |
||||
<script type="text/javascript" src="../../src/pattern.js"></script> |
||||
<script type="text/javascript" src="../../src/stream.js"></script> |
||||
<script type="text/javascript" src="../../src/worker.js"></script> |
||||
<script type="text/javascript" src="../../external/jpgjs/jpg.js"></script> |
||||
|
||||
<script type="text/javascript"> |
||||
// Specify the main script used to create a new PDF.JS web worker. |
||||
// In production, change this to point to the combined `pdf.js` file. |
||||
PDFJS.workerSrc = '../../src/worker_loader.js'; |
||||
|
||||
// Specify the PDF with AcroForm here |
||||
var pdfWithFormsPath = '../../test/pdfs/f1040.pdf'; |
||||
</script> |
||||
|
||||
<style> |
||||
.pdfpage { position:relative; top: 0; left: 0; border: solid 1px black; margin: 10px; } |
||||
.pdfpage > canvas { position: absolute; top: 0; left: 0; } |
||||
.pdfpage > div { position: absolute; top: 0; left: 0; } |
||||
.inputControl { background: transparent; border: 0px none; position: absolute; margin: auto; } |
||||
.inputControl[type='checkbox'] { margin: 0px; } |
||||
</style> |
||||
|
||||
<script type="text/javascript" src="forms.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="viewer"></div> |
||||
</body> |
||||
|
||||
</html> |
||||
Loading…
Reference in new issue