diff --git a/README.md b/README.md index e49790b9e4bf8..a0261414b9956 100644 --- a/README.md +++ b/README.md @@ -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: diff --git a/docs/contents/examples/index.md b/docs/contents/examples/index.md index 31e1b5763aa87..4a58257b1ed2f 100644 --- a/docs/contents/examples/index.md +++ b/docs/contents/examples/index.md @@ -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. diff --git a/examples/helloworld/README.md b/examples/helloworld/README.md deleted file mode 100644 index bc979fbb7698a..0000000000000 --- a/examples/helloworld/README.md +++ /dev/null @@ -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. diff --git a/examples/helloworld/hello.js b/examples/helloworld/hello.js deleted file mode 100644 index 08ce2ff29490a..0000000000000 --- a/examples/helloworld/hello.js +++ /dev/null @@ -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); - }); - }); -}); diff --git a/examples/helloworld/helloworld.pdf b/examples/helloworld/helloworld.pdf deleted file mode 100644 index d98b4e1dbef68..0000000000000 Binary files a/examples/helloworld/helloworld.pdf and /dev/null differ diff --git a/examples/helloworld/index.html b/examples/helloworld/index.html deleted file mode 100644 index e27316eac5a5b..0000000000000 --- a/examples/helloworld/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/examples/svgviewer/index.html b/examples/svgviewer/index.html index 2b19c29f79294..9c538f14435f2 100644 --- a/examples/svgviewer/index.html +++ b/examples/svgviewer/index.html @@ -1,29 +1,51 @@ - + + + + + + + PDF.js SVG viewer using built components + + + + + - - + +
+
+
+ + diff --git a/examples/svgviewer/viewer.js b/examples/svgviewer/viewer.js index f29ab790753cc..17d545a988bd6 100644 --- a/examples/svgviewer/viewer.js +++ b/examples/svgviewer/viewer.js @@ -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; +if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) { + alert('Please build the pdfjs-dist library using\n' + + ' `gulp dist-install`'); +} -// 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(',') + '}') : {}; +// The workerSrc property shall be specified. +// +pdfjsLib.GlobalWorkerOptions.workerSrc = + '../../node_modules/pdfjs-dist/build/pdf.worker.js'; -var url = queryParams.file || '../../web/compressed.tracemonkey-pldi-09.pdf'; +// Some PDFs need external cmaps. +// +var CMAP_URL = '../../node_modules/pdfjs-dist/cmaps/'; +var CMAP_PACKED = true; -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 DEFAULT_URL = '../../web/compressed.tracemonkey-pldi-09.pdf'; +var SEARCH_FOR = ''; // try 'Mozilla'; - 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); +var container = document.getElementById('viewerContainer'); - 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)); - } -} +// (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); -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); - }); +container.addEventListener('pagesinit', function () { + // We can use pdfViewer now, e.g. let's change default scale. + pdfViewer.currentScaleValue = 'page-width'; - // In production, change this to point to the built `pdf.worker.js` file. - GlobalWorkerOptions.workerSrc = modules[4]; + if (SEARCH_FOR) { // We can try search for things + pdfFindController.executeCommand('find', {query: SEARCH_FOR}); + } +}); - // In production, change this to point to where the cMaps are placed. - var CMAP_URL = '../../external/bcmaps/'; - var CMAP_PACKED = true; +// 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); - // 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); - }); + pdfLinkService.setDocument(pdfDocument, null); });