Yury Delendik
9 years ago
8 changed files with 131 additions and 0 deletions
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
node_modules/ |
||||
@ -0,0 +1,25 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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