Vue-pdf实现在线预览PDF文件

前言

在大多数项目中都会遇到在线预览PDF文件，项目使用的是element ui，使用vue-pdf实现。

安装依赖

npm install --save vue-pdf

实现

<template><div><el-row><el-button @click="onPreview" size="small">预览</el-button></el-row><el-dialog title="预览合同附件" :visible.sync="viewVisible" center width="60%" @close='closePreview'><el-row :gutter="20"><span>共{{pageCount}}页， 当前第 {{pdfPage}} 页 </span><el-button type="text" size="mini" @click.stop="previousPage">上一页</el-button><el-button type="text" size="mini" @click.stop="nextPage">下一页</el-button></el-row><div><pdf :src="src" :page="pdfPage" @num-pages="pageCount = $event" @page-loaded="pdfPage = $event" style="display: inline-block; width: 100%"></pdf></div></el-dialog></div>
</template>
<script>
import pdf from 'vue-pdf'
import store from '@/store/'
export default {components:{pdf},data(){return {viewVisible: false,src: null,pdfPage : 1,pageCount: 0,token: store.getters.access_token,}},methods:{onPreview(){this.src = pdf.createLoadingTask({url: 'http://localhost:8082/file/demo.pdf',httpHeaders: {Authorization:'Bearer '+ this.token}});this.src.promise.then(pdf => {this.viewVisible = true;});},closePreview(){this.pdfPage = 1;},previousPage(){let p = this.pdfPagep = p > 1 ? p-1 : this.pageCountthis.pdfPage = p},nextPage(){let p = this.pdfPagep = p < this.pageCount ? p+1 : 1this.pdfPage = p}}
}
</script>

效果

注意点

1、URL

url为文件地址路径

this.src = pdf.createLoadingTask({url: 'http://localhost:8082/file/demo.pdf',
});

2、设置请求头

可以通过httpHeaders来设置token等参数

 httpHeaders: {Authorization:'Bearer '+ this.token}

3、src

这点比较重要，网上很多帖子都是这样的

this.src.then(pdf => {this.viewVisible = true;
})

会报错 TypeError: this.src.then is not a function

TypeError: this.src.then is not a functionat VueComponent.onPreview (index.vue?6ced:241)at click (index.vue?aaff:261)at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)at VueComponent.handleClick (element-ui.common.js?5c96:9413)at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

正确的是这样的

this.src.promise.then(pdf => {this.viewVisible = true;
});

Vue-pdf实现在线预览PDF文件相关推荐

pdf.js在线预览PDF文件实现
pdf.js是一款功能比较强大的在线预览PDF插件,自带"打印","搜索","翻页"等功能,强大且实现方便,并且兼容性比较好(兼容ie10及 ...
网页嵌入pdf、在线预览pdf工具及插件（转）
摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...
移动端H5+vue使用vue-pdf在线预览PDF
需求是点击查看收据按钮,进入新页面直接显示收据,可以放大.缩小.旋转.下载,没有分页 1.安装 npm i vue-pdf --save 2.使用 <template><div &g ...
vue版pdf.js 在线预览pdf文件流
1.简介由于我使用的是若依版的vue前端框架(ElementUI二开),因此不知道为什么在前端配置pdf.js一直无法生效,所以换了一个思路,将pdf.js相关文件放置在后台代码中,以访问后台页面的 ...
前端（vue）js在线预览PDF、Word、Excel、ppt等office文件
js解決 window.open("https://view.xdocin.com/view?src=" + encodeURIComponent(url) + '&too ...
Vue项目实现在线预览pdf，并且可以批量打印pdf
最近遇到一个需求,就是要在页面上呈现pdf内容,并且还能用打印机批量打印pdf,最终效果如下: 当用户在列表页面,勾选中两条数据后,点击"打印表单"按钮之后,会跳到如下的预览页面: ...
spring boot2.X word在线预览 pdf.js
最近公司项目需求需要在线预览word文档,并且不能在在线下载和编辑.在此记录我是如何做的. 针对word的在线预览网上大多给的解决方案就是先把word文件转成pdf,然后通过pdf.js在线预览pdf ...
前端【vue】实现文档在线预览功能，在线预览pdf、word、xls、ppt等office文件
前端江太公前端实现文档在线预览功能最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...
fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...

Vue-pdf实现在线预览PDF文件

前言

安装依赖

相关参数

实现

效果

注意点

Vue-pdf实现在线预览PDF文件相关推荐

最新文章

热门文章