1.以图片形式进行展示：

version：采用1.x版本，2.0版本会有字体显示不完整的问题：

这里使用

//导入pdfjs

　　

     
      
  
       
        上一页
          
       页数:  /     
       
        下一页
       
      
      
 
       
      
     

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进行调用，可进行复制粘贴打印下载等功能

这里如果涉及到pdf源文件跨域的话，可修改viewer.js文件，注释

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

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);            },