pdfjs-dist的开发时遇到的问题

2,336 阅读1分钟

1.pdfjs-dist默认渲染的时候不显示签名,需要将源码中不显示签名的部分注释掉

image.png

2.不支持ie浏览器,需要修改源码,使其支持ie浏览器,同时,安装pdfjs-dist必须要安装相对应的版本,当前版本:2.0.489,(不同版本有些api的使用就不一样了)。将源码下载下来放在静态资源中,文件:,代码就直接引用本地的资源,代码如下:

      // 设置pdf占位的宽高 采用视口宽度-20px 高度 - 40px  默认(宽,高) = (900, 800)
      const PdfViewerDom = document.getElementById('PdfViewer')
      const defaultW = (PdfViewerDom && PdfViewerDom.offsetWidth) - PageMarginVertical || DefaultPageWidth
      const defaultH = (PdfViewerDom && PdfViewerDom.offsetHeight) - PageMarginHorizontal || DefaultPageHeight
 
 
      return import('pdfjs-dist').then(PDFJS => {
        // PDFJS.GlobalWorkerOptions.workerSrc = '/static/pdf.woker.min.js'
 
        return PDFJS.getDocument({
          url: this.url,
          // workerSrc: '',
          cMapUrl: `./static/cmaps/`,
          cMapPacked: true
        })
          .then(async PDF => {
            // this.total = PDF.numPages
            this.pdfSource = PDF
            // 创建个页码数组,用于存放解析出来的页码,因为this.pagesArr是渲染使用的数组,如果频繁操作的话性能和效果会很差,放到pdf初始化后再对this.pagesArr进行赋值
            const pagesArr = []
            for (let i = 0; i < PDF.numPages; i++) {
              pagesArr.push({
                pageNum: i + PageStep,
                width: defaultW,
                height: defaultH
              })
            }
 
            return {
              total: PDF.numPages,
              pages: pagesArr
            }
          })
          .catch(err => {
            console.log(err)
            console.error(err)
          })
      })
    }

3.ie10不支持 setDragImage

image.png判断存在setDragImage才执行,目前不影响使用

4.pdf上有一些特殊字体不显示需要配置 cMapUrl ,官网上找或者直接下载到本地放在静态资源中