|
通过设置 getViewport 函数的scale 参数，可以设置控制放大和缩小比例 1：函数定义 
通过查看源码，这个函数有两个参数 1.1 :scale 小数型，1.0 表示100%，0.5 ,表示缩放50% 1.2 roate ,旋转
1.2 代码测试，page.getViewport(0.8),显示如下图所示 
1.3 代码测试，page.getViewport(1.3)显示如下图所示，130% 显示 
1.4 旋转90度，放大1.5倍 page.getViewport(1.5,90)  1.5 应为代码比较简单，其他不再做解释了，放出完整的测试代码
pdf.js缩放
pdf展示
Previous
Next
放大
缩小
; ;
Page: /
var url = 'doc/demo1.pdf';
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 0.8,//放大系数
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 = num;
}
/**
* 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
scale -= 0.1;
queueRenderPage(pageNum);
});
/**
* 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);
});
|