Ho creato questa demo:Come visualizzare l'intero PDF (non solo una pagina) con PDF.JS?
http://polishwords.com.pl/dev/pdfjs/test.html
Esso visualizza una pagina. Mi piacerebbe visualizzare tutte le pagine. Uno sotto l'altro, o posiziona alcuni pulsanti per cambiare pagina o carica ancora meglio tutti i controlli standard di PDF.JS come in Firefox. Come realizzarlo?
PDFJS ha una variabile membro numPages, quindi è sufficiente iterare attraverso di essi. MA è importante ricordare che ottenere una pagina in pdf.js è asincrono, quindi l'ordine non sarebbe garantito. Quindi avresti bisogno di incatenarli. Si potrebbe fare qualcosa in queste righe:
var currPage = 1; //Pages are 1-based not 0-based
var numPages = 0;
var thePDF = null;
//This is where you start
PDFJS.getDocument(url).then(function(pdf) {
//Set PDFJS global object (so we can easily access in our page functions
thePDF = pdf;
//How many pages it has
numPages = pdf.numPages;
//Start with first page
pdf.getPage(1).then(handlePages);
});
function handlePages(page)
{
//This gives us the page's dimensions at full scale
var viewport = page.getViewport(1);
//We'll create a canvas for each page to draw it on
var canvas = document.createElement("canvas");
canvas.style.display = "block";
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//Draw it on the canvas
page.render({canvasContext: context, viewport: viewport});
//Add it to the web page
document.body.appendChild(canvas);
//Move to next page
currPage++;
if (thePDF !== null && currPage <= numPages)
{
thePDF.getPage(currPage).then(handlePages);
}
}
questo non funziona per me. La mia tela è all'interno di un div e quando viene eseguito sopra il codice mostra le pagine PDF l'una sopra l'altra alla fine della pagina (non div) – Sara
@Sara è necessario imparare DOM. il codice sopra è solo un esempio. aggiunge le pagine create al documento. devi metterli nel tuo div e modellare le tele come necessario nel tuo progetto. ma tutto ciò non rientra nell'ambito di questa domanda –
Grazie per la rapida risposta :) Ho aggiunto div e aggiunge la tela al posto giusto ma la sovrascrive .. – Sara
Se si vuole rendere tutte le pagine del documento PDF in diverse tele, uno per uno in modo sincrono questo è una specie di soluzione:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PDF Sample</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript" src="main.js">
</script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body id="body">
</body>
</html>
main.css
canvas {
display: block;
}
main.js
012.$(function() {
var filePath = "document.pdf";
function Num(num) {
var num = num;
return function() {
return num;
}
};
function renderPDF(url, canvasContainer, options) {
var options = options || {
scale: 1.5
},
func,
pdfDoc,
def = $.Deferred(),
promise = $.Deferred().resolve().promise(),
width,
height,
makeRunner = function(func, args) {
return function() {
return func.call(null, args);
};
};
function renderPage(num) {
var def = $.Deferred(),
currPageNum = new Num(num);
pdfDoc.getPage(currPageNum()).then(function(page) {
var viewport = page.getViewport(options.scale);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
if(currPageNum() === 1) {
height = viewport.height;
width = viewport.width;
}
canvas.height = height;
canvas.width = width;
canvasContainer.appendChild(canvas);
page.render(renderContext).then(function() {
def.resolve();
});
})
return def.promise();
}
function renderPages(data) {
pdfDoc = data;
var pagesCount = pdfDoc.numPages;
for (var i = 1; i <= pagesCount; i++) {
func = renderPage;
promise = promise.then(makeRunner(func, i));
}
}
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(renderPages);
};
var body = document.getElementById("body");
renderPDF(filePath, body);
});
da dove proviene questo canvasContainer? potresti spiegare che ho un div dinamico all'interno del quale verrà aggiunto il canvas dopo il caricamento della pagina cliccando sui link ripestics –
sto usando la libreria TouchPDF –
È possibile fare riferimento a Collegamento in basso per soluzione rapida.
Nota: Developer stesso menzionato (! davvero sporco questo è solo un test drive)
La biblioteca pdfjs-dist contiene parti per la costruzione di visualizzatore di PDF. È possibile utilizzare PDFPageView per eseguire il rendering di tutte le pagine. Sulla base di https://github.com/mozilla/pdf.js/blob/master/examples/components/pageviewer.html:
var url = "https://cdn.mozilla.net/pdfjs/tracemonkey.pdf";
var container = document.getElementById('container');
// Load document
PDFJS.getDocument(url).then(function (doc) {
var promise = Promise.resolve();
for (var i = 0; i < doc.numPages; i++) {
// One-by-one load pages
promise = promise.then(function (id) {
return doc.getPage(id + 1).then(function (pdfPage) {
// Add div with page view.
var SCALE = 1.0;
var pdfPageView = new PDFJS.PDFPageView({
container: container,
id: id,
scale: SCALE,
defaultViewport: pdfPage.getViewport(SCALE),
// We can enable text/annotations layers, if needed
textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory()
});
// Associates the actual page with the view, and drawing it
pdfPageView.setPdfPage(pdfPage);
return pdfPageView.draw();
});
}.bind(null, i));
}
return promise;
});#container > *:not(:first-child) {
border-top: solid 1px black;
}<link href="https://npmcdn.com/pdfjs-dist/web/pdf_viewer.css" rel="stylesheet"/>
<script src="https://npmcdn.com/pdfjs-dist/web/compatibility.js"></script>
<script src="https://npmcdn.com/pdfjs-dist/build/pdf.js"></script>
<script src="https://npmcdn.com/pdfjs-dist/web/pdf_viewer.js"></script>
<div id="container" class="pdfViewer singlePageView"></div>Grazie, per aver dato lo snippet di codice funzionante come avevo bisogno. – Gathole
Ecco il mio prendere. Esegue il rendering di tutte le pagine nell'ordine corretto e funziona in modo asincrono.
<style>
#pdf-viewer {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
overflow: auto;
}
.pdf-page-canvas {
display: block;
margin: 5px auto;
border: 1px solid rgba(0, 0, 0, 0.2);
}
</style>
<script>
url = 'https://github.com/mozilla/pdf.js/blob/master/test/pdfs/tracemonkey.pdf';
var thePdf = null;
var scale = 1;
PDFJS.getDocument(url).promise.then(function(pdf) {
thePdf = pdf;
viewer = document.getElementById('pdf-viewer');
for(page = 1; page <= pdf.numPages; page++) {
canvas = document.createElement("canvas");
canvas.className = 'pdf-page-canvas';
viewer.appendChild(canvas);
renderPage(page, canvas);
}
});
function renderPage(pageNumber, canvas) {
thePdf.getPage(pageNumber).then(function(page) {
viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({canvasContext: canvas.getContext('2d'), viewport: viewport});
});
}
</script>
<div id='pdf-viewer'></div>
Brillante - Grazie! –
https://github.com/mozilla/pdf.js –
Prendere ispirazione qui: http://mozilla.github.io/pdf.js/web/viewer.html – kuncajs
@DekDekku kuncajs ero leggendo quei siti per tutto il giorno oggi prima ho fatto questa domanda. Non hanno aiutato –