pdf.js 入门使用指南2-显示篇 - 好文

一：如何控制pdf缩放
var viewport = page.getViewport(scale); 参数：scale,0到1之间的小数，比如0.8，比如100%显示，填写1
，参考如下 var viewport = page.getViewport(1);
部分代码参考：
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);
2：显示效果

ps：很显然，即便是100%显示，仍然比较小，模糊

3：dpi 的原因
如上所描述，pdf显示小，不够清晰。有一个重要的原因是默认dpi为96，然后网页一般使用dpi为72。
具体dpi ,请搜索百度，这里不再解释。
代码调整：
var CSS_UNITS = 96.0/ 72.0; var renderContext = { transform: [CSS_UNITS, 0, 0,
CSS_UNITS,0, 0], canvasContext: ctx, viewport: viewport }; transform：就是和缩放相关的参数
网页完成代码如下：
<html> <head> <title>pdf.js展示1，上一页，下一页</title> <meta charset="UTF-8"> </head> <
h1>PDF.js Previous/Next example</h1> <div> <button id="prev">Previous</button> <
button id="next">Next</button> <span>Page: <span id="page_num"></
span> / <span id="page_count"></span></span> </div> <canvas id="the-canvas"></
canvas> <script src="js/pdf.js"></script> <script src="js/pdf.worker.js"></
script> <script> var url = '/pdf/doc/demo1.pdf'; 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);var CSS_UNITS = 96.0 / 72.0; canvas.height =
Math.floor(viewport.height * CSS_UNITS); canvas.width = Math
.floor(viewport.width * CSS_UNITS) ;// Render PDF page into canvas context var
renderContext = { transform: [CSS_UNITS,0, 0, CSS_UNITS, 0, 0], 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 <= 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(url).then(function(pdfDoc_) { pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages; //
Initial/first page rendering renderPage(pageNum); }); </script> </html>
4：显示效果如下：

转换后，如上图

转换前，如上图，作为对比

热门工具换一换