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

Examples: improve SVG viewer

Browse Source 
This patch:

- resolves a warning in the console about missing character encoding;
- makes the viewer use the same background color and PDF file as the
  regular viewer;
- simplifies the example to bring it more in line with the other
  examples.
This commit is contained in:
Tim van der Meij 2016-10-12 21:13:37 +02:00
parent 8c5b925547
commit de6c92a96d
2 changed files with 18 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
examples/svgviewer/index.html
View File

@ -2,21 +2,24 @@
<html> <html>
<head> <head>
<meta charset="utf-8">
<title>PDF.js SVG viewer example</title>
<script src="../../node_modules/requirejs/require.js"></script> <script src="../../node_modules/requirejs/require.js"></script>
<script src="viewer.js"></script> <script src="viewer.js"></script>
<style> <style>
body { body {
background-color: gray; background-color: #404040;
} }
.pageContainer { .pageContainer {
border : 1px solid black; border: 1px solid #000;
margin : 5px auto; margin: 5px auto;
background-color : white; background-color: #FFF;
} }
</style> </style>
<title>SVG Viewer Example</title>
</head> </head>
<body> <body>

27
examples/svgviewer/viewer.js
View File

@ -1,40 +1,29 @@
'use strict'; 'use strict';
var DEFAULT_SCALE = 1.5;
// Parse query string to extract some parameters (it can fail for some input) // Parse query string to extract some parameters (it can fail for some input)
var query = document.location.href.replace(/^[^?]*(\?([^#]*))?(#.*)?/, '$2'); var query = document.location.href.replace(/^[^?]*(\?([^#]*))?(#.*)?/, '$2');
var queryParams = query ? JSON.parse('{' + query.split('&').map(function (a) { var queryParams = query ? JSON.parse('{' + query.split('&').map(function (a) {
return a.split('=').map(decodeURIComponent).map(JSON.stringify).join(': '); return a.split('=').map(decodeURIComponent).map(JSON.stringify).join(': ');
}).join(',') + '}') : {}; }).join(',') + '}') : {};
var url = queryParams.file || '../../test/pdfs/liveprogramming.pdf'; var url = queryParams.file || '../../web/compressed.tracemonkey-pldi-09.pdf';
var scale = +queryParams.scale || 1.5;
function renderDocument(pdf, svgLib) { function renderDocument(pdf, svgLib) {
var numPages = pdf.numPages;
// Using promise to fetch the page
// For testing only.
var MAX_NUM_PAGES = 50;
var ii = Math.min(MAX_NUM_PAGES, numPages);
var promise = Promise.resolve(); var promise = Promise.resolve();
for (var i = 1; i <= ii; i++) { for (var i = 1; i <= pdf.numPages; i++) {
var anchor = document.createElement('a');
anchor.setAttribute('name', 'page=' + i);
anchor.setAttribute('title', 'Page ' + i);
document.body.appendChild(anchor);
// Using promise to fetch and render the next page // Using promise to fetch and render the next page
promise = promise.then(function (pageNum, anchor) { promise = promise.then(function (pageNum) {
return pdf.getPage(pageNum).then(function (page) { return pdf.getPage(pageNum).then(function (page) {
var viewport = page.getViewport(scale); var viewport = page.getViewport(DEFAULT_SCALE);
var container = document.createElement('div'); var container = document.createElement('div');
container.id = 'pageContainer' + pageNum; container.id = 'pageContainer' + pageNum;
container.className = 'pageContainer'; container.className = 'pageContainer';
container.style.width = viewport.width + 'px'; container.style.width = viewport.width + 'px';
container.style.height = viewport.height + 'px'; container.style.height = viewport.height + 'px';
anchor.appendChild(container); document.body.appendChild(container);
return page.getOperatorList().then(function (opList) { return page.getOperatorList().then(function (opList) {
var svgGfx = new svgLib.SVGGraphics(page.commonObjs, page.objs); var svgGfx = new svgLib.SVGGraphics(page.commonObjs, page.objs);
@ -43,7 +32,7 @@ function renderDocument(pdf, svgLib) {
}); });
}); });
}); });
}.bind(null, i, anchor)); }.bind(null, i));
} }
} }