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

情况一:后端返回的pdf地址,粘贴到浏览器的url框中,是可以在浏览器中直接进行预览的。

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

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

方法(2)若不想重新打开浏览器页签,可以在当前页面内增加iframe标签,对要预览的pdf进行预览。iframe标签内展示的预览界面样式,与上面的方法(1)中相同,是跟随浏览器的。

情况二:后端返回的pdf地址,粘贴到浏览器的url框中,无法在浏览器中直接进行预览。(之前遇到的情况是该url在浏览器中输入后,浏览器没有显示页面,直接启动了下载)

注意:这种情况下,上述的两种方法都是无法预览的,前端的俊男靓女们务必提前确认好返回的url的情况哦!

方法(3)使用插件vue-pdf进行预览

步骤

1. 安装依赖

npm install –save vue-pdf

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

import pdf from 'vue-pdf'

3. 使用

3.1 单页pdf可以直接使用

:src="获取到的pdf地址"

3.2 多页pdf通过循环实现

html标签部分

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

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

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