[英]PDF.js render pdf with scrollbar
我用的是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;
...
渲染所有頁面
請記住,渲染很多頁面需要花費一些時間,但這是如何做到的。
想法:您需要在單獨的畫布元素中呈現每個頁面。
首先,在渲染期間動態創建具有特定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);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.