Yury Delendik
9 years ago
8 changed files with 131 additions and 0 deletions
@ -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 |
||||||
@ -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']); |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<title>browserify example</title> |
||||||
|
<script src="../../build/browserify/bundle.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<canvas id="theCanvas"></canvas> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -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); |
||||||
|
}); |
||||||
@ -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" |
||||||
|
} |
||||||
|
} |
||||||
@ -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'); |
||||||
Loading…
Reference in new issue