Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #7150 from yurydelendik/browserify

Browse Source 
Initial browserify example.
This commit is contained in:
Yury Delendik 2016-04-06 09:45:55 -05:00
commit 6c9f418aae
8 changed files with 131 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/browserify/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules/

25
examples/browserify/README.md Normal file
View File

@ -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

31
examples/browserify/gulpfile.js Normal file
View File

@ -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']);

11
examples/browserify/index.html Normal file
View File

@ -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>

35
examples/browserify/main.js Normal file
View File

@ -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);
});

16
examples/browserify/package.json Normal file
View File

@ -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"
}
}

7
examples/browserify/worker.js Normal file
View File

@ -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');

5
make.js
View File

@ -332,6 +332,11 @@ target.dist = function() {
homepage: DIST_HOMEPAGE, homepage: DIST_HOMEPAGE,
bugs: DIST_BUGS_URL, bugs: DIST_BUGS_URL,
license: DIST_LICENSE, 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: { repository: {
type: 'git', type: 'git',
url: DIST_REPO_URL url: DIST_REPO_URL