Hello World example

Perhaps the simplest use of pdf.js. See README.md in the new folder
2011-09-14 17:34:29 -07:00 · 2011-09-14 17:34:29 -07:00 · 6e29034912
commit 6e29034912
parent f57972d925
4 changed files with 148 additions and 0 deletions
--- a/helloworld/README.md
+++ b/helloworld/README.md
@ -0,0 +1,13 @@
+## "Hello World" overview
+
+This example is a minimalistic application of the pdf.js project. The file `helloworld.pdf` is from the GNUpdf project (see [Introduction to PDF at GNUpdf](http://gnupdf.org/Introduction_to_PDF), and contains a simple and human-readable PDF.
+
+
+## Getting started
+
+Point your browser to `index.html`. Voila. Take a peek at `hello.js` to see how to make basic calls to `pdf.js`.
+
+
+## Additional resources
+
+ [GNUpdf - Introduction to PDF](http://gnupdf.org/Introduction_to_PDF)
--- a/helloworld/hello.js
+++ b/helloworld/hello.js
@ -0,0 +1,49 @@
+//
+// See README for overview
+//
+
+
+//
+// Ajax GET request for binary files
+// (like jQuery's $.get(), but supports the binary type ArrayBuffer)
+//
+var binaryGet = function(url, callback){
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.mozResponseType = xhr.responseType = 'arraybuffer';
+  xhr.expected = (document.URL.indexOf('file:') === 0) ? 0 : 200;
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4 && xhr.status === xhr.expected) {
+      var data = (xhr.mozResponseArrayBuffer || xhr.mozResponse ||
+                  xhr.responseArrayBuffer || xhr.response);
+
+      callback(data);
+    }
+  };
+  xhr.send(null);  
+}
+
+//
+// This is where the fun happens
+//
+binaryGet('helloworld.pdf', function(data){
+  //
+  // Instantiate PDFDoc with PDF data
+  //
+  var pdf = new PDFDoc(new Stream(data));
+  var page = pdf.getPage(1);
+  var scale = 1.5;
+
+  //
+  // Prepare canvas using PDF page dimensions
+  //
+  var canvas = document.getElementById('the-canvas');
+  var context = canvas.getContext('2d');
+  canvas.height = page.height * scale;
+  canvas.width = page.width * scale;  
+
+  //
+  // Render PDF page into canvas context
+  //
+  page.startRendering(context);
+});
--- a/helloworld/helloworld.pdf
+++ b/helloworld/helloworld.pdf
@ -0,0 +1,68 @@
+%PDF-1.7
+
+1 0 obj  % entry point
+<<
+  /Type /Catalog
+  /Pages 2 0 R
+>>
+endobj
+
+2 0 obj
+<<
+  /Type /Pages
+  /MediaBox [ 0 0 200 200 ]
+  /Count 1
+  /Kids [ 3 0 R ]
+>>
+endobj
+
+3 0 obj
+<<
+  /Type /Page
+  /Parent 2 0 R
+  /Resources <<
+    /Font <<
+      /F1 4 0 R 
+    >>
+  >>
+  /Contents 5 0 R
+>>
+endobj
+
+4 0 obj
+<<
+  /Type /Font
+  /Subtype /Type1
+  /BaseFont /Times-Roman
+>>
+endobj
+
+5 0 obj  % page content
+<<
+  /Length 44
+>>
+stream
+BT
+70 50 TD
+/F1 12 Tf
+(Hello, world!) Tj
+ET
+endstream
+endobj
+
+xref
+0 6
+0000000000 65535 f 
+0000000010 00000 n 
+0000000079 00000 n 
+0000000173 00000 n 
+0000000301 00000 n 
+0000000380 00000 n 
+trailer
+<<
+  /Size 6
+  /Root 1 0 R
+>>
+startxref
+492
+%%EOF
--- a/helloworld/index.html
+++ b/helloworld/index.html
@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+
+<head>
+  <!-- PDF.js-specific -->
+  <script type="text/javascript" src="../pdf.js"></script>
+  <script type="text/javascript" src="../metrics.js"></script>
+  <script type="text/javascript" src="../fonts.js"></script>
+  <script type="text/javascript" src="../glyphlist.js"></script>
+
+  <script type="text/javascript" src="hello.js"></script>
+</head>  
+
+<body>
+  <canvas id="the-canvas" style="border:1px solid black;"/>
+</body>
+
+</html>