Vue显示图片（vue中前端实现pdf预览（含vue-pdf插件用法））

场景：前端需要根据后端返回的线上pdf的地址
  
  
  
  
  
  
 ，实现pdf的预览功能            。

情况一：后端返回的pdf地址 
  
  
  
  
  
 ，粘贴到浏览器的url框中 


 


 


 


 


 


 
，是可以在浏览器中直接进行预览的  
 
  
 
  
 
  
 
  
 
  
 
  。

方法（1）可以直接使用window.open（获取到的pdf地址）重新打开一个浏览器页签
 
 
 
 
 
 
，通过浏览器页签直接实现预览功能（预览页面的样式  
   
   
   
   
   
  ，根据浏览器的不同 

 

 

 

 

 

 
，会略有差异）

eg： 在Google-Chrome浏览器中的效果

方法（2）若不想重新打开浏览器页签

 

 

 

 

 

 
，可以在当前页面内增加iframe标签             ，对要预览的pdf进行预览












。iframe标签内展示的预览界面样式 
 

 
 

 
 

 
 

 
 

 
 

 
，与上面的方法（1）中相同












，是跟随浏览器的
  
  
  
  
  
  
。

<iframe :src="获取到的pdf预览地址" > </iframe>

情况二：后端返回的pdf地址                   ，粘贴到浏览器的url框中 
 
 
 
 
 
 
 
 
 
 
 
 
，无法在浏览器中直接进行预览  
  
  
  
  
  
 。（之前遇到的情况是该url在浏览器中输入后


















，浏览器没有显示页面             ，直接启动了下载）

注意：这种情况下 
 
  
 
  
 
  
 
  
 
  
 
  
，上述的两种方法都是无法预览的











，前端的俊男靓女们务必提前确认好返回的url的情况哦！

方法（3）使用插件vue-pdf进行预览

步骤

1. 安装依赖

npm install --save vue-pdf

2. 在需要的页面
  
  
  
  
  
  
 ，引入插件

import pdf from vue-pdf

 3. 使用

3.1 单页pdf可以直接使用

<pdf> :src="获取到的pdf地址" </pdf>

3.2 多页pdf通过循环实现 

html标签部分

​ <pdf v-for="item in pageTotal" :src="pdfUrl" :key="item" :page="item" > </pdf>

在mounted函数中 需要调用下述方法 获取pdf的总页数

// 获取pdf总页数 getTotal() { // 多页pdf的src中不能直接使用后端获取的pdf地址 否则会按页数请求多次数据 // 需要使用下述方法的返回值作为url this.pdfUrl = pdf.createLoadingTask(获取到的pdf地址) // 获取页码 this.pdfUrl.promise.then(pdf => this.pageTotal = pdf.numPages).catch(error => {}) }

此时页面即可正常实现pdf预览