前端使用pdfJs预览文件报错

一、前端使用pdfJs文件预览pdf文件在pc上报错一般是下载依赖包版本不对

首先是依赖包版本

npm i pdfjs-dist@2.2.228

其次是引入

import * as pdfjsLib from 'pdfjs-dist'

import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker

二、附送预览文件代码

let url = '请求文件地址'

axios({

url,

method:'get',

responseType:'blob'

})

.then(res=>{

this.url = window.URL.createObjectURL(res.data)

this.getNumPages()
})

getNumPages(){

const url = this.url

const canvas = document.getElementById("pdf-canvas”);

const context = canvas.getcontext("2d”)

pdfjsLib.getDocument(url)promise.then(pdf=>{

this.numPages = pdf.numpages; //获取pdf页码

return pdf.getPage(this.page)}）

.then(page =>{

const viewport =page.getViewport({ scale:2 }); //scale越大 精度越高，记得给父元素一个固定宽canvas.width = viewport.width

canvas.height= viewport.height

const renderContext={

canvasContext:content,

viewport:viewport

}

page.render(renderContext)

}).cathc(err=>{

//关闭loading

})

三、Html代码

            <canvas id='pdf-canvas'></canvas>