Existe-t-il un exemple PDF.js minimaliste qui prend en charge la sélection de texte?
J'essaye PDF.js .
Mon problème est que la démo Hello World ne prend pas en charge la sélection de texte. Il dessinera tout dans une toile sans le calque de texte. démo PDF.js officielle prend en charge la sélection de texte mais le code est trop complexe. Je me demandais si quelqu'un avait une démo minimaliste avec le calque de texte.
L'exemple d'origine que je me suis engagé à pdf.js n'existe plus, mais je le crois this exemple met en valeur la sélection de texte. Ils ont nettoyé et réorganisé pdf.js et ainsi la logique de sélection de texte est encapsulée à l'intérieur de la couche de texte, qui peut être créée à l'aide d'une usine.
Plus précisément, PDFJS.DefaultTextLayerFactory s'occupe de la configuration des éléments de sélection de texte de base.
L'exemple suivant est obsolète; ne le laisser ici que pour des raisons historiques.
Je me bats avec ce problème depuis 2-3 jours maintenant, mais je l'ai finalement compris. Ici est un violon qui vous montre comment charger un PDF avec la sélection de texte activée.
La difficulté à comprendre cela était que la logique de sélection de texte était étroitement liée au code du visualiseur (viewer.js, viewer.html, viewer.css). J'ai dû extraire le code et le CSS pertinents pour que cela fonctionne (ce fichier JavaScript est référencé dans le fichier; vous pouvez également le vérifier ici ). Le résultat final est une démo minimale qui devrait s'avérer utile. Pour implémenter correctement la sélection, le CSS qui se trouve dans viewer.css est également extrêmement important car il définit des styles CSS pour les div qui sont finalement créés et ensuite utilisés pour faire fonctionner la sélection de texte.
Le gros du travail est effectué par l'objet TextLayerBuilder, qui gère en fait la création de la sélection divs. Vous pouvez voir les appels à cet objet depuis viewer.js.
Quoi qu'il en soit, voici le code, y compris le CSS. Gardez à l'esprit que vous aurez toujours besoin du pdf.js fichier. Mon violon a un lien vers une version que j'ai construite à partir du dépôt GitHub de Mozilla pour pdf.js. Je ne voulais pas créer de lien vers la version du référentiel directement car ils la développent constamment et elle peut être cassée.
Alors sans plus tarder:
HTML:
<html>
<head>
<title>Minimal pdf.js text-selection demo</title>
</head>
<body>
<div id="pdfContainer" class = "pdf-content">
</div>
</body>
</html>
CSS:
.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);
}
JavaScript:
//Minimal PDF rendering and text-selection example using pdf.js by Vivin Suresh Paliath (http://vivin.net)
//This fiddle uses a built version of pdf.js that contains all modules that it requires.
//
//For demonstration purposes, the PDF data is not going to be obtained from an outside source. I will be
//storing it in a variable. Mozilla's viewer does support PDF uploads but I haven't really gone through
//that code. There are other ways to upload PDF data. For instance, I have a Spring app that accepts a
//PDF for upload and then communicates the binary data back to the page as base64. I then convert this
//into a Uint8Array manually. I will be demonstrating the same technique here. What matters most here is
//how we render the PDF with text-selection enabled. The source of the PDF is not important; just assume
//that we have the data as base64.
//
//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.
//
//For reference, the actual PDF document that is rendered is available at:
//http://vivin.net/pub/pdfjs/TestDocument.pdf
var pdfBase64 = "..."; //should contain base64 representing the PDF
var scale = 1; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
/**
* Converts a base64 string into a Uint8Array
*/
function base64ToUint8Array(base64) {
var raw = atob(base64); //This is a native function that decodes a base64-encoded string.
var uint8Array = new Uint8Array(new ArrayBuffer(raw.length));
for(var i = 0; i < raw.length; i++) {
uint8Array[i] = raw.charCodeAt(i);
}
return uint8Array;
}
function loadPdf(pdfData) {
PDFJS.disableWorker = true; //Not using web workers. Not disabling results in an error. This line is
//missing in the example code for rendering a pdf.
var pdf = PDFJS.getDocument(pdfData);
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
jQuery("#pdfContainer").append($canvas);
//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);
}
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
});
jQuery("#pdfContainer").append($textLayerDiv);
page.getTextContent().then(function(textContent) {
var textLayer = new TextLayerBuilder($textLayerDiv.get(0), 0); //The second zero is an index identifying
//the page. It is set to page.number - 1.
textLayer.setTextContent(textContent);
var renderContext = {
canvasContext: context,
viewport: viewport,
textLayer: textLayer
};
page.render(renderContext);
});
}
var pdfData = base64ToUint8Array(pdfBase64);
loadPdf(pdfData);
Comme il s'agit d'une ancienne question et d'une ancienne réponse acceptée, pour la faire fonctionner avec les versions récentes de PDF.JS, vous pouvez utiliser cette solution
http://www.ryzhak.com/converting-pdf-file-to-html-canvas-with-text-selection-using-pdf-js
Voici le code qu'ils ont utilisé: Incluez les CSS et scripts suivants du code PDF.js
<link rel="stylesheet" href="pdf.js/web/text_layer_builder.css" />
<script src="pdf.js/web/ui_utils.js"></script>
<script src="pdf.js/web/text_layer_builder.js"></script>
utilisez ce code pour charger le PDF:
PDFJS.getDocument("oasis.pdf").then(function(pdf){
var page_num = 1;
pdf.getPage(page_num).then(function(page){
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = $('#the-canvas')[0];
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var canvasOffset = $(canvas).offset();
var $textLayerDiv = $('#text-layer').css({
height : viewport.height+'px',
width : viewport.width+'px',
top : canvasOffset.top,
left : canvasOffset.left
});
page.render({
canvasContext : context,
viewport : viewport
});
page.getTextContent().then(function(textContent){
console.log( textContent );
var textLayer = new TextLayerBuilder({
textLayerDiv : $textLayerDiv.get(0),
pageIndex : page_num - 1,
viewport : viewport
});
textLayer.setTextContent(textContent);
textLayer.render();
});
});
});