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

issue #3346

Browse Source 
squashing commits.
This commit is contained in:
Vivin Paliath 2013-08-27 10:05:38 -07:00
parent f1a9bc93f7
commit f3d1f20652
4 changed files with 185 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
examples/text-selection/css/minimal.css Normal file
View File

@ -0,0 +1,57 @@
body {
font-family: arial, verdana, sans-serif;
}
.pdf-content {
border: 1px solid #000000;
}
/* 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;
}
.textLayer .highlight {
margin: -1px;
padding: 1px;
background-color: rgba(180, 0, 170, 0.2);
border-radius: 4px;
}
.textLayer .highlight.begin {
border-radius: 4px 0px 0px 4px;
}
.textLayer .highlight.end {
border-radius: 0px 4px 4px 0px;
}
.textLayer .highlight.middle {
border-radius: 0px;
}
.textLayer .highlight.selected {
background-color: rgba(0, 100, 0, 0.2);
}

29
examples/text-selection/index.html Normal file
View File

@ -0,0 +1,29 @@
<html>
<head>
<title>Minimal pdf.js text-selection demo</title>
<link href="css/minimal.css" rel="stylesheet" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- you will need to run "node make generic" first before you can use this -->
<script src="../../build/generic/build/pdf.js" type="text/javascript"></script>
<!-- These files are viewer components that you will need to get text-selection to work -->
<script src="../../web/pdf_find_bar.js"></script>
<script src="../../web/pdf_find_controller.js"></script>
<script src="../../web/ui_utils.js"></script>
<script src="../../web/text_layer_builder.js"></script>
<script src="text/javascript">
// 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" type="text/javascript"></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" class="pdf-content">
</div>
</body>
</html>

99
examples/text-selection/js/minimal.js Normal file
View File

@ -0,0 +1,99 @@
//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.
window.onload = function () {
var scale = 1.5; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
PDFJS.workerSrc = '../../src/worker_loader.js';
function loadPdf(pdfPath) {
var pdf = PDFJS.getDocument(pdfPath);
pdf.then(renderPdf);
}
function renderPdf(pdf) {
pdf.getPage(1).then(renderPage);
}
function renderPage(page) {
var viewport = page.getViewport(scale);
var $canvas = jQuery("<canvas></canvas>");
//Set the canvas height and width to the height and width of the viewport
var canvas = $canvas.get(0);
var context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
//Append the canvas to the pdf container div
var $pdfContainer = jQuery("#pdfContainer");
$pdfContainer.css("height", canvas.height + "px").css("width", canvas.width + "px");
$pdfContainer.append($canvas);
var canvasOffset = $canvas.offset();
var $textLayerDiv = jQuery("<div />")
.addClass("textLayer")
.css("height", viewport.height + "px")
.css("width", viewport.width + "px")
.offset({
top: canvasOffset.top,
left: canvasOffset.left
});
//The following few lines of code set up scaling on the context if we are on a HiDPI display
var outputScale = getOutputScale();
if (outputScale.scaled) {
var cssScale = 'scale(' + (1 / outputScale.sx) + ', ' +
(1 / outputScale.sy) + ')';
CustomStyle.setProp('transform', canvas, cssScale);
CustomStyle.setProp('transformOrigin', canvas, '0% 0%');
if ($textLayerDiv.get(0)) {
CustomStyle.setProp('transform', $textLayerDiv.get(0), cssScale);
CustomStyle.setProp('transformOrigin', $textLayerDiv.get(0), '0% 0%');
}
}
context._scaleX = outputScale.sx;
context._scaleY = outputScale.sy;
if (outputScale.scaled) {
context.scale(outputScale.sx, outputScale.sy);
}
$pdfContainer.append($textLayerDiv);
page.getTextContent().then(function (textContent) {
var textLayer = new TextLayerBuilder({
textLayerDiv: $textLayerDiv.get(0),
pageIndex: 0
});
textLayer.setTextContent(textContent);
var renderContext = {
canvasContext: context,
viewport: viewport,
textLayer: textLayer
};
page.render(renderContext);
});
}
loadPdf('pdf/TestDocument.pdf');
};

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

Binary file not shown.