<html>
<body>
<div>
<button id="prev" onclick="goPrevious()">Previous</button>
<button id="next" onclick="goNext()">Next</button>
<span>Page: <span id="page_numo"></span>/<span id="page_count"></span></span>
<input type=text id="elNum" value=1>
</div>
<div>
<canvas id="the-canvas" style="border:0px solid black"></canvas>
</div>
<!-- Use latest PDF.js build from Github -->
<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript">
//
// NOTE:
// Modifying the URL below to another server will likely *NOT* work. Because of browser
// security restrictions, we have to use a file server with special headers
// (CORS) - most servers don't support cross-origin browser requests.
//
var url = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf';
//
// Disable workers to avoid yet another cross-origin issue (workers need the URL of
// the script to be loaded, and currently do not allow cross-origin scripts)
//
PDFJS.disableWorker = true;
var pdfDoc = null,
pageNum = 1,
scale = 0.8,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
//
// Get page info from document, resize canvas accordingly, and render page
//
function renderPage(num) {
// 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
};
page.render(renderContext);
});
// Update page counters
document.getElementById('page_numo').textContent = pageNum;
document.getElementById('page_count').textContent = pdfDoc.numPages;
sic = document.getElementById('elNum');
sic.value = pageNum;
}
crc = 1;
//
// Go to previous page
//
function goPrevious() {
if (pageNum <= 1)
return;
pageNum--;
crc = pageNum;
renderPage(pageNum);
}
//
// Go to next page
//
function goNext() {
if (pageNum >= pdfDoc.numPages)
return;
pageNum++;
crc = pageNum;
renderPage(pageNum);
}
//
// Asynchronously download PDF as an ArrayBuffer
//
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
pdfDoc = _pdfDoc;
renderPage(pageNum);
});
document.write ('Current page is '+crc);
</script>
</body>
</html>
Это код. Это простейшая версия онлайн-рендеринга PDF (pdf.js). Я работал над проектом, которому необходимо передать переменную pageNum (Current pdf page number) через url для другого скрипта для процесса. Но проблема в том, что я никоим образом не смог получить значение pageNum вне функции renderPage. Я думаю, что это вопрос Javascript Variable Scopes, но не могу понять, что не так с моей попыткой извлечь через переменную crc или через document.getElementById ('elNum'). Value ... (См. Document.write ('Текущая страница' + crc); строка в конце скрипта и поле в 8-й строке, чтобы увидеть, как я пытался получить значение).Глобальная область в переменной Javascript Не работает как ожидалось
Любой может дать мне какие-либо сведения о том, что я делаю неправильно? Страница испытания Здесь (http://jsbin.com/pdfjs-prevnext-v2/2091/edit)
Примечание: Я видел другие вопросы по этой теме, но это кажется странным случаем. На самом деле нужна помощь, и, надеюсь, кому-то это понадобится в будущем.
Да, спасибо за ваш ответ, это здорово! Но я не могу понять, как передать переменную crc через url на другую страницу для процесса, например: document.write ('Page to process is '+crc+''); Есть идеи? –
document.write - не лучший вариант для этого. Вам нужно создать функцию, которая изменяет глобальный var crc. После того, как вам понадобится динамически создать ссылку Javascript, см. Здесь пример http://stackoverflow.com/questions/9831074/dynamically-create-link-javascript –