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

第

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

目录1.使用pdfjs-dist插件，通过iframe标签显示2.使用vue-pdf插件3.第三种方法使用了pdfjs-dist插件，通过url实现PDF转图片显示4.直接通过iframe标签总结最近vue项目中遇到预览pdf出现乱码问题，尝试了各种办法受尽折磨，以此记录一下使用的几种方法

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

首先npminstallpdfjs-dist--save

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

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

2.使用vue-pdf插件

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

????????npmipdfjs-dist@2.5.207--save

????????npmivue-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){

letfileName=this.getDay()

letreg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/

if(!reg.test(url)){

thrownewError(传入参数不合法,不是标准的文件链接)

}else{

letxhr=newXMLHttpRequest()

xhr.open(get,url,true)

xhr.setRequestHeader(Content-Type,`application/pdf;charset-UTF-8`)

xhr.responseType=blob

letthat=this

xhr.onload=function(){

if(this.status==200){

//接受二进制文件流

varblob=this.response

//that.downloadExportFile(blob,fileName);

that.blobToBase64(blob).then(res={

//blob转base64

letbaseArr=res.split(,);

that.showPdf(baseArr[1]);

xhr.send()

//Blob类型转BASE64

blobToBase64(blob){

returnnewPromise((resolve,reject)={

constfileReader=newFileReader();

fileReader.onload=(e)={

resolve(e.target.result);

//readAsDataURL

fileReader.readAsDataURL(blob);

fileReader.onerror=()={

reject(newError(blobToBase64error));