pdfjs-dist 被坑指南

7,976 阅读1分钟

由于之前项目使用了pdfjs-dist来进行预览pdf操作。 但是我运行之后 一直

Uncaught SyntaxError: Unexpected token '<'

pdf.js:2336 Uncaught (in promise) Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".
at pdf.js:2336

翻来覆去简直要了我的狗命!

后来经过2天2夜的整改(因为之前他们说是OJbk能用的 所以代码方面我不敢乱改)

import PDFJS from 'pdfjs-dist'


  created () {
    PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')
  },
  
  
  
    async showPdf(pdfDataList,index,name) {
      console.log(PDFJS)
        let pdfList = document.querySelector(`.${name}${index}`) //通过querySelector选择DOM节点,使用document.getElementById()也一样
        pdfList.innerHTML = ""
        for(let value of pdfDataList){ //遍历后台传过来的pdfDataList
          let base64 = value.fileValue //获得bas464编码
          let decodedBase64 = atob(base64) //使用浏览器自带的方法解码
          let pdf = await PDFJS.getDocument({data: decodedBase64}) //返回一个pdf对象
          let pages = pdf.numPages //声明一个pages变量等于当前pdf文件的页数
          for (let i = 1; i <= pages; i++) { //循环页数
            let canvas = document.createElement('canvas') 
            let page = await pdf.getPage(i) //调用getPage方法传入当前循环的页数,返回一个page对象
            let scale = 1//缩放倍数,1表示原始大小
            if(name === 'list'){
              scale = 0.1//缩放倍数,1表示原始大小
            }else{
              scale = 2//缩放倍数,1表示原始大小
            }
            let viewport = page.getViewport(scale)
            let context = canvas.getContext('2d') //创建绘制canvas的对象
            canvas.height = viewport.height //定义canvas高和宽
            canvas.width = viewport.width
            let renderContext = {
              canvasContext: context,
              viewport: viewport
            };
            await page.render(renderContext)
            canvas.className = 'canvas' //给canvas节点定义一个class名,这里我取名为canvas
            pdfList.appendChild(canvas) //插入到pdfList节点的最后
          }
        }
      },

再删除了N次 node包还是不成功的情况了 终于意识到可能是版本问题 于是将版本改为
npm install pdfjs-dist@2.2.228 总算是出现了我要的画面 出现类似情况的大兄弟可以使用2.2.228这个版本比较可靠 为啥版本高了不兼容低版本 很难过呜呜呜呜呜!