Я создал эту демку:Как отобразить весь PDF (не только одну страницу) с помощью PDF.JS?
http://polishwords.com.pl/dev/pdfjs/test.html
Он отображает одну страницу. Я бы хотел отобразить все страницы. Один под другим, или поместите некоторые кнопки для изменения страницы или даже лучше загрузите все стандартные элементы управления PDF.JS, как в Firefox. Как это сделать?
PDFJS имеет переменную-член numPages, поэтому вы просто проходите через них. BUT Важно помнить, что получение страницы в pdf.js является асинхронным, поэтому заказ не гарантируется. Поэтому вам нужно будет их связать. Вы могли бы сделать что-то вдоль этих линий:
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);
}
}
это не работает для меня. Мой холст находится внутри div, а при запуске над кодом он показывает pdf-страницы друг на друга в конце страницы (не div) – Sara
@Sara вам нужно изучить DOM. приведенный выше код является только примером. он добавляет созданные страницы в документ. вам нужно поместить их в свой div и создать полотна по мере необходимости в вашем проекте. но все, что выходит за рамки этого вопроса –
Спасибо за быстрый ответ :) Я добавил div, и он добавляет холст в нужное место, но он перезаписывает их. – Sara
Если вы хотите сделать все страницы PDF-документ в разных полотнах, все один на один синхронно, это своего рода решение:
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);
});
откуда этот холстКонтейнер идет? не могли бы вы объяснить, у меня есть динамический div, внутри которого холст будет добавлен после загрузки страницы при нажатии на ссылки repesticve. –
Я использую библиотеку TouchPDF. –
Вы можете обратиться к ссылке ниже для быстрого обхода проблемы.
Примечание: Разработчик сам упомянул (! Действительно загрязнен это просто тест-драйв)
pdfjs-Расс библиотека содержит части для построения просмотра PDF. Вы можете использовать PDFPageView для рендеринга всех страниц. На основании 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>Спасибо, что предоставили фрагмент рабочего кода по мере необходимости. – Gathole
Вот мое взятие. Отображает все страницы в правильном порядке и работает асинхронно.
<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>
Блестящий - Спасибо! –
https://github.com/mozilla/pdf.js –
Вдохновляйтесь здесь: http://mozilla.github.io/pdf.js/web/viewer.html – kuncajs
@DekDekku kuncajs Я читая эти сайты на весь день сегодня, прежде чем я задал этот вопрос. Они не помогли –