一:如何控制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:显示效果如下:


转换后,如上图



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

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信