vue 使用 vue-pdf 实现pdf在线预览

1、安装

npm install --save vue-pdf

2、引用

import pdf from 'vue-pdf'
export default {components: { pdf },data() {return {pdfUrl: "pdf的路径" ,// 本地获取或者在线请求获取};},
};

3、页面使用

<div class="content"><pdfref="pdf":src="pdfUrl" ></pdf></div>

4、发现问题，只能显示一页,显示所有页面

<div class="content"><pdfref="pdf"v-for="item in numPages":key="item":page="item":src="pdfSrc" ></pdf>
</div>import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {components: { pdf },data() {return {numPages: "",  // pdf 文件总页数pdfSrc: "",pdfUrl: "", // pdf 文件的路径，可以是本地路径，也可以是在线路径};},mounted: {this.getTitlePdfurl()},methods: {getTitlePdfurl(){this.pdfSrc = pdf.createLoadingTask({url: this.pdfUrl},CMapReaderFactory);//解决中文乱码问题this.pdfSrc.promise.then(pdf => {this.numPages = pdf.numPages}).catch(err => {console.error('pdf 加载失败', err)})},  }
};

5、想一页一页的翻加载

<div class="content"><pdfref="pdf":page="numPages":src="pdfUrl":rotate="pageRotate" @progress="loadedRatio = $event"@page-loaded="pageLoaded($event)" @num-pages="pageTotalNum=$event" @error="pdfError($event)" @link-clicked="page = $event" ></pdf><div class="options-btn"><el-button  @click="prePage" > 上一页</el-button><el-button  @click="nextPage" > 下一页</el-button><el-button  @click="clockwise" > 顺时针</el-button><el-button  @click="antiClockwise" > 逆时针</el-button></div>
</div>

import pdf from 'vue-pdf'
export default {components: { pdf },data() {return {numPages: 1, // 当前页pdfUrl: "http://....xx.pdf", //pageRotate: 0, // 旋转的角度loadedRatio: 0, // 加载进度curnumPages: 0, // 加载时的回调当前页pageTotalNum: 1, // 总的页数};},methods: {prePage() { // 上一页var page = this.numPagespage = page > 1 ? page - 1 : this.pageTotalNumthis.numPages = page},nextPage() { //下一页let page = this.numPagespage = page < this.pageTotalNum ? page + 1 : 1this.numPages = page},  clockwise() { // 页面顺时针翻转90度。this.pageRotate += 90},antiClockwise() {   // 页面逆时针翻转90度。this.pageRotate -= 90},pageLoaded(e) { // 加载时的回调this.curnumPages = e},pdfError(error) { // 错误的时候回调console.error(error)},}
};

写在最后：
以上就是一般使用vue-pdf的一些使用写法，前端小弟正在努力记录ing~

vue 使用 vue-pdf 实现pdf在线预览相关推荐

前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
pdf,word,ppt在线预览
pdf,word,ppt在线预览先展示下效果 pdf跟ppt的预览效果: word的预览效果实现过程-只需一个iframe标签即可详细介绍请看这里 <iframe src="ht ...
使用libreoffice将office文档（word、ppt、excel）转pdf，实现在线预览
项目需要实现局域网预览office文档的功能,之前做的在线项目,都是将文档上传到cdn,利用cdn自带的转码功能,把文档转换为pdf,然后再用pdf.js实现在线预览. 因为是局域网,没有办法上传到c ...
【aspose】 word/excel转pdf，实现在线预览文件功能
项目场景: 需求描述:上传附件后,可实现在线预览,这里就会存在一个问题,很多附件的类型是没法在线预览的,点击就会下载.除pdf/jpg/jpeg等,于是技术方案定,将word/excel等类型的文件转 ...
前端实现docx、pdf格式文件在线预览
介绍在业务中,如果遇到文档管理类的功能,会出现需要在线预览的业务需求,本文主要是通过第三方库来实现文档预览功能,并将其封装成preview组件 docx docx的实现需要使用docx-previe ...
office转pdf实现office在线预览（aspose）
office转pdf实现office在线预览(aspose) 1. jar包地址 2. 将jar包安装到本地 3. pom文件添加依赖 4. license.xml ① license.xml存放路径 ...
文档在线预览（四）使用js前端实现word、excel、pdf、ppt 在线预览
文章目录实现方案一.docx文件实现前端预览 1.docx-preview 2.Mammoth 二.PDF文件实现前端预览 1.pdf.js 2.pdfobject.js 3.vue-pdf 4. ...
利用aspose实现ppt,doc,docx,pptx,xlsx,xls,txt,图片类型转pdf以及实现在线预览（可用于window和linux上，无水印）
声明:对于本文章上的这个aspose相关的jar,切勿用于商业用途,后果我概不负责 1,先准备jar 链接:jar连接提取码:bccn 下载后选中自己合适的我使用的jar,而我的环境是jdk1.8 ...
c# asp.net Pdf 转换图片在线预览发布到iis中问题最终解决篇—_—！
关于:excel和word 预览请看我的博文: excel和word 在线预览详细配置及代码使用Adobe 组件在本机vs中调试成功发布到iis中在代码中涉及到剪贴板的地方 ...
springboot整合pdf.js实现在线预览pdf文件
今天在项目中实现pdf在线预览的功能的如图, 通过百度,查询合适的方法,最为简单的的是通过pdf.js的插件在前台展示.本以为是挺容易实现的,但都有莫名其妙的错误. 第一步:下载源码https://g ...

vue 使用 vue-pdf 实现pdf在线预览

vue 使用 vue-pdf 实现pdf在线预览

vue 使用 vue-pdf 实现pdf在线预览相关推荐

最新文章

热门文章