Modified Examples to work without systemjs
This commit is contained in:
RonLek
parent
7e13977669
commit
8afc4ce258
@ -102,11 +102,7 @@ You can play with the PDF.js API directly from your browser using the live demos
|
|||||||
|
|
||||||
+ [Interactive examples](http://mozilla.github.io/pdf.js/examples/index.html#interactive-examples)
|
+ [Interactive examples](http://mozilla.github.io/pdf.js/examples/index.html#interactive-examples)
|
||||||
|
|
||||||
The repository contains a hello world example that you can run locally:
|
More examples can be found in the [examples folder](https://github.com/mozilla/pdf.js/tree/master/examples/). Some of them are using the pdfjs-dist package, which can be built and installed in this repo directory via `gulp dist-install` command.
|
||||||
|
|
||||||
+ [examples/helloworld/](https://github.com/mozilla/pdf.js/blob/master/examples/helloworld/)
|
|
||||||
|
|
||||||
More examples can be found in the examples folder. Some of them are using the pdfjs-dist package, which can be built and installed in this repo directory via `gulp dist-install` command.
|
|
||||||
|
|
||||||
For an introduction to the PDF.js code, check out the presentation by our
|
For an introduction to the PDF.js code, check out the presentation by our
|
||||||
contributor Julian Viereck:
|
contributor Julian Viereck:
|
||||||
|
|||||||
@ -5,7 +5,7 @@ template: layout.jade
|
|||||||
|
|
||||||
## Hello World Walkthrough
|
## Hello World Walkthrough
|
||||||
|
|
||||||
[Full source](https://github.com/mozilla/pdf.js/tree/master/examples/helloworld)
|
[Full source](https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld.html)
|
||||||
|
|
||||||
PDF.js heavily relies on the use of [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise). If promises are new to you, it's recommended you become familiar with them before continuing on.
|
PDF.js heavily relies on the use of [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise). If promises are new to you, it's recommended you become familiar with them before continuing on.
|
||||||
|
|
||||||
|
|||||||
@ -1,16 +0,0 @@
|
|||||||
## Overview
|
|
||||||
|
|
||||||
The "hello world" example is a minimalistic application of the PDF.js project.
|
|
||||||
The file `helloworld.pdf` originates from the GNUpdf project and contains a
|
|
||||||
simple and human-readable PDF.
|
|
||||||
|
|
||||||
## Getting started
|
|
||||||
|
|
||||||
Instead of simply opening `index.html` in a browser, you must serve the page
|
|
||||||
using a web server. This can be done on your local machine without an internet
|
|
||||||
connection. In the root directory of PDF.js, run `gulp server` in a
|
|
||||||
terminal. The example can then be viewed using the following URL:
|
|
||||||
|
|
||||||
`http://localhost:8888/examples/helloworld/index.html`
|
|
||||||
|
|
||||||
Take a look at `hello.js` to see how to make basic calls to PDF.js.
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
// In production, the bundled pdf.js shall be used instead of SystemJS.
|
|
||||||
Promise.all([System.import('pdfjs/display/api'),
|
|
||||||
System.import('pdfjs/display/worker_options'),
|
|
||||||
System.import('pdfjs/display/network'),
|
|
||||||
System.resolve('pdfjs/worker_loader')])
|
|
||||||
.then(function (modules) {
|
|
||||||
var api = modules[0];
|
|
||||||
var GlobalWorkerOptions = modules[1].GlobalWorkerOptions;
|
|
||||||
var network = modules[2];
|
|
||||||
api.setPDFNetworkStreamFactory((params) => {
|
|
||||||
return new network.PDFNetworkStream(params);
|
|
||||||
});
|
|
||||||
|
|
||||||
// In production, change this to point to the built `pdf.worker.js` file.
|
|
||||||
GlobalWorkerOptions.workerSrc = modules[3];
|
|
||||||
|
|
||||||
// Fetch the PDF document from the URL using promises.
|
|
||||||
api.getDocument('helloworld.pdf').then(function (pdf) {
|
|
||||||
// Fetch the page.
|
|
||||||
pdf.getPage(1).then(function (page) {
|
|
||||||
var scale = 1.5;
|
|
||||||
var viewport = page.getViewport(scale);
|
|
||||||
|
|
||||||
// Prepare canvas using PDF page dimensions.
|
|
||||||
var canvas = document.getElementById('the-canvas');
|
|
||||||
var context = canvas.getContext('2d');
|
|
||||||
canvas.height = viewport.height;
|
|
||||||
canvas.width = viewport.width;
|
|
||||||
|
|
||||||
// Render PDF page into canvas context.
|
|
||||||
var renderContext = {
|
|
||||||
canvasContext: context,
|
|
||||||
viewport: viewport
|
|
||||||
};
|
|
||||||
page.render(renderContext);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
%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
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<script src="../../node_modules/systemjs/dist/system.js"></script>
|
|
||||||
<script src="../../systemjs.config.js"></script>
|
|
||||||
<script src="hello.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<canvas id="the-canvas" style="border:1px solid black;"/>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,29 +1,51 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<!--
|
||||||
|
Copyright 2014 Mozilla Foundation
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
-->
|
||||||
|
<html dir="ltr" mozdisallowselectionprint>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<title>PDF.js SVG viewer example</title>
|
<meta name="google" content="notranslate">
|
||||||
|
<title>PDF.js SVG viewer using built components</title>
|
||||||
<script src="../../node_modules/systemjs/dist/system.js"></script>
|
|
||||||
<script src="../../systemjs.config.js"></script>
|
|
||||||
<script src="viewer.js"></script>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
background-color: #404040;
|
background-color: #808080;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
#viewerContainer {
|
||||||
.pageContainer {
|
overflow: auto;
|
||||||
border: 1px solid #000;
|
position: absolute;
|
||||||
margin: 5px auto;
|
width: 100%;
|
||||||
background-color: #FFF;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">
|
||||||
|
|
||||||
|
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
|
||||||
|
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body tabindex="1">
|
||||||
</body>
|
<div id="viewerContainer">
|
||||||
|
<div id="viewer" class="pdfViewer"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="viewer.js"></script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,68 +1,75 @@
|
|||||||
|
/* Copyright 2014 Mozilla Foundation
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var DEFAULT_SCALE = 1.5;
|
if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
|
||||||
|
alert('Please build the pdfjs-dist library using\n' +
|
||||||
// Parse query string to extract some parameters (it can fail for some input)
|
' `gulp dist-install`');
|
||||||
var query = document.location.href.replace(/^[^?]*(\?([^#]*))?(#.*)?/, '$2');
|
|
||||||
var queryParams = query ? JSON.parse('{' + query.split('&').map(function (a) {
|
|
||||||
return a.split('=').map(decodeURIComponent).map(JSON.stringify).join(': ');
|
|
||||||
}).join(',') + '}') : {};
|
|
||||||
|
|
||||||
var url = queryParams.file || '../../web/compressed.tracemonkey-pldi-09.pdf';
|
|
||||||
|
|
||||||
function renderDocument(pdf, svgLib) {
|
|
||||||
var promise = Promise.resolve();
|
|
||||||
for (var i = 1; i <= pdf.numPages; i++) {
|
|
||||||
// Using promise to fetch and render the next page
|
|
||||||
promise = promise.then(function (pageNum) {
|
|
||||||
return pdf.getPage(pageNum).then(function (page) {
|
|
||||||
var viewport = page.getViewport(DEFAULT_SCALE);
|
|
||||||
|
|
||||||
var container = document.createElement('div');
|
|
||||||
container.id = 'pageContainer' + pageNum;
|
|
||||||
container.className = 'pageContainer';
|
|
||||||
container.style.width = viewport.width + 'px';
|
|
||||||
container.style.height = viewport.height + 'px';
|
|
||||||
document.body.appendChild(container);
|
|
||||||
|
|
||||||
return page.getOperatorList().then(function (opList) {
|
|
||||||
var svgGfx = new svgLib.SVGGraphics(page.commonObjs, page.objs);
|
|
||||||
return svgGfx.getSVG(opList, viewport).then(function (svg) {
|
|
||||||
container.appendChild(svg);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}.bind(null, i));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Promise.all([System.import('pdfjs/display/api'),
|
// The workerSrc property shall be specified.
|
||||||
System.import('pdfjs/display/svg'),
|
//
|
||||||
System.import('pdfjs/display/worker_options'),
|
pdfjsLib.GlobalWorkerOptions.workerSrc =
|
||||||
System.import('pdfjs/display/network'),
|
'../../node_modules/pdfjs-dist/build/pdf.worker.js';
|
||||||
System.resolve('pdfjs/worker_loader')])
|
|
||||||
.then(function (modules) {
|
|
||||||
var api = modules[0];
|
|
||||||
var svg = modules[1];
|
|
||||||
var GlobalWorkerOptions = modules[2].GlobalWorkerOptions;
|
|
||||||
var network = modules[3];
|
|
||||||
api.setPDFNetworkStreamFactory((params) => {
|
|
||||||
return new network.PDFNetworkStream(params);
|
|
||||||
});
|
|
||||||
|
|
||||||
// In production, change this to point to the built `pdf.worker.js` file.
|
// Some PDFs need external cmaps.
|
||||||
GlobalWorkerOptions.workerSrc = modules[4];
|
//
|
||||||
|
var CMAP_URL = '../../node_modules/pdfjs-dist/cmaps/';
|
||||||
|
var CMAP_PACKED = true;
|
||||||
|
|
||||||
// In production, change this to point to where the cMaps are placed.
|
var DEFAULT_URL = '../../web/compressed.tracemonkey-pldi-09.pdf';
|
||||||
var CMAP_URL = '../../external/bcmaps/';
|
var SEARCH_FOR = ''; // try 'Mozilla';
|
||||||
var CMAP_PACKED = true;
|
|
||||||
|
|
||||||
// Fetch the PDF document from the URL using promises.
|
var container = document.getElementById('viewerContainer');
|
||||||
api.getDocument({
|
|
||||||
url: url,
|
// (Optionally) enable hyperlinks within PDF files.
|
||||||
cMapUrl: CMAP_URL,
|
var pdfLinkService = new pdfjsViewer.PDFLinkService();
|
||||||
cMapPacked: CMAP_PACKED,
|
|
||||||
}).then(function(doc) {
|
var pdfViewer = new pdfjsViewer.PDFViewer({
|
||||||
renderDocument(doc, svg);
|
container: container,
|
||||||
});
|
linkService: pdfLinkService,
|
||||||
|
renderer: 'svg',
|
||||||
|
textLayerMode: 0,
|
||||||
|
});
|
||||||
|
pdfLinkService.setViewer(pdfViewer);
|
||||||
|
|
||||||
|
// (Optionally) enable find controller.
|
||||||
|
var pdfFindController = new pdfjsViewer.PDFFindController({
|
||||||
|
pdfViewer: pdfViewer,
|
||||||
|
});
|
||||||
|
pdfViewer.setFindController(pdfFindController);
|
||||||
|
|
||||||
|
container.addEventListener('pagesinit', function () {
|
||||||
|
// We can use pdfViewer now, e.g. let's change default scale.
|
||||||
|
pdfViewer.currentScaleValue = 'page-width';
|
||||||
|
|
||||||
|
if (SEARCH_FOR) { // We can try search for things
|
||||||
|
pdfFindController.executeCommand('find', {query: SEARCH_FOR});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Loading document.
|
||||||
|
pdfjsLib.getDocument({
|
||||||
|
url: DEFAULT_URL,
|
||||||
|
cMapUrl: CMAP_URL,
|
||||||
|
cMapPacked: CMAP_PACKED,
|
||||||
|
}).then(function(pdfDocument) {
|
||||||
|
// Document loaded, specifying document for the viewer and
|
||||||
|
// the (optional) linkService.
|
||||||
|
pdfViewer.setDocument(pdfDocument);
|
||||||
|
|
||||||
|
pdfLinkService.setDocument(pdfDocument, null);
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user