From 6e290349120160b39cfaf565fc061d00958cdd13 Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Wed, 14 Sep 2011 17:34:29 -0700 Subject: [PATCH 1/5] Hello World example Perhaps the simplest use of pdf.js. See README.md in the new folder --- helloworld/README.md | 13 ++++++++ helloworld/hello.js | 49 ++++++++++++++++++++++++++++ helloworld/helloworld.pdf | 68 +++++++++++++++++++++++++++++++++++++++ helloworld/index.html | 18 +++++++++++ 4 files changed, 148 insertions(+) create mode 100644 helloworld/README.md create mode 100644 helloworld/hello.js create mode 100644 helloworld/helloworld.pdf create mode 100644 helloworld/index.html diff --git a/helloworld/README.md b/helloworld/README.md new file mode 100644 index 000000000..70d5e760b --- /dev/null +++ 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) diff --git a/helloworld/hello.js b/helloworld/hello.js new file mode 100644 index 000000000..0bf46311a --- /dev/null +++ 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); +}); diff --git a/helloworld/helloworld.pdf b/helloworld/helloworld.pdf new file mode 100644 index 000000000..d98b4e1db --- /dev/null +++ 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 \ No newline at end of file diff --git a/helloworld/index.html b/helloworld/index.html new file mode 100644 index 000000000..68a465f52 --- /dev/null +++ b/helloworld/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + From 3476364886a922180006b1b2ac5abf7d4afa3d00 Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Thu, 15 Sep 2011 09:28:58 -0700 Subject: [PATCH 2/5] Moved helloworld/ to examples/helloworld/ --- {helloworld => examples/helloworld}/README.md | 0 {helloworld => examples/helloworld}/hello.js | 0 .../helloworld}/helloworld.pdf | 0 examples/helloworld/index.html | 18 ++++++++++++++++++ helloworld/index.html | 18 ------------------ 5 files changed, 18 insertions(+), 18 deletions(-) rename {helloworld => examples/helloworld}/README.md (100%) rename {helloworld => examples/helloworld}/hello.js (100%) rename {helloworld => examples/helloworld}/helloworld.pdf (100%) create mode 100644 examples/helloworld/index.html delete mode 100644 helloworld/index.html diff --git a/helloworld/README.md b/examples/helloworld/README.md similarity index 100% rename from helloworld/README.md rename to examples/helloworld/README.md diff --git a/helloworld/hello.js b/examples/helloworld/hello.js similarity index 100% rename from helloworld/hello.js rename to examples/helloworld/hello.js diff --git a/helloworld/helloworld.pdf b/examples/helloworld/helloworld.pdf similarity index 100% rename from helloworld/helloworld.pdf rename to examples/helloworld/helloworld.pdf diff --git a/examples/helloworld/index.html b/examples/helloworld/index.html new file mode 100644 index 000000000..c353b6a89 --- /dev/null +++ b/examples/helloworld/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/helloworld/index.html b/helloworld/index.html deleted file mode 100644 index 68a465f52..000000000 --- a/helloworld/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - From bc91b98fc8f4d17a5d7c2224d2e93b91fee50385 Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Thu, 15 Sep 2011 11:14:55 -0700 Subject: [PATCH 3/5] Addressing comments by Vivien --- examples/helloworld/README.md | 7 +++++-- examples/helloworld/hello.js | 6 +++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/examples/helloworld/README.md b/examples/helloworld/README.md index 70d5e760b..8395733f3 100644 --- a/examples/helloworld/README.md +++ b/examples/helloworld/README.md @@ -1,11 +1,14 @@ ## "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. +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`. +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 diff --git a/examples/helloworld/hello.js b/examples/helloworld/hello.js index 0bf46311a..21799c33a 100644 --- a/examples/helloworld/hello.js +++ b/examples/helloworld/hello.js @@ -4,10 +4,10 @@ // -// Ajax GET request for binary files +// Ajax GET request, for binary files // (like jQuery's $.get(), but supports the binary type ArrayBuffer) // -var binaryGet = function(url, callback){ +var ajaxGet = function(url, callback){ var xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.mozResponseType = xhr.responseType = 'arraybuffer'; @@ -26,7 +26,7 @@ var binaryGet = function(url, callback){ // // This is where the fun happens // -binaryGet('helloworld.pdf', function(data){ +ajaxGet('helloworld.pdf', function(data){ // // Instantiate PDFDoc with PDF data // From f3745f7c139d4d97deccbd9c5262a1b686d4c947 Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Thu, 15 Sep 2011 16:28:38 -0700 Subject: [PATCH 4/5] New README, .gitignores; Makefile Makefile: commented out unnecessary closure download and shell testing (at least until someone decides to work on this). --- Makefile | 72 ++++++++--------- README.md | 85 ++++++++++++++++++--- test/pdfs/.gitignore | 12 ++- test/resources/browser_manifests/.gitignore | 2 + 4 files changed, 123 insertions(+), 48 deletions(-) create mode 100644 test/resources/browser_manifests/.gitignore diff --git a/Makefile b/Makefile index 0ca269642..fb4ffe9cb 100644 --- a/Makefile +++ b/Makefile @@ -55,30 +55,30 @@ browser-test: --browserManifestFile=$(PDF_BROWSERS) \ --manifestFile=$(PDF_TESTS) -# make shell-test -# -# This target runs all of the tests that can be run in a JS shell. -# The shell used is taken from the JS_SHELL environment variable. If -# that variable is not defined, the script will attempt to use the copy -# of Rhino that comes with the Closure compiler used for producing the -# website. -SHELL_TARGET = $(NULL) -ifeq ($(JS_SHELL),) -JS_SHELL := "java -cp $(BUILD_DIR)/compiler.jar" -JS_SHELL += "com.google.javascript.jscomp.mozilla.rhino.tools.shell.Main" -SHELL_TARGET = compiler -endif - -shell-test: shell-msg $(SHELL_TARGET) font-test -shell-msg: -ifeq ($(SHELL_TARGET), compiler) - @echo "No JS_SHELL env variable present." - @echo "The default is to find a copy of Rhino and try that." -endif - @echo "JS shell command is: $(JS_SHELL)" - -font-test: - @echo "font test stub." +# # make shell-test +# # +# # This target runs all of the tests that can be run in a JS shell. +# # The shell used is taken from the JS_SHELL environment variable. If +# # that variable is not defined, the script will attempt to use the copy +# # of Rhino that comes with the Closure compiler used for producing the +# # website. +# SHELL_TARGET = $(NULL) +# ifeq ($(JS_SHELL),) +# JS_SHELL := "java -cp $(BUILD_DIR)/compiler.jar" +# JS_SHELL += "com.google.javascript.jscomp.mozilla.rhino.tools.shell.Main" +# SHELL_TARGET = compiler +# endif +# +# shell-test: shell-msg $(SHELL_TARGET) font-test +# shell-msg: +# ifeq ($(SHELL_TARGET), compiler) +# @echo "No JS_SHELL env variable present." +# @echo "The default is to find a copy of Rhino and try that." +# endif +# @echo "JS shell command is: $(JS_SHELL)" +# +# font-test: +# @echo "font test stub." # make lint # @@ -133,18 +133,18 @@ $(GH_PAGES)/web/%: web/% $(GH_PAGES)/web/images/%: web/images/% @cp $< $@ -# make compiler -# -# This target downloads the Closure compiler, and places it in the -# build directory. This target is also useful when the user doesn't -# have a JS shell available--we can have them use the Rhino shell that -# comes with Closure. -COMPILER_URL = http://closure-compiler.googlecode.com/files/compiler-latest.zip - -compiler: $(BUILD_DIR)/compiler.zip -$(BUILD_DIR)/compiler.zip: | $(BUILD_DIR) - curl $(COMPILER_URL) > $(BUILD_DIR)/compiler.zip; - cd $(BUILD_DIR); unzip compiler.zip compiler.jar; +# # make compiler +# # +# # This target downloads the Closure compiler, and places it in the +# # build directory. This target is also useful when the user doesn't +# # have a JS shell available--we can have them use the Rhino shell that +# # comes with Closure. +# COMPILER_URL = http://closure-compiler.googlecode.com/files/compiler-latest.zip +# +# compiler: $(BUILD_DIR)/compiler.zip +# $(BUILD_DIR)/compiler.zip: | $(BUILD_DIR) +# curl $(COMPILER_URL) > $(BUILD_DIR)/compiler.zip; +# cd $(BUILD_DIR); unzip compiler.zip compiler.jar; # make firefox-extension # diff --git a/README.md b/README.md index 0d439b139..fe6d296a9 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,80 @@ # pdf.js -pdf.js is a technology demonstrator prototype to explore whether the HTML5 -platform is complete enough to faithfully and efficiently render the ISO -32000-1:2008 Portable Document Format (PDF) without native code assistance. -pdf.js is not currently part of the Mozilla project, and there is no plan -yet to integrate it into Firefox. We will explore that possibility once -pdf.js is production ready. Until then we aim to publish a Firefox -PDF reader extension powered by pdf.js. + +## Overview + +pdf.js is an HTML5 technology experiment that explores building a faithful +and efficient Portable Document Format (PDF) renderer without native code +assistance. + +pdf.js is community-driven and supported by Mozilla Labs. Our goal is to +create a general-purpose, web standards-based platform for parsing and +rendering PDFs, and eventually release a PDF reader extension powered by +pdf.js. Integration with Firefox is a possibility if the experiment proves +successful. + + + +## Getting started + +For an online demo, visit: + + http://andreasgal.github.com/pdf.js/web/viewer.html + +This demo provides an interactive interface for displaying and browsing PDFs +using the pdf.js API. + +For a "hello world" example, take a look at: + + examples/helloworld/ + +This example illustrates the bare minimum ingredients for integrating pdf.js +in a custom project. + + + +## Running the Tests + +pdf.js comes with browser-level regression tests that allow one to probe +whether it's able to successfully parse PDFs, as well as compare its output +against reference images, pixel-by-pixel. + +To run the tests, first configure the browser manifest file at: + + test/resources/browser_manifests/browser_manifest.json + +Sample manifests for different platforms are provided in that directory. + +To run all the bundled tests, type: + + $ make test + +and cross your fingers. Different types of tests are available, see the test +manifest file at: + + test/test_manifest.json + +The test type `eq` tests whether the output images are identical to reference +images. The test type `load` simply tests whether the file loads without +raising any errors. + + +## Contributing + +pdf.js is a community-driver project, so contributors are always welcome. +Simply fork our repo and contribute away. A great place to start is our +open issues. + +For better consistency and long-term stability, please do look around the +code and try to follow our conventions. + + +## Additional resources Our demo site is here: - http://andreasgal.github.com/pdf.js/ + http://andreasgal.github.com/pdf.js/web/viewer.html You can read more about pdf.js here: @@ -19,14 +82,14 @@ You can read more about pdf.js here: http://blog.mozilla.com/cjones/2011/06/15/overview-of-pdf-js-guts/ -follow us on twitter: @pdfjs +Follow us on twitter: @pdfjs http://twitter.com/#!/pdfjs -join our mailing list: +Join our mailing list: dev-pdf-js@lists.mozilla.org -and talk to us on IRC: +Talk to us on IRC: #pdfjs on irc.mozilla.org diff --git a/test/pdfs/.gitignore b/test/pdfs/.gitignore index 95de9fb8e..77c89ece6 100644 --- a/test/pdfs/.gitignore +++ b/test/pdfs/.gitignore @@ -1,3 +1,13 @@ -pdf.pdf +DiwanProfile.pdf +artofwar.pdf +cable.pdf +ecma262.pdf +hmm.pdf +i9.pdf intelisa.pdf openweb_tm-PRINT.pdf +pdf.pdf +pdkids.pdf +shavian.pdf +jai.pdf + diff --git a/test/resources/browser_manifests/.gitignore b/test/resources/browser_manifests/.gitignore new file mode 100644 index 000000000..ca57ac505 --- /dev/null +++ b/test/resources/browser_manifests/.gitignore @@ -0,0 +1,2 @@ +browser_manifest.json + From e2b1cf1baf5c17a957b4591787036889b48ec824 Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Thu, 15 Sep 2011 16:39:18 -0700 Subject: [PATCH 5/5] Minor --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index fe6d296a9..252934cb7 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,8 @@ successful. ## Getting started +**Online demo** + For an online demo, visit: http://andreasgal.github.com/pdf.js/web/viewer.html @@ -25,6 +27,8 @@ For an online demo, visit: This demo provides an interactive interface for displaying and browsing PDFs using the pdf.js API. +**Hello world** + For a "hello world" example, take a look at: examples/helloworld/