vue中前端实现pdf预览（含vue-pdf插件用法）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue中前端实现pdf预览（含vue-pdf插件用法）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

文章来源地址https://www.toymoban.com/news/detail-441461.html

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

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

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

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

vue中前端实现pdf预览（含vue-pdf插件用法）

方法（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预览

到了这里，关于vue中前端实现pdf预览（含vue-pdf插件用法）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！