vue-pdf实现pdf文件在线预览

1. 前言

PDF文件在线预览的功能相信大家都是有遇到过的, 但在我平时的项目中, 公司提供了相应的插件, 但是在h5等其他项目中, 我们还是只能靠自己呀! 今天就大概说一下 vue-pdf 这个组件, 大部分的需求还是可以满足的

2. 安装

npm install --save vue-pdf

3. pdf 页面显示

3.1 code

<template><div><pdf ref="pdf":src="url"></pdf></div>
</template>

<script>
import pdf from 'vue-pdf'
export default {components:{pdf},data(){return {url:"http://image.cache.timepack.cn/nodejs.pdf",}}
</script>

3.2 展示

这个时候, pdf文件已经显示在页面上了, 但是我们可以发现, 这仅仅显示了pdf 文件的第一页

4. pdf 显示多页

4.1 code

<template><div><pdfref="pdf"v-for="i in numPages" :key="i"  :src="url" :page="i"></pdf></div>
</template>

<script>
import pdf from 'vue-pdf'
export default {components:{pdf},data(){return {url:"http://image.cache.timepack.cn/nodejs.pdf",numPages: null, // pdf 总页数}},mounted() {this.getNumPages()},methods: {# 计算pdf页码总数getNumPages() {let loadingTask = pdf.createLoadingTask(this.url)loadingTask.promise.then(pdf => {this.numPages = pdf.numPages}).catch(err => {console.error('pdf 加载失败', err);})},}
</script>

4.2 展示

这时候我们可以通过滑动预览pdf的内容, 但是这种方式是一下子把pdf的内容都加载出来, 页数一多, 浏览器直接卡在加载的状态, 体验感太差,所以我们可以考虑按页加载

5. pdf 按页预览

5.1 code

<template><div><el-button-group><el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button><el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group><div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div><pdf:page="pageNum":src="url"@progress="loadedRatio = $event"@num-pages="pageTotalNum=$event" ></pdf></div>
</template>

<script>
import pdf from 'vue-pdf'export default {name: 'Pdf',components: {pdf,},data() {return {url: 'http://image.cache.timepack.cn/nodejs.pdf',pageNum: 1,pageTotalNum: 1, # 总页数loadedRatio: 0, # 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了}},methods: {// 上一页prePage() {let page = this.pageNumpage = page > 1 ? page - 1 : this.pageTotalNumthis.pageNum = page},// 下一页nextPage() {let page = this.pageNumpage = page < this.pageTotalNum ? page + 1 : 1this.pageNum = page}}
}
</script>

5.2 展示

至此, 大概效果就如上所示

6. 更多内容

npm vue-pdf

来自：vue-pdf实现pdf文件在线预览 - 简书

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

vue docx-preview实现docx文件在线预览
之前一般做项目进行文件浏览的时候基本都是用的window.open+url的形式打开文件,进行浏览操作的,但是这种打开方式只能够在线浏览如jpg.png.pdf这类文件,对于文档类型docx这种则是用 ...
文件被损坏 java_使用PDF.JS实现pdf文件在线预览时，报文件被损坏的错误
首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 ?file=" width="1024" height=" ...
vue 实现pdf文件在线预览
PDF文件在线预览的功能相信大家都是有遇到过的,这边有两种实现方法,大家可以借鉴参考下第一种,使用vue-pdf 安装 npm install --save vue-pdf 页面代码 <tem ...
java flexpaper_java web word文件 pdf文件在线预览源码(flexpaper)
[实例简介]java web word文件 pdf文件在线预览源码经过测试 [实例截图] [核心代码] BrowsenOnline html, body{ height:100%; } body { ...
文件在线预览图片 PDF Excel Word
1.前端实现pdf文件在线预览功能方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 <ah ...
java将office文档,word,ppt,pdf文档转换成swf文件在线预览
java将office文档pdf文档转换成swf文件在线预览第一步,安装openoffice.org openoffice.org是一套sun的开源office办公套件,能在widows,linux ...
OFD文件、pdf文件相互转换、ofd文件在线预览
文章目录一.在线预览 1. api使用 2. 案例 3. 效果二.ofd转odf 2.1. api使用 2.2. 参考案例三.odf转ofd 3.1. api使用 3.2. 参考案例 3.3. ...
文件在线预览doc，docx转换pdf（一）
文件在线预览doc,docx转换pdf(一) 前言文档转换是一个是一块硬骨头,但是也是必不可少的,我们正好做的知识库产品中,也面临着同样的问题,文档转换,精准的全文搜索,知识的转换率,是知识库产品的 ...
html5 pdf.js 使用方法,PDF 文件在线预览(pdf.js 使用教程)
因项目开发需要在线展示 PDF文件,为解决 PDF文件在浏览器打开后电子签章.电子签名等展示不全且部分浏览器兼容问题特利用pdf.js解决该问题: pdf.js框架为HTML5,无需任何本地支持,兼 ...