diff --git a/examples/browserify/.gitignore b/examples/browserify/.gitignore new file mode 100644 index 000000000..c2658d7d1 --- /dev/null +++ b/examples/browserify/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/examples/browserify/README.md b/examples/browserify/README.md new file mode 100644 index 000000000..4a6d7c2ba --- /dev/null +++ b/examples/browserify/README.md @@ -0,0 +1,25 @@ +## Overview + +Example to demonstrate PDF.js library usage with browserify. + +## Getting started + +Build project and install the example dependencies: + + $ gulp dist + $ cd examples/browserify + $ npm install + +To build browserify bundles, run `gulp build`. If you are running +a web server, you can observe the build results at +http://localhost:8888/examples/browserify/index.html + +See main.js, worker.js and gulpfile.js files. Please notice that PDF.js +packaging requires packaging of the main application and PDF.js worker code, +and the workerSrc path shall be set to the latter file. + +Alternatives to the gulp commands (without compression) are: + + $ mkdir -p ../../build/browserify + $ node_modules/.bin/browserify main.js -o ../../build/browserify/bundle.js + $ node_modules/.bin/browserify worker.js -o ../../build/browserify/pdf.worker.bundle.js diff --git a/examples/browserify/gulpfile.js b/examples/browserify/gulpfile.js new file mode 100644 index 000000000..06a5f0181 --- /dev/null +++ b/examples/browserify/gulpfile.js @@ -0,0 +1,31 @@ +var gulp = require('gulp'); +var browserify = require('browserify'); +var streamify = require('gulp-streamify'); +var rename = require('gulp-rename'); +var uglify = require('gulp-uglify'); +var source = require('vinyl-source-stream'); + +var OUTPUT_PATH = '../../build/browserify'; +var TMP_FILE_PREFIX = '../../build/browserify_'; + +gulp.task('build-bundle', function() { + return browserify('main.js', {output: TMP_FILE_PREFIX + 'main.tmp'}) + .bundle() + .pipe(source(TMP_FILE_PREFIX + 'main.tmp')) + .pipe(streamify(uglify())) + .pipe(rename('bundle.js')) + .pipe(gulp.dest(OUTPUT_PATH)); +}); + +gulp.task('build-worker', function() { + return browserify('worker.js', {output: TMP_FILE_PREFIX + 'worker.tmp'}) + .bundle() + .pipe(source(TMP_FILE_PREFIX + 'worker.tmp')) + .pipe(streamify(uglify({compress:{ + sequences: false // Chrome has issue with the generated code if true + }}))) + .pipe(rename('pdf.worker.bundle.js')) + .pipe(gulp.dest(OUTPUT_PATH)); +}); + +gulp.task('build', ['build-bundle', 'build-worker']); diff --git a/examples/browserify/index.html b/examples/browserify/index.html new file mode 100644 index 000000000..b831fe780 --- /dev/null +++ b/examples/browserify/index.html @@ -0,0 +1,11 @@ + + + + + browserify example + + + + + + diff --git a/examples/browserify/main.js b/examples/browserify/main.js new file mode 100644 index 000000000..59c92ffe4 --- /dev/null +++ b/examples/browserify/main.js @@ -0,0 +1,35 @@ +// Any copyright is dedicated to the Public Domain. +// http://creativecommons.org/licenses/publicdomain/ + +// Hello world example for browserify. + +require('pdfjs-dist'); + +var pdfPath = '../helloworld/helloworld.pdf'; + +// Setting worker path to worker bundle +PDFJS.workerSrc = '../../build/browserify/pdf.worker.bundle.js'; + +// It is also possible to disable workers via `PDFJS.disableWorker = true`, +// however that might degrade the UI performance in web browsers. + +// Loading a document. +var loadingTask = PDFJS.getDocument(pdfPath); +loadingTask.promise.then(function (pdfDocument) { + // Request a first page + return pdfDocument.getPage(1).then(function (pdfPage) { + // Display page on the existing canvas with 100% scale. + var viewport = pdfPage.getViewport(1.0); + var canvas = document.getElementById('theCanvas'); + canvas.width = viewport.width; + canvas.height = viewport.height; + var ctx = canvas.getContext('2d'); + var renderTask = pdfPage.render({ + canvasContext: ctx, + viewport: viewport + }); + return renderTask.promise; + }); +}).catch(function (reason) { + console.error('Error: ' + reason); +}); diff --git a/examples/browserify/package.json b/examples/browserify/package.json new file mode 100644 index 000000000..aaca35ed0 --- /dev/null +++ b/examples/browserify/package.json @@ -0,0 +1,16 @@ +{ + "name": "browserify-pdf.js-example", + "version": "0.1.0", + "devDependencies": { + "browserify": "^13.0.0", + "gulp": "^3.9.1", + "gulp-rename": "^1.2.2", + "gulp-streamify": "^1.0.2", + "gulp-uglify": "^1.5.3", + "pdfjs-dist": "../../build/dist", + "vinyl-source-stream": "^1.1.0" + }, + "scripts": { + "build": "gulp build" + } +} diff --git a/examples/browserify/worker.js b/examples/browserify/worker.js new file mode 100644 index 000000000..9745f5a54 --- /dev/null +++ b/examples/browserify/worker.js @@ -0,0 +1,7 @@ +// Any copyright is dedicated to the Public Domain. +// http://creativecommons.org/licenses/publicdomain/ + +// Hello world example for browserify: worker bundle. + +(typeof window !== 'undefined' ? window : {}).pdfjsDistBuildPdfWorker = + require('pdfjs-dist/build/pdf.worker'); diff --git a/make.js b/make.js index b3251d71f..95469251b 100644 --- a/make.js +++ b/make.js @@ -332,6 +332,11 @@ target.dist = function() { homepage: DIST_HOMEPAGE, bugs: DIST_BUGS_URL, license: DIST_LICENSE, + browser: { // used by browserify and ignores following files during bundle + 'entry?name=[hash]-worker.js!./pdf.worker.js': false, + './build/pdf.worker.js': false, + 'node-ensure': false + }, repository: { type: 'git', url: DIST_REPO_URL