Yury Delendik
10 years ago
10 changed files with 119 additions and 175 deletions
@ -0,0 +1,46 @@ |
|||||||
|
<!DOCTYPE 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 moznomarginboxes> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
||||||
|
<meta name="google" content="notranslate"> |
||||||
|
<title>PDF.js page viewer using built components</title> |
||||||
|
|
||||||
|
<style> |
||||||
|
body { |
||||||
|
background-color: #808080; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<link rel="stylesheet" href="../../build/components/pdf_viewer.css"> |
||||||
|
|
||||||
|
<!-- for legacy browsers --> |
||||||
|
<script src="../../build/components/compatibility.js"></script> |
||||||
|
<script src="../../build/pdf.js"></script> |
||||||
|
<script src="../../build/components/pdf_viewer.js"></script> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body tabindex="1"> |
||||||
|
<div id="pageContainer" class="pdfPage"></div> |
||||||
|
|
||||||
|
<script src="pageviewer.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
|
||||||
@ -0,0 +1,58 @@ |
|||||||
|
/* 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'; |
||||||
|
|
||||||
|
if (!PDFJS.PDFViewer || !PDFJS.getDocument) { |
||||||
|
alert('Please build the library and components using\n' + |
||||||
|
' `node make generic components`'); |
||||||
|
} |
||||||
|
|
||||||
|
// In cases when the pdf.worker.js is located at the different folder than the
|
||||||
|
// pdf.js's one, or the pdf.js is executed via eval(), the workerSrc property
|
||||||
|
// shall be specified.
|
||||||
|
//
|
||||||
|
// PDFJS.workerSrc = '../../build/pdf.worker.js';
|
||||||
|
|
||||||
|
// Some PDFs need external cmaps.
|
||||||
|
//
|
||||||
|
// PDFJS.cMapUrl = '../../external/bcmaps/';
|
||||||
|
// PDFJS.cMapPacked = true;
|
||||||
|
|
||||||
|
var DEFAULT_URL = '../../web/compressed.tracemonkey-pldi-09.pdf'; |
||||||
|
var PAGE_TO_VIEW = 1; |
||||||
|
var SCALE = 1.0; |
||||||
|
|
||||||
|
var container = document.getElementById('pageContainer'); |
||||||
|
|
||||||
|
// Loading document.
|
||||||
|
PDFJS.getDocument(DEFAULT_URL).then(function (pdfDocument) { |
||||||
|
// Document loaded, retrieving the page.
|
||||||
|
return pdfDocument.getPage(PAGE_TO_VIEW).then(function (pdfPage) { |
||||||
|
// Creating the page view with default parameters.
|
||||||
|
var pdfPageView = new PDFJS.PDFPageView({ |
||||||
|
container: container, |
||||||
|
id: PAGE_TO_VIEW, |
||||||
|
scale: SCALE, |
||||||
|
defaultViewport: pdfPage.getViewport(SCALE), |
||||||
|
// We can enable text/annotations layers, if needed
|
||||||
|
textLayerFactory: new PDFJS.DefaultTextLayerFactory(), |
||||||
|
annotationsLayerFactory: new PDFJS.DefaultAnnotationsLayerFactory() |
||||||
|
}); |
||||||
|
// Associates the actual page with the view, and drawing it
|
||||||
|
pdfPageView.setPdfPage(pdfPage); |
||||||
|
return pdfPageView.draw(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -1,43 +0,0 @@ |
|||||||
body { |
|
||||||
font-family: arial, verdana, sans-serif; |
|
||||||
} |
|
||||||
|
|
||||||
/* Allow absolute positioning of the canvas and textLayer in the page. They |
|
||||||
will be the same size and will be placed on top of each other. */ |
|
||||||
.pdfPage { |
|
||||||
position: relative; |
|
||||||
overflow: visible; |
|
||||||
border: 1px solid #000000; |
|
||||||
} |
|
||||||
|
|
||||||
.pdfPage > canvas { |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/* CSS classes used by TextLayerBuilder to style the text layer divs */ |
|
||||||
|
|
||||||
/* This stuff is important! Otherwise when you select the text, |
|
||||||
the text in the divs will show up! */ |
|
||||||
::selection { background:rgba(0,0,255,0.3); } |
|
||||||
::-moz-selection { background:rgba(0,0,255,0.3); } |
|
||||||
|
|
||||||
.textLayer { |
|
||||||
position: absolute; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
right: 0; |
|
||||||
bottom: 0; |
|
||||||
color: #000; |
|
||||||
font-family: sans-serif; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.textLayer > div { |
|
||||||
color: transparent; |
|
||||||
position: absolute; |
|
||||||
line-height: 1; |
|
||||||
white-space: pre; |
|
||||||
cursor: text; |
|
||||||
} |
|
||||||
@ -1,26 +0,0 @@ |
|||||||
<html> |
|
||||||
<head> |
|
||||||
<title>Minimal pdf.js text-selection demo</title> |
|
||||||
<link href="css/minimal.css" rel="stylesheet" media="screen" /> |
|
||||||
|
|
||||||
<!-- you will need to run "node make generic" first before you can use this --> |
|
||||||
<script src="../../build/generic/build/pdf.js"></script> |
|
||||||
|
|
||||||
<!-- These files are viewer components that you will need to get text-selection to work --> |
|
||||||
<script src="../../web/ui_utils.js"></script> |
|
||||||
<script src="../../web/text_layer_builder.js"></script> |
|
||||||
|
|
||||||
<script> |
|
||||||
// Specify the main script used to create a new PDF.JS web worker. |
|
||||||
// In production, change this to point to the combined `pdf.js` file. |
|
||||||
</script> |
|
||||||
|
|
||||||
<script src="js/minimal.js"></script> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
This is a minimal pdf.js text-selection demo. The existing minimal-example shows you how to render a PDF, but not |
|
||||||
how to enable text-selection. This example shows you how to do both. <br /><br /> |
|
||||||
<div id="pdfContainer"> |
|
||||||
</div> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,97 +0,0 @@ |
|||||||
// Minimal PDF rendering and text-selection example using PDF.js by Vivin Suresh Paliath (http://vivin.net)
|
|
||||||
// This example uses a built version of PDF.js that contains all modules that it requires.
|
|
||||||
//
|
|
||||||
// The problem with understanding text selection was that the text selection code has heavily intertwined
|
|
||||||
// with viewer.html and viewer.js. I have extracted the parts I need out of viewer.js into a separate file
|
|
||||||
// which contains the bare minimum required to implement text selection. The key component is TextLayerBuilder,
|
|
||||||
// which is the object that handles the creation of text-selection divs. I have added this code as an external
|
|
||||||
// resource.
|
|
||||||
//
|
|
||||||
// This demo uses a PDF that only has one page. You can render other pages if you wish, but the focus here is
|
|
||||||
// just to show you how you can render a PDF with text selection. Hence the code only loads up one page.
|
|
||||||
//
|
|
||||||
// The CSS used here is also very important since it sets up the CSS for the text layer divs overlays that
|
|
||||||
// you actually end up selecting.
|
|
||||||
//
|
|
||||||
// NOTE: The original example was changed to remove jQuery usage, re-structure and add more comments.
|
|
||||||
|
|
||||||
window.onload = function () { |
|
||||||
if (typeof PDFJS === 'undefined') { |
|
||||||
alert('Built version of pdf.js is not found\nPlease run `node make generic`'); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
var scale = 1.5; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
|
|
||||||
PDFJS.workerSrc = '../../build/generic/build/pdf.worker.js'; |
|
||||||
|
|
||||||
function loadPdf(pdfPath) { |
|
||||||
var pdf = PDFJS.getDocument(pdfPath); |
|
||||||
return pdf.then(renderPdf); |
|
||||||
} |
|
||||||
|
|
||||||
function renderPdf(pdf) { |
|
||||||
return pdf.getPage(1).then(renderPage); |
|
||||||
} |
|
||||||
|
|
||||||
function renderPage(page) { |
|
||||||
var viewport = page.getViewport(scale); |
|
||||||
|
|
||||||
// Create and append the 'pdf-page' div to the pdf container.
|
|
||||||
var pdfPage = document.createElement('div'); |
|
||||||
pdfPage.className = 'pdfPage'; |
|
||||||
var pdfContainer = document.getElementById('pdfContainer'); |
|
||||||
pdfContainer.appendChild(pdfPage); |
|
||||||
|
|
||||||
// Set the canvas height and width to the height and width of the viewport.
|
|
||||||
var canvas = document.createElement('canvas'); |
|
||||||
var context = canvas.getContext('2d'); |
|
||||||
|
|
||||||
// The following few lines of code set up scaling on the context, if we are
|
|
||||||
// on a HiDPI display.
|
|
||||||
var outputScale = getOutputScale(context); |
|
||||||
canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0; |
|
||||||
canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 0; |
|
||||||
context._scaleX = outputScale.sx; |
|
||||||
context._scaleY = outputScale.sy; |
|
||||||
if (outputScale.scaled) { |
|
||||||
context.scale(outputScale.sx, outputScale.sy); |
|
||||||
} |
|
||||||
|
|
||||||
// The page, canvas and text layer elements will have the same size.
|
|
||||||
canvas.style.width = Math.floor(viewport.width) + 'px'; |
|
||||||
canvas.style.height = Math.floor(viewport.height) + 'px'; |
|
||||||
|
|
||||||
pdfPage.style.width = canvas.style.width; |
|
||||||
pdfPage.style.height = canvas.style.height; |
|
||||||
pdfPage.appendChild(canvas); |
|
||||||
|
|
||||||
var textLayerDiv = document.createElement('div'); |
|
||||||
textLayerDiv.className = 'textLayer'; |
|
||||||
textLayerDiv.style.width = canvas.style.width; |
|
||||||
textLayerDiv.style.height = canvas.style.height; |
|
||||||
pdfPage.appendChild(textLayerDiv); |
|
||||||
|
|
||||||
// Painting the canvas...
|
|
||||||
var renderContext = { |
|
||||||
canvasContext: context, |
|
||||||
viewport: viewport |
|
||||||
}; |
|
||||||
var renderTask = page.render(renderContext); |
|
||||||
|
|
||||||
// ... and at the same time, getting the text and creating the text layer.
|
|
||||||
var textLayerPromise = page.getTextContent().then(function (textContent) { |
|
||||||
var textLayerBuilder = new TextLayerBuilder({ |
|
||||||
textLayerDiv: textLayerDiv, |
|
||||||
viewport: viewport, |
|
||||||
pageIndex: 0 |
|
||||||
}); |
|
||||||
textLayerBuilder.setTextContent(textContent); |
|
||||||
}); |
|
||||||
|
|
||||||
// We might be interested when rendering complete and text layer is built.
|
|
||||||
return Promise.all([renderTask.promise, textLayerPromise]); |
|
||||||
} |
|
||||||
|
|
||||||
loadPdf('pdf/TestDocument.pdf'); |
|
||||||
}; |
|
||||||
|
|
||||||
Binary file not shown.
Loading…
Reference in new issue