位置: IT常识 - 正文
vue通过url方式展示PDF方法总结(vue通过url访问单个页面)
编辑：rootadmin推荐整理分享vue通过url方式展示PDF方法总结(vue通过url访问单个页面)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue如何访问外部url,vue通过url访问单个页面,vue_app_url,vue中url存在的两种方式,vue url-loader,vue url,vue url,vue url-loader,内容如对您有帮助，希望把文章链接给更多的朋友！
最近vue项目中遇到预览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", }
在使用的页面中直接引入插件，标签为<pdf>就可以，路径赋值同第一种方法
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 //上一篇：Vue3 项目中使用setup()函数报错，script setup cannot contain ES module exports(vue3使用教程)
下一篇：VScode常用快捷键、(vscodehtml快捷键)
