Vivin Paliath
12 years ago
4 changed files with 185 additions and 0 deletions
@ -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); |
||||||
|
} |
||||||
|
|
||||||
@ -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> |
||||||
@ -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'); |
||||||
|
}; |
||||||
|
|
||||||
Binary file not shown.
Loading…
Reference in new issue