Skip to content

Instantly share code, notes, and snippets.

@yurydelendik

yurydelendik/viewer1.html

Last active August 29, 2015 14:06
Show Gist options
  • Save yurydelendik/5e7eda82bfd67a5a15df to your computer and use it in GitHub Desktop.
Save yurydelendik/5e7eda82bfd67a5a15df to your computer and use it in GitHub Desktop.
Download ZIP
Raw
viewer1.html
<!DOCTYPE html>
<!--
Copyright 2012 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.
Adobe CMap resources are covered by their own copyright and license:
http://sourceforge.net/adobe/cmap/wiki/License/
-->
<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--#if GENERIC || CHROME-->
<meta name="google" content="notranslate">
<!--#endif-->
<title>PDF.js viewer</title>
<!--#if FIREFOX || MOZCENTRAL-->
<!--#include viewer-snippet-firefox-extension.html-->
<!--#endif-->
<!--#if CHROME-->
<!--#include viewer-snippet-chrome-extension.html-->
<!--#endif-->
<link rel="stylesheet" href="viewer.css"/>
<style>
#viewerContainer { top: 0px; }
</style>
<!--#if !(MOZCENTRAL || CHROME || MINIFIED)-->
<script src="compatibility.js"></script>
<!--#endif-->
<!--#if !PRODUCTION-->
<script src="../src/shared/util.js"></script>
<script src="../src/display/api.js"></script>
<script src="../src/display/metadata.js"></script>
<script src="../src/display/canvas.js"></script>
<script src="../src/display/webgl.js"></script>
<script src="../src/display/pattern_helper.js"></script>
<script src="../src/display/font_loader.js"></script>
<script src="../src/display/annotation_helper.js"></script>
<script>PDFJS.workerSrc = '../src/worker_loader.js';</script>
<!--#endif-->
<!--#if (GENERIC && !MINIFIED) -->
<!--#include viewer-snippet.html-->
<!--#endif-->
<!--#if !PRODUCTION-->
<script src="ui_utils.js"></script>
<script src="pdf_rendering_queue.js"></script>
<script src="page_view.js"></script>
<script src="text_layer_builder.js"></script>
<script src="pdf_viewer.js"></script>
<!--#endif-->
</head>
<body tabindex="1">
<div id="outerContainer" class="loadingInProgress">
<div id="mainContainer">
<div id="viewerContainer" tabindex="0">
<div id="viewer"></div>
</div>
</div> <!-- mainContainer -->
</div> <!-- outerContainer -->
<script>
var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf';
var pdfViewer;
PDFJS.getDocument(DEFAULT_URL).then(function (pdfDocument) {
pdfViewer = new PDFViewer({
container: document.getElementById('viewerContainer')
});
pdfViewer.setDocument(pdfDocument);
});
</script>
</body>
</html>
Raw
viewer2.html
<!DOCTYPE html>
<!--
Copyright 2012 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.
Adobe CMap resources are covered by their own copyright and license:
http://sourceforge.net/adobe/cmap/wiki/License/
-->
<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--#if GENERIC || CHROME-->
<meta name="google" content="notranslate">
<!--#endif-->
<title>PDF.js viewer</title>
<!--#if FIREFOX || MOZCENTRAL-->
<!--#include viewer-snippet-firefox-extension.html-->
<!--#endif-->
<!--#if CHROME-->
<!--#include viewer-snippet-chrome-extension.html-->
<!--#endif-->
<link id="style1" rel="stylesheet" href="viewer.css"/>
<style>
#viewerContainer { top: 0px; }
</style>
<!--#if !(MOZCENTRAL || CHROME || MINIFIED)-->
<script src="compatibility.js"></script>
<!--#endif-->
<!--#if !PRODUCTION-->
<script src="../src/shared/util.js"></script>
<script src="../src/display/api.js"></script>
<script src="../src/display/metadata.js"></script>
<script src="../src/display/canvas.js"></script>
<script src="../src/display/webgl.js"></script>
<script src="../src/display/pattern_helper.js"></script>
<script src="../src/display/font_loader.js"></script>
<script src="../src/display/annotation_helper.js"></script>
<script>PDFJS.workerSrc = '../src/worker_loader.js';</script>
<!--#endif-->
<!--#if (GENERIC && !MINIFIED) -->
<!--#include viewer-snippet.html-->
<!--#endif-->
<!--#if !PRODUCTION-->
<script src="ui_utils.js"></script>
<script src="pdf_rendering_queue.js"></script>
<script src="page_view.js"></script>
<script src="text_layer_builder.js"></script>
<script src="pdf_viewer.js"></script>
<!--#endif-->
<script>
var PDFViewerElement = Object.create(HTMLDivElement.prototype);
PDFViewerElement.createdCallback = function () {
var shadow = this.createShadowRoot();
shadow.id = 'viewerContainer';
var cssStyles = shadow.ownerDocument.createElement('style');
cssStyles.setAttribute('scoped', '');
cssStyles.innerHTML = '@import url(viewer.css);\n#viewerContainer { top: 0px; }';
cssStyles.addEventListener('load', function () {
shadow.appendChild(cssStyles.cloneNode(true));
});
this.appendChild(cssStyles);
var viewer = shadow.ownerDocument.createElement('div');
viewer.id = 'viewer';
shadow.appendChild(viewer);
var pdfViewer = new PDFViewer({
container: this,
viewer: viewer
});
this._pdfViewer = pdfViewer;
this._src = null;
this.readyState = 0;
this.src = this.getAttribute('src');
};
PDFViewerElement.attributeChangedCallback = function (attributeName) {
switch (attributeName) {
case 'src':
this.src = this.getAttribute('src');
break;
}
};
Object.defineProperty(PDFViewerElement, 'page', {
get: function () { return this._pdfViewer.currentPageNumber; },
enumerable: true
});
Object.defineProperty(PDFViewerElement, 'src', {
get: function () { return this._src; },
set: function (val) {
if (this._src === val) {
return;
}
if (!val) {
this._pdfViewer.setDocument(null);
this.readyState = 0;
this._src = null;
return;
}
var a = this.ownerDocument.createElement('a');
this.appendChild(a);
a.href = val;
this._src = a.href;
a.remove();
this.readyState = 1;
var self = this;
PDFJS.getDocument(this._src).then(function (pdfDocument) {
self._pdfViewer.setDocument(pdfDocument);
this.readyState = 2;
});
},
enumerable: true
});
document.registerElement('pdf-viewer', {
prototype: PDFViewerElement,
extends: 'div'
});
</script>
</head>
<body tabindex="1">
<div id="outerContainer" class="loadingInProgress">
<div id="mainContainer">
<div id='viewerContainer' is="pdf-viewer" src="compressed.tracemonkey-pldi-09.pdf"></div>
</div> <!-- mainContainer -->
</div> <!-- outerContainer -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment