由于之前项目使用了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这个版本比较可靠
为啥版本高了不兼容低版本 很难过呜呜呜呜呜!