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)
|
||||
|
||||
The repository contains a hello world example that you can run locally:
|
||||
|
||||
+ [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.
|
||||
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.
|
||||
|
||||
For an introduction to the PDF.js code, check out the presentation by our
|
||||
contributor Julian Viereck:
|
||||
|
||||
@ -5,7 +5,7 @@ template: layout.jade
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
@ -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>
|
||||
<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>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>PDF.js SVG viewer example</title>
|
||||
|
||||
<script src="../../node_modules/systemjs/dist/system.js"></script>
|
||||
<script src="../../systemjs.config.js"></script>
|
||||
<script src="viewer.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="google" content="notranslate">
|
||||
<title>PDF.js SVG viewer using built components</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #404040;
|
||||
background-color: #808080;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pageContainer {
|
||||
border: 1px solid #000;
|
||||
margin: 5px auto;
|
||||
background-color: #FFF;
|
||||
#viewerContainer {
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</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>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
<body tabindex="1">
|
||||
<div id="viewerContainer">
|
||||
<div id="viewer" class="pdfViewer"></div>
|
||||
</div>
|
||||
|
||||
<script src="viewer.js"></script>
|
||||
</body>
|
||||
</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';
|
||||
|
||||
var DEFAULT_SCALE = 1.5;
|
||||
|
||||
// Parse query string to extract some parameters (it can fail for some input)
|
||||
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));
|
||||
}
|
||||
if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
|
||||
alert('Please build the pdfjs-dist library using\n' +
|
||||
' `gulp dist-install`');
|
||||
}
|
||||
|
||||
Promise.all([System.import('pdfjs/display/api'),
|
||||
System.import('pdfjs/display/svg'),
|
||||
System.import('pdfjs/display/worker_options'),
|
||||
System.import('pdfjs/display/network'),
|
||||
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);
|
||||
});
|
||||
// The workerSrc property shall be specified.
|
||||
//
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc =
|
||||
'../../node_modules/pdfjs-dist/build/pdf.worker.js';
|
||||
|
||||
// In production, change this to point to the built `pdf.worker.js` file.
|
||||
GlobalWorkerOptions.workerSrc = modules[4];
|
||||
// Some PDFs need external cmaps.
|
||||
//
|
||||
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 CMAP_URL = '../../external/bcmaps/';
|
||||
var CMAP_PACKED = true;
|
||||
var DEFAULT_URL = '../../web/compressed.tracemonkey-pldi-09.pdf';
|
||||
var SEARCH_FOR = ''; // try 'Mozilla';
|
||||
|
||||
// Fetch the PDF document from the URL using promises.
|
||||
api.getDocument({
|
||||
url: url,
|
||||
cMapUrl: CMAP_URL,
|
||||
cMapPacked: CMAP_PACKED,
|
||||
}).then(function(doc) {
|
||||
renderDocument(doc, svg);
|
||||
});
|
||||
var container = document.getElementById('viewerContainer');
|
||||
|
||||
// (Optionally) enable hyperlinks within PDF files.
|
||||
var pdfLinkService = new pdfjsViewer.PDFLinkService();
|
||||
|
||||
var pdfViewer = new pdfjsViewer.PDFViewer({
|
||||
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