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标签部分


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

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

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

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

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

pdf预览在vue项目中的使用兼容ie浏览器
最近做项目有需求需要pdf在线预览并支持下载,而且还要兼容ie浏览器,之前又是使用过vue-pdf插件在chrome上没有问题但是在ie上不兼容.最后使用了pdf.Js这个原生库,虽然网上有许多使用教 ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
vue-pdf vue中导入文件并预览
暂时是导入后根据文件流预览之后上传后台哪url地址应该就是<pdf :src="url" 创建参考 https://www.cnblogs.com/mizuki- ...
vue中使用Vue-pdf在线预览
下载 npm i vue-pdf 引入(在所需要预览的页面) <script>import axios from 'axios'import pdf from 'vue-pdf'impor ...
VUE-PDF VUE的PDF预览组件
VUE-PDF VUE的PDF预览组件 vue.js pdf viewer 安装 npm install --save vue-pdf 示例 <template><pdf src=& ...
react pdf预览
pdf预览很强大的插件是pdf.js,这是原生js实现的插件,能兼容大部分浏览器,对于它的使用方法,在传统的web项目中就是viewer.html?file="文件名称",但是对于 ...
基于vue-pdf的PDF预览，缩放、旋转、拖拽、下一页
先说一下利用iframe打开pdf效果如下代码如下这种感觉更简单,打印各方面都可以 <el-dialogv-if="showPdf":visible.sync=" ...
vue项目实现前端预览word和pdf格式文件
最近做vue项目遇到一个需求,就是前端实现上传word或pdf文件后,后端返回文件对应的文件流,前端需要在页面上展示出来.word预览简单一些,pdf预览我试过pdfjs,vue-pdf总是报各种奇奇 ...
Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览说明 PDF.JS 代码实现预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...

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

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

最新文章

热门文章