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

Replaces text selection example

Browse Source
This commit is contained in:
Yury Delendik 2014-12-19 18:10:57 -06:00
parent 2565e627a3
commit 513a3d8c91
10 changed files with 119 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
examples/components/pageviewer.html Normal file
View File

@ -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>

58
examples/components/pageviewer.js Normal file
View File

@ -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();
});
});

43
examples/text-selection/css/minimal.css
View File

@ -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;
}

26
examples/text-selection/index.html
View File

@ -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>

97
examples/text-selection/js/minimal.js
View File

@ -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');
};

BIN
examples/text-selection/pdf/TestDocument.pdf
View File

Binary file not shown.

4
web/annotations_layer_builder.js
View File

@ -103,7 +103,9 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
element = PDFJS.AnnotationUtils.getHtmlElement(data, element = PDFJS.AnnotationUtils.getHtmlElement(data,
pdfPage.commonObjs); pdfPage.commonObjs);
element.setAttribute('data-annotation-id', data.id); element.setAttribute('data-annotation-id', data.id);
mozL10n.translate(element); if (typeof mozL10n !== 'undefined') {
mozL10n.translate(element);
}
var rect = data.rect; var rect = data.rect;
var view = pdfPage.view; var view = pdfPage.view;

9
web/pdf_viewer.component.js
View File

@ -15,7 +15,9 @@
* limitations under the License. * limitations under the License.
*/ */
/*jshint globalstrict: false */ /*jshint globalstrict: false */
/* globals PDFJS, PDFViewer */ /* globals PDFJS, PDFViewer, PDFPageView, TextLayerBuilder,
DefaultTextLayerFactory, AnnotationsLayerBuilder,
DefaultAnnotationsLayerFactory */
// Initializing PDFJS global object (if still undefined) // Initializing PDFJS global object (if still undefined)
if (typeof PDFJS === 'undefined') { if (typeof PDFJS === 'undefined') {
@ -29,4 +31,9 @@ if (typeof PDFJS === 'undefined') {
//#include pdf_viewer.js //#include pdf_viewer.js
PDFJS.PDFViewer = PDFViewer; PDFJS.PDFViewer = PDFViewer;
PDFJS.PDFPageView = PDFPageView;
PDFJS.TextLayerBuilder = TextLayerBuilder;
PDFJS.DefaultTextLayerFactory = DefaultTextLayerFactory;
PDFJS.AnnotationsLayerBuilder = AnnotationsLayerBuilder;
PDFJS.DefaultAnnotationsLayerFactory = DefaultAnnotationsLayerFactory;
}).call((typeof window === 'undefined') ? this : window); }).call((typeof window === 'undefined') ? this : window);

4
web/text_layer_builder.css
View File

@ -20,6 +20,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
opacity: 0.2;
} }
.textLayer > div { .textLayer > div {
@ -57,3 +58,6 @@
.textLayer .highlight.selected { .textLayer .highlight.selected {
background-color: rgb(0, 100, 0); background-color: rgb(0, 100, 0);
} }
.textLayer ::selection { background: rgb(0,0,255); }
.textLayer ::-moz-selection { background: rgb(0,0,255); }

7
web/viewer.css
View File

@ -1258,19 +1258,12 @@ html[dir='rtl'] .attachmentsItem > button {
cursor: default; cursor: default;
} }
/* TODO: file FF bug to support ::-moz-selection:window-inactive /* TODO: file FF bug to support ::-moz-selection:window-inactive
so we can override the opaque grey background when the window is inactive; so we can override the opaque grey background when the window is inactive;
see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */ see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
::selection { background: rgba(0,0,255,0.3); } ::selection { background: rgba(0,0,255,0.3); }
::-moz-selection { background: rgba(0,0,255,0.3); } ::-moz-selection { background: rgba(0,0,255,0.3); }
.textLayer ::selection { background: rgb(0,0,255); }
.textLayer ::-moz-selection { background: rgb(0,0,255); }
.textLayer {
opacity: 0.2;
}
#errorWrapper { #errorWrapper {
background: none repeat scroll 0 0 #FF5555; background: none repeat scroll 0 0 #FF5555;
color: white; color: white;