vue通过url方式展示PDF的几种方法

小编最近接手的项目中有个需求,前端显示后端返回的PDF格式的文件,下面这篇文章主要给大家介绍了关于vue通过url方式展示PDF的几种方法,需要的朋友可以参考下

1.使用pdfjs-dist 插件，通过iframe标签显示

首先 npm install pdfjs-dist --save

npm直接下载插件 npm install --save pdfjs-dist@2.0.943，@2.0.943这是指定版本号，不需要指定版本的就不需要带，下载后在使用的页面直接引入。

然后直接设置pdf路径就可以直接展示，downloadUrl 是插件中的viewer.html地址，resFile是文件下载地址，到此就能正常预览PDF，组件功能也很多，如需要额外的功能也可以在viewer.js自行修改

2.使用vue-pdf插件

执行下面命令下载插件（vue-pdf是基于pdfjs-dist），并修改pacakge.json文件

        npm i pdfjs-dist@2.5.207 --save         npm i vue-pdf@4.2.0 --save         "dependencies": {                   "pdfjs-dist": "2.5.207",                   "vue-pdf": "4.2.0",           }

在使用的页面中直接引入插件，标签为就可以，路径赋值同第一种方法

3.第三种方法使用了pdfjs-dist插件，通过url实现PDF转图片显示

引入需要的插件pdfjs-dist，workerSrc(具体功能可以百度，没搞明白)

本地文件URL:

通过URL转换blob类型，然后转为base64,这块可以直接拿去用，getDay()方法可以换成自己想要的文件名，这个方法转成base64后是包含前面类型的，又处理了一下，看个人需求

fileLinkToStreamDownload(url) { let fileName = this.getDay() let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/ if (!reg.test(url)) { throw new Error('传入参数不合法,不是标准的文件链接') } else { let xhr = new XMLHttpRequest() xhr.open('get', url, true) xhr.setRequestHeader('Content-Type', `application/pdf;charset-UTF-8`) xhr.responseType = 'blob' let that =this xhr.onload = function() { if (this.status == 200) { //接受二进制文件流 var blob = this.response // that.downloadExportFile(blob, fileName); that.blobToBase64(blob).then(res => { // blob转base64 let baseArr = res.split(','); that.showPdf(baseArr[1]); }) } } xhr.send() } }, //Blob类型转BASE64 blobToBase64(blob) { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = (e) => { resolve(e.target.result); }; // readAsDataURL fileReader.readAsDataURL(blob); fileReader.onerror = () => { reject(new Error('blobToBase64 error')); }; }); }, getDay() { let time = new Date(), year = time.getFullYear(), month = time.getMonth() + 1, day = time.getDate(), timeStem = time.getTime() return `${year}/${month}/${day}/${timeStem}.pdf` },

拿到base64后，开始转图片处理：这个原理这里不多说了，也是照搬的，如果PDFJS.getDocument()获取不到pdf对象，可以考虑一下版本问题（@2.2.228亲测好用）

async showPdf(base64Val) { let pdfList = document.querySelector('.pdfList') //通过querySelector选择DOM节点,使用document.getElementById()也一样 let base64 = base64Val //获得bas464编码 let decodedBase64 = window.atob(base64) //使用浏览器自带的方法解码 let pdfCurrent = await PDFJS.getDocument({data: decodedBase64}) //返回一个pdf对象 let pages = pdfCurrent.numPages //声明一个pages变量等于当前pdf文件的页数 for (let i = 1; i <= pages; i++) { //循环页数 let canvas = document.createElement('canvas') let page = await pdfCurrent.getPage(i) //调用getPage方法传入当前循环的页数,返回一个page对象 let scale = 1;//缩放倍数，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节点的最后 } },

通过这个方法亲测可以成功转图片，但是依旧没解决图片乱码问题