One: How to controlpdf zoom
var viewport = page.getViewport(scale); parameter:scale,0 reach1 Decimal between, such as0.8, such as100% display, fill in1
, Refer to the following var viewport = page.getViewport(1);
Partial code reference:
var pdfDoc = null, pageNum = 1, pageRendering = false, pageNumPending = null,
scale =1,// Scaling ratio 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: Display effect

ps: Obviously, even if it is100% display, Still relatively small, vague

3:dpi Reasons for
As described above,pdf Display small, Not clear enough. One important reason is that the defaultdpi by96, Then the web page generally usesdpi by72.
specificdpi , Please search baidu, No more explanation here.
Code adjustment:
var CSS_UNITS = 96.0/ 72.0; var renderContext = { transform: [CSS_UNITS, 0, 0,
CSS_UNITS,0, 0], canvasContext: ctx, viewport: viewport }; transform: It's the parameters related to scaling
The completion code of the web page is as follows:
<html> <head> <title>pdf.js Exhibition1, Previous page, next page</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,// Scaling ratio 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: The display effect is as follows:


After conversion, Pictured above



Before conversion, Pictured above, As a contrast