使用版本

2.0.288

外鏈接引入該版本

<script src='https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/build/pdf.min.js'></script>

<script src='https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/build/pdf.worker.min.js'>

引入上面的鏈接后， 全局暴露出來(lái)PDFJS這個(gè)對(duì)象

遇到的問(wèn)題

中文字體缺失

PDFJS.cMapUrl= 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/cmaps/' // include "/"

PDFJS.cMapPacked= true // set cMapPacked = true to ignore Warning: Ignoring invalid character "121" in hex string

字體模糊

改變viewPort, 在后面的演示代碼里面調(diào)用 getViewport這個(gè)方法可以解決字體模糊問(wèn)題

簽名不能加載問(wèn)題

控制臺(tái)的報(bào)錯(cuò)信息

Warning: Unimplemented widget field type "Sig", falling back to base field type. 問(wèn)題鏈接

把pdf.work.js下載下來(lái)， 全局搜索下AnnotationFlag.HIDDEN， 找到類型下面的代碼， 把那行注釋掉， 在替換掉， 相應(yīng)的script

if(data.fieldType==='Sig') {

    warn('unimplemented annotation type: Widget signature');
    // 注釋下面這行代碼
    this.setFlags(AnnotationFlag.HIDDEN);

 }

整個(gè)演示代碼

   // set cMapUrl
    PDFJS.cMapUrl= 'https://cdn.jsdelivr.net/npm/pdfjs/dist@2.0.288/cmaps/' 
    PDFJS.cMapPacked= true 
// Loading a document.

    var loadingTask= PDFJS.getDocument(pdfPath);
    var pageSum= 0, pageCount= 0

     // listen on progress event
    loadingTask.onProgress = (e) => {
    pageCount++
    if (e.loaded=== e.total|| pageCount+ 1  >= pageSum) {
    }

    loadingTask.promise.then(function (pdfDocument) {
        let canvas= ''
        pageSum= pdfDocument.numPages
        let wrapperCanvas= document.getElementById('canvas_wrapper')
        for (let i= 0; i< pdfDocument.numPages; i++) {
            canvas+= `<canvas id="pdf_canvas_${i}">`
        }
        wrapperCanvas.innerHTML= canvas
       for (let i= 0; i< pdfDocument.numPages; i++) {
          pdfDocument.getPage(i+ 1).then(function (pdfPage) {
// Display page on the existing canvas with 100% scale.
                var viewport= pdfPage.getViewport(2.0);
                var canvas= document.getElementById(`pdf_canvas_${i}`);
                canvas.width= viewport.width;
                canvas.height= viewport.height;
                var ctx= canvas.getContext('2d');
               var renderTask= pdfPage.render({
                   canvasContext: ctx,
                  viewport: viewport
               });
              return renderTask.promise;
           });
        }
     }).catch(function (reason) {
      console.error('Error: ' + reason);
    })