Ich habe diese Demo erstellt:Wie wird das ganze PDF (nicht nur eine Seite) mit PDF.JS angezeigt?
http://polishwords.com.pl/dev/pdfjs/test.html
Es ist eine Seite anzeigt. Ich möchte alle Seiten anzeigen lassen. Untereinander, oder platzieren Sie einige Schaltflächen, um die Seite zu wechseln oder noch besser alle Standardsteuerelemente von PDF.JS wie in Firefox zu laden. Wie schafft man das?
PDFJS hat eine Membervariable numPages, also würden Sie einfach durch sie iterieren. ABER ist es wichtig, daran zu denken, dass das Abrufen einer Seite in pdf.js asynchron ist, sodass die Bestellung nicht garantiert werden kann. Also müsstest du sie verketten. Man könnte etwas in dieser Richtung tun:
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);
}
}
das funktioniert nicht für mich. Mein Canvas ist innerhalb eines Divs und wenn es über Code ausgeführt wird, zeigt es die PDF-Seiten übereinander am Ende der Seite (nicht div) – Sara
@Sara müssen Sie DOM lernen. Der obige Code ist nur ein Beispiel. Es hängt die erstellten Seiten an das Dokument an. Sie müssen sie in Ihr div und legen Sie die Leinwände nach Bedarf in Ihrem Projekt. aber das alles ist außerhalb des Bereichs dieser Frage –
Danke für schnelle Antwort :) Ich habe Div hinzugefügt und es fügt die Leinwand an der richtigen Stelle, aber es überschreiben sie .. – Sara
Wenn Sie alle Seiten von PDF-Dokument in verschiedenen Leinwänden machen wollen, die alle eins nach dem anderen synchron diese Art der Lösung ist:
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
$(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);
});
Woher kommt dieser canvasContainer? Könnten Sie erklären, ich habe dynamische div innerhalb der Leinwand wird nach dem Laden der Seite beim Klicken auf Repestictive Links hinzugefügt werden –
Ich benutze TouchPDF-Bibliothek –
Sie können unten auf Link für schnelle Abhilfe verweisen.
Hinweis: Entwickler selbst erwähnt (! Wirklich schmutzig ist dies nur eine Probefahrt)
Die pdfjs-dist Bibliothek enthält Teile für PDF-Viewer zu bauen. Sie können PDFPageView zum Rendern aller Seiten verwenden. Basierend auf 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>Vielen Dank, für die Bereitstellung von Arbeitscode-Snippet, wie ich brauchte. – Gathole
Hier mein nehmen ist. Rendert alle Seiten in der richtigen Reihenfolge und funktioniert weiterhin asynchron.
<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>
Brilliant - Danke! –
https://github.com/mozilla/pdf.js –
Lassen Sie sich inspirieren hier: http://mozilla.github.io/pdf.js/web/viewer.html – kuncajs
@DekDekku kuncajs Ich war Lesen Sie diese Seiten für den ganzen Tag heute, bevor ich diese Frage gestellt habe. Sie haben nicht geholfen –