使用版本

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'>

引入上面的链接后， 全局暴露出来PDFJS这个对象

遇到的问题

中文字体缺失

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, 在后面的演示代码里面调用 getViewport这个方法可以解决字体模糊问题

签名不能加载问题

控制台的报错信息

Warning: Unimplemented widget field type "Sig", falling back to base field type. 问题链接

把pdf.work.js下载下来， 全局搜索下AnnotationFlag.HIDDEN， 找到类型下面的代码， 把那行注释掉， 在替换掉， 相应的script

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

    warn('unimplemented annotation type: Widget signature');
    // 注释下面这行代码
    this.setFlags(AnnotationFlag.HIDDEN);

 }

整个演示代码

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