我使用 mozilla pdf.js。我有一个代码:
<canvas id="the-canvas"/>
function displayDocument(){
PDFJS.getDocument(numberOdDocument[attachment]).then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
renderPage(pageNum);
});
}
function renderPage(num) {
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(scale, rotate);
canvas.height = '900';
canvas.width = '500';
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
}
现在我在 canvas 标签中只看到一页,但我想在我的 canvvas 中添加滚动条,并且我想使用滚动条更改页面。我该怎么做?
最佳答案
允许滚动
首先,创建一个父div来封装canvas元素:
<div>
<canvas id="the-canvas"/>
</div>
然后,通过垂直滚动设置固定大小
<div style="width:650px;height:600px;overflow-y:scroll;">...</div>
最后,您可以使用变量“scale”设置您想要的比例,但保留这些原始行:
function renderPage(num) {
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
...
呈现所有页面
请记住,呈现大量页面会花费一些时间,但这里是如何做到这一点。
想法:您需要在单独的 Canvas 元素中呈现每个页面。
首先,在渲染期间动态创建具有特定 id 的 canvas 元素:
<div id="pdf-viewer"></div>
...
function renderPage(num) {
pdfDoc.getPage(num).then(function(page) {
var canvasId = 'pdf-viewer-' + num;
$('#pdf-viewer').append($('<canvas/>', {'id': canvasId}));
var canvas = document.getElementById(canvasId);
...
最后,为每个页面调用 renderPage()
function renderAllPages() {
for (var i = 1; i <= pdfDoc.numPages; i++) {
renderPage(i);
}
}
关于javascript - PDF.js 使用滚动条渲染 pdf,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31185785/