1
我有一个函数,当单击一个按钮时调用并从servlet中加载一个文档。然而,这应该是工作的方式是它加载一个多页文档,我有一个下一个/上一个按钮,我发现了pdf.js网站。pdf.js查看器不正确地存储图像数据
发生了什么事情是,当我加载文档并查看文档时,然后单击以打开另一个文档,当我点击下一个/上一个时,它仍然在浏览较早的文档。
例如,我最初将2页文档加载到查看器中。我可以点击next/previous,像往常一样浏览这个文档的页面。然后,我点击一个按钮来查看下一个文档,这是一个3页的文档。我可以点击下一页查看3页,但是当我点击上一页时,它会回到之前我最初加载的文档。
下面是代码:
function getDocument(){
var request = $.ajax({
url: "IndexServlet",
type: "POST",
data: {
token: "go",
fileName: $("#fileName").val(),
batchName: $("#folderName").val()
}
});
request.done(function(data) {
var pdfAsArray = convertDataURIToBinary(data);
function convertDataURIToBinary(dataURI) {
var base64 = dataURI;
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for(var i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
PDFJS.disableWorker = true;
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
/**
* 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
* finished. 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(pdfAsArray).then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
// Initial/first page rendering
renderPage(pageNum);
});
});
}
难道您取消绑定document.getElementById('next')。addEventListener('click',onNextPage);听众? – async5
这似乎是这里发生的事情,它几乎就像前面的按钮“功能”只适用于获取文档的第一次迭代 –