Я начал создавать PDF-просмотрщик с помощью библиотеки pdf.js. Мне очень понравилось, насколько простыми были некоторые примеры, поэтому я использовал пример PREV/NExt, чтобы начать с моего зрителя:
https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html
Я хотел добавить увеличение и уменьшение масштаба и нашел этот простой просмотрщик, который хотел бы моделировать мой зум и прокручивать:
https://github.com/zedr/simple-pdf-reader.js/blob/master/viewer.js
Вот мой html для моего index.html:
<div class="row">
<div class="col-md-4">
<button class="btn btn-primary" id="prev"><i class="fa fa-level-up fa-lg"></i></button>
<button class="btn btn-primary" id="next"><i class="fa fa-level-down fa-lg"></i></button>
</div><div class="col-md-4">
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
<div id="pdf-controls">
<button id="zoom_minus" onclick="url.zoomMinus()"
oncontextmenu="return false;" class="btn btn-primary">-</button>
<button id="zoom_plus" onclick="url.zoomPlus()"
oncontextmenu="return false;" class="btn btn-primary">+</button>
<div id="pdf-stats">
<p>
<span id="pdf-page-zoom">n/a</span> <span>%</span>
</p>
</div>
</div>
</div><div class="col-md-4 pull-right">
<a href="sample.pdf" class="btn btn-primary"><i class="fa fa-arrows-alt fa-lg"></i></a>
<a href="sample.pdf" class="btn btn-primary" download><i class="fa fa-cloud-download fa-lg"></i></a>
</div>
</div>
<br><br>
<center>
<div style="overflow: scroll" id="pdfviewer">
<canvas id="pdfcanvas" style="border:1px solid black; width: 100%"></canvas>
</div>
</center>
и это мой javascript для моего viewer.js:
<script id="pdfviewer">
//
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
//
var url = 'sample.pdf';
//
// Disable workers to avoid yet another cross-origin issue (workers need
// the URL of the script to be loaded, and dynamically loading a cross-origin
// script does not work).
//
// PDFJS.disableWorker = true;
//
// In cases when the pdf.worker.js is located at the different folder than the
// pdf.js one, or the pdf.js is executed via eval(), the workerSrc property
// shall be specified.
//
PDFJS.workerSrc = 'pdf.worker.js';
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1.5,
canvas = document.getElementById('pdfcanvas'),
ctx = canvas.getContext('2d');
var camera = {
x: 0,
y: 0,
scale: 1,
};
/**
* Get page info from document, resize canvas accordingly, and render page.
* @param num Page number.
*/
function renderPage(num) {
pageRendering = true;
// Using promise to fetch the page
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function () {
pageRendering = false;
if (pageNumPending !== null) {
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
// Update page counters
document.getElementById('page_num').textContent = pageNum;
}
/**
* If another page rendering in progress, waits until the rendering is
* finised. Otherwise, executes rendering immediately.
*/
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
/**
* Displays previous page.
*/
function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);
/**
* Displays next page.
*/
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
/**
* Asynchronously downloads PDF.
*/
PDFJS.getDocument(url).then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
// Initial/first page rendering
renderPage(pageNum);
});
//The PdfRead object is a browser-aware reading device that the User will
//manipulate to read the page. Basically, a wrapper around the PdfView object.
var frame = document.getElementById('pdfcanvas');
var zoom_widget = document.getElementById('pdf-page-zoom');
// Keep track of certain values inside the most interesting nodes of the DOM
var state = {
get ctop () { return frame.lastChild.offsetTop },
get ftop () { return frame.scrollTop },
get fsh () { return frame.scrollHeight },
get fh () { return frame.offsetHeight },
};
// Decrease the Zoom, acting on the scale
this.zoomMinus = function (val) {
doc.page.scale -= (val) ? val : 0.25;
zoom_widget.innerText = doc.page.scale * 100;
};
// Increase the Zoom, acting on the scale
this.zoomPlus = function (val) {
doc.page.scale += (val) ? val : 0.25;
zoom_widget.innerText = doc.page.scale * 100;
};
// Controller: monitor for frame scroll events and advance page rendering
frame.onscroll = function () {
var test = (state.fsh - (state.fh + state.ftop));
if (test < 0 && doc.page.head < doc.page.last) {
doc.page.number++;
}
};
// Init the widgets
zoom_widget.innerText = doc.page.scale * 100;
</script>
Я попытался интегрировать два и добавить масштаб к моему средству просмотра, но я не добился успеха. Мои знания javascript довольно ограничены по сравнению со сложностью pdf.js, но мне было интересно, может ли кто-нибудь помочь мне с моей проблемой. любые советы, руководство, код будут оценены.