pdfjs預覽pdf文件的兩種方式（可複製）

1.以圖片形式進行展現：html

version：採用1.x版本，2.0版本會有字體顯示不完整的問題：參考git

這裏使用1.8.170github

<script th:src="@{/pdfjs/build/pdf.js}"></script>//導入pdfjs

<div class="grid-content bg-purple" style="height: 660px;">
<div align="center">
  <el-button id="prev" type="primary">上一頁</el-button>
   <span>頁數: <span id="page_num"></span> / <span id="page_count"></span></span>
    <el-button id="next" type="primary">下一頁</el-button>
</div>
<div align="center">
 <canvas id="the-canvas" style="border:1px solid black;width:100%;"></canvas>
</div>
</div>

 pdfView(row) { PDFJS.workerSrc =[[@{/pdfjs/build/pdf.worker.js}]];//加載核心庫
                PDFJS.cMapUrl = [[@{/pdfjs/web/cmaps/}]]; PDFJS.cMapPacked = true; var url = 'http://****server***:11087/ciserveradmin/invoicePrint/d?invoiceId=10002047'; // var url = [[@{/invoicePrint/d?invoiceId}]]+'='+row.invoice_id;
                var pdfDoc = null, pageNum = 1, pageRendering = false, pageNumPending = null, scale = 2.6, //清晰度不清晰 可調整該值
                    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 = pageNum; } /** * 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); }); }

2.採用pdfjs內部的viewer.html進行調用，可進行復制粘貼打印下載等功能web

這裏若是涉及到pdf源文件跨域的話，可修改viewer.js文件，註釋canvas

var fileOrigin = new URL(file, window.location.href).origin; /* if (fileOrigin !== viewerOrigin) { throw new Error('file origin does not match viewer\'s'); }*/

<div class="grid-content bg-purple" style="height: 660px;">
   <iframe width="100%" height="100%" id="the-canvas" style="border:1px solid black;width:100%;"></iframe>
 </div>

pdfView(){ var pdfurl = 'http://**server**:8080/ciserveradmin/invoicePrint/d?invoiceId=1000247'; var url =[[@{/pdfjs/web/viewer.html?file=}]]+encodeURIComponent(pdfurl);
                // var url = [[@{/invoicePrint/d?invoiceId}]]+'='+row.invoice_id;
                $('#the-canvas').attr('src',url); },