Blend PDF with HTML5 - Code. Project. Introduction. The Web evolves a lot since I posted the technique on Blend PDF with Silverlight about four years ago. In addition to the changes of less and no dependencies on browser plugins in RIA (Rich Internet Application) and the raise of RJA (Rich Java. Script Application), a particular trend is that mobile web traffics are exploding and tablet usage to access the web are increasing every day. If your web application is electronic forms centric, fill- able forms are developed in PDF, and also need to support mobile or particularly tablet, then it's time for a tech refresh: we need a practical solution to enable web apps not just rendering fill- able PDF forms directly within the browser without browser plugin, but also integrating user interactions and exchanging data seamlessly. Now with new capabilities in HTML5 and the browsers, plus a powerful open source Java. Script PDF viewer library from Mozilla Lab - PDF. JS, parsing, rendering, layout and interacting PDF electronic forms directly within browser becomes possible. I'll discuss in detail where to extend PDF. JS to support form elements parsing, not only text input boxes and check boxes, but also radio buttons, radio button groups, push buttons and dropdown list (comboboxes). I'll also discuss the techniques that are used in the prototype to lay out those interactive form elements together with PDF content. A working instance of the prototype can be found in here: http: //www. Blend. PDFWith. HTML5/. The main idea is that PDF electronic forms can be parsed, rendered and integrated with user interactions and user data by Java. Script in the client. The benefit of this approach is documented in Andreas Gal's post, even though he mainly talked about view PDF in read- only mode, while our goal is to add forms interactivities and data binding. PDF. JS uses Java. Script Typed Array and XHR level 2 for PDF binary stream processing, also utilizes Web Worker and HTML5 Canvas to render PDF in read- only mode. This means not all browsers are compatible with this approach, primarily for IE. Although IE9 has canvas support, but no Typed Array till IE1. For browsers that support these HTML5 capabilities, including the latest version of Google Chrome, Firefox and Safari, the prototype works great. Although one of its sample provides some basic support for Acro. Form, but it only has text input and check box, so the extension to PDF. JS is mainly around parsing radio button (groups), push buttons and dropdowns (comboboxes). Once we have the form elements data, we'll layout HTML forms on top of PDF content on canvas for user interactions and data integration. Size and position for each PDF page and form elements are controlled by PDF stream, canvas and absolute positioned form layer's z- index is controlled by CSS. The goal is to drop a fill- able PDF form file in web server, without server side process and client side plugins, our prototype web app can render the PDF content and interactive form without code changes. Although we addresses user data persistence while navigating back and forth, current data store is in DOM storage via HTML5 data- * attributes just for prove of concept purpose. You can check out the sample project in http: //www. Blend. PDFWith. HTML5/ to see how it works. This web app is built with backbonejs + underscorejs + requirejs + AMD + j. Query. I'm using backbone as MVC framework, and utilize a lot functional programming capabilities provided by underscorejs, which backbone is also dependent on, and obviusly j. Query helps a lot for DOM manipulating. Just as all AMD compatible project, the sample project's bootstrap is defined in main. Here below shows how require. JS is configured to load other non- AMD. JS libraries: requirejs. The App. Rounter will monitor the URL changes, then determines which view to. Convert HTML to PDF Online Simple yet powerful PDF generation API.URL hash code: define(. The render. Fed. PDFForm function is the main entry to all PDF Forms renderings, it calls through Main. Content. View (defined in view/Main. Content. View. js) to instantiate and render PDFView class. Here is the code for PDFView's render function. When this callback function is invokes, it'll first tell PDF. JPedal Java PDF to HTML5 / SVG conversion library and. The leading Java PDF Library and toolkit for Java developers who want to rasterize view and convert PDF Files. Pdf html5 free download. HTML5 PDF Editor by Aspose.Pdf for.NET is an open source web based PDF editor that allows users to create, edit and convert PDF files. Popular free or open source Alternatives to Instant Flipbook for. AnyFlip is a interactive digital publishing platform that lets you convert PDF into Flash & HTML5. I've googled (without any luck) for open source software that can convert doc. JS to render the read- only parts on canvas, then callback to render interactive form elements. This in- memory operation is mainly for improving rendering performance. We need to extend PDF.
JS to support all types of form elements in addition to text inputs and check boxes. Let's discuss how those elements are parsed before talk about user interactions for data exchange. PDF. JS implements get. Annotations in core. The first thing I change there is to remove . Starting line 4. 11 in core. Type == 'Btn') . Let's look at them one by one. Based on PDF spec, each radio button in a radio group is defined as a Widget Annotation, and their group name is the item. Name we talked earlier. The only additional information we need is the . Let's move on to Push. Button parsing. One is the button label, another is the button action. In my use case, button action is always to navigate to a URL when clicked, so the 2nd piece of data is the URL string that's set in the Acro. Form. More details are in the code. Push. Button(annotation, item) . Here is the code. Check. Box(annotation, item) . PDF stores these information in one dictionary entry as a string array, it makes parsing dropdown to be the simplest. Drop. Down(annotation, item) . Let's see how we use these information to layout HTML forms on top of canvas. Specifically, each PDF page is inserted to the DOM based on a underscore. JS HTML template: (defined in template/template. Let's take checkbox for instance to see how simple it is. The sample project only handles 4 different input types, it can be. HTML5 input types with the same code and template, like date, email, url, password, range, search, time, etc. Here below is the definition of input template. Once each item completes the same process, we get an interactive forms laid out on top of PDF content drawn in canvas. In real world use case, end user needs to be authenticated then connected to database to retrieve user specific dat. For demonstration purpose, I'll omit this step and just to prove the data binding is viable and reliable in this approach by using DOM storage as the data store. You can simply replace the DOM data store with Ajax calls for a fully integrated web application. Another aspect is when a form layout completes, the data store needs checked, if user data is available for current loaded form, then grab it and populate them back to the right fields. Since the template data is the same for all users (those PDF forms) and public, while user data is user specific and secure, this further separation makes content and logic to be able to developed in parallel, and using the web app to glue every piece together in a loosed couple way. Here below is the code in model/PDFParser. DOM storage. The form ID based storage key will allow us to retrieve the user data back when a new form loads. This PDF based interactive form rendering, layout and data binding are blending PDF with HTML5 in a easy, safe (browser sandbox) and generic way. You can google some PDF Acro. Form file and drop them into the data/fed folder to see how quickly to integrate new forms into the application without code change. Beyond the excitement about new capabilities in browsers and HTML5, there are some notes and issues I'd like to point out. Although HTML5 is evolving fast, we always need to check the W3. C and WHATWG HTML5 spec before start to reply on some new features in our projects. For example, binary data process is not available in current version of IE (IE9), while IE1. Same caution goes to other feature considerations, like canvas not available in IE8/IE7, Web Worker is not in IE either, etc. The good news is that those features are gradually adding in, and if not, there is always some alternative options, like Chrome Frame or HTML5 ployfills, etc. Besides it's not supporting interactive forms, it renders all text content in canvas, which make it un- selectable, since canvas is pixel based, it might be an issue when accessibility is required. I'd love to see PDF. JS start to provide configurable options to render in SVG or pure HTML text for select- ability, readability and accessibility. I only focus on Acro. Form, haven't looked into XFA forms yet. Even for Acro. Form, not all elements attributes are fully parsed and utilized, like input constrains (max length, digit only, etc.), validations and different appearance settings in PDF. More works to follow later on. With current development pace, HTML5 just gets better and more powerful every day.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2016
Categories |