Yury Delendik
10 years ago
10 changed files with 119 additions and 175 deletions
@ -0,0 +1,46 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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