Site Network:

 

Web Lite Solutions Corp.

Web PDF Renderer

Embed PDFs in Your Web Pages
Try Demo

Synopsis

The Web PDF Renderer component is a javascript library that allows you to embed PDFs as part of your web pages. It uses a "silent" Java applet to process the PDF in a background thread and renders the PDF pages to <img> tags in the document.

Features

  • Renders PDF to <img> tag inside the DOM.
  • Render pages to any width (i.e. zoom in, zoom out supported).
  • Allows you to retrieve meta information such as the number of pages in the PDF.
  • Simple pure javascript API
  • Java applet is "slient" (i.e. The PDF is not rendered inside the applet, the applet just sits silently in the background processing requests to render pages back to the DOM.
  • Java applet works in sandbox. (Does not require security dialog - so it stays completely silent).
  • PDFs are cached so that multiple calls for same PDF don’t need to reload the PDF (i.e. it is fast!).

License

GPLv2

Requirements

  • jQuery 1.6+
  • Java Plugin (1.6 or higher)
  • Modern Browser (e.g. IE 9+, Safari 4+, Chrome, Firefox 3+). Browser needs to support inline base64 encoded image data for the src of <img> tags.
  • Only loads PDF from same host as where the java applet is loaded from (applet is not signed) so cannot connect to other hosts).

Download

WebPDFRenderer-0.1.zip (2.1 MB)

Browse Subversion Repository

Example Usage

Retrieving Number of Pages in URL

		// Obtain reference to the constructors for easy access
		var PDFDocument = xataface.modules.pdfreports.PDFDocument;
		// Create a PDF document for a PDF
		var doc = new PDFDocument({url: 'test.pdf'});
			
		// Check the number of pages in the document
		doc.load(function(){
			  // Performed as a callback so this runs after document
			  // is loaded.
			alert('The document as '+doc.numPages+' pages.');
		});

Rendering a Page / Append as Image to DOM

		// Short reference to PDFPage constructor
		var PDFPage = xataface.modules.pdfreports.PDFPage;
		
		// Create a new page  (first page of document)
		var page = new PDFPage({
			width: 800,
			url: 'test.pdf',
			page: 0		
		});
		
		// Append page’s  tag to the document body
		$(‘body’).append(page.el); 
		
		// Render the page  (done asynchronously)
		page.render();

Binding to Existing <img> Tag

		<img id="my-pdf-page"/>
		<script>
		var PDFPage = xataface.modules.pdfreports.PDFPage;
		var page = new PDFPage({
			width: 800,
			url: 'test.pdf',
			el: document.getElementById(‘my-pdf-page’)
		});
		page.render();
		</script>

Processing afterUpdate Event

Each time after the page is rendered, the afterUpdate event is called so you can bind to this event and perform processing after the page has been successfully rendered to the element.

		var page = new PDFPage({
			width: 800,
			url: 'test.pdf',
			el: document.getElementById('test-pdf')
					
		});
				
		$(page).bind('afterUpdate', function(){
			alert(‘Finished loading’);	
		});
				
		page.render();

Installation Instructions

  1. Upload the pdfrenderer.js file and the pdfrenderer-codebase to your web server.
  2. Include jQuery and pdfrenderer script tags in of document: 
    <script src="/path/to/jquery.js"></script>
<script src="/path/to/pdfrenderer.js"></script>
  3. Specify the URL/Path to the pdfrenderer-codebase directory: 
    <script>
	xataface.modules.pdfreports.PDFPage.codebase = 
						  '/path/to/pdfrenderer-codebase';
</script>

Credits

This library makes use of the following open source projects:

blog comments powered by Disqus