vue中pdf预览组件_pdf 在线预览之 vue-pdf插件

vue-pdf

支持到ie11

npm安装:npm install --save vue-pdf

组件template:

v-if="pdfSrc"

:src="pdfSrc"

:page="currentPage"

@num-pages="pageCount=$event"

@page-loaded="currentPage=$event"

@loaded="loadPdfHandler"

>

上一页

{{currentPage}} / {{pageCount}}

@click="changePdfPage(1)"

:class="{grey: currentPage==pageCount}"

>下一页

import pdf from "vue-pdf";

export default {

name: "Pdf",

components: {

pdf

},

props: ["dochref", "doctype"],

watch: {

dochref(val) {

console.log("pdfSrc");

console.log(val);

this.pdfSrc = val;

},

pdfSrc(val) {},

doctype(typeval) {

this.typeValue = typeval;

}

},

data() {

return {

typeValue: "",

pdfSrc: "",

currentPage: , // pdf文件页码

pageCount: , // pdf文件总页数

numPages: ,

activeIndex:

};

},

methods: {

// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页

changePdfPage(val) {

if (val === && this.currentPage > ) {

this.currentPage--;

}

if (val === && this.currentPage < this.pageCount) {

this.currentPage++;

}

},

// pdf加载时

loadPdfHandler(e) {

this.currentPage = ; // 加载的时候先加载第一页

}

},

mounted: function() {

this.pdfSrc = "";

this.pdfSrc = this.dochref;

}

};

自己的页面中引用

v-if="docInfo.type == 'pdf'"

:doctype="docInfo.type"

:dochref="docInfo.href"

>

import showPdf from "./show-pdf-word/show-pdf";

export default {

name: 'HelloWorld',

components: {

showPdf

},

data () {

return {

msg: 'Welcome to Your Vue.js App',

docInfo: {

type: "pdf",

href: "http://125.35.91.158:8099/group1/M00/02/AF/wKgAplxrloqAdR6NAAcOcVILFv0518.pdf"

},

}

},

mounted(){

}

}

效果如下

如果有电子签章 是显示不出来的

需要改动源码 注释掉type判断

效果如下  这样章就出现了~~~

实战动态PDF在线预览及带签名的PDF文件转换

开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3 ...

Office在线预览及PDF在线预览的实现方式史上最全大集合

Office在线预览及PDF在线预览的实现方式大集合 一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office2007以上版本的一个PDF插件SaveAsPD ...

动态PDF在线预览

实战动态PDF在线预览及带签名的PDF文件转换 开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是 ...

Aspose office (Excel&comma;Word&comma;PPT)&comma;PDF 在线预览

前文: 做个备份,拿的是试用版的 Aspose,功能见标题 代码: /// /// Aspose office (Excel,Word,PPT),PDF 在线预览 // ...

Office在线预览及PDF在线预览的实现方式大集合

一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office2007以上版本的一个PDF插件SaveAsPDFandXPS.exe可以导出PDF文件,然后再利用免 ...

Office在线预览及PDF在线预览的实现方式

原文链接:http://www.officeweb365.com/officetoview.html 一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office ...

&lbrack;Asp&period;net&rsqb;常见word，excel，ppt，pdf在线预览方案，有图有真相，总有一款适合你！

引言 之前项目需要,查找了office文档在线预览的解决方案,顺便记录一下,方便以后查询. 方案一 直接在浏览器中打开Office文档在页面上的链接.会弹出如下窗口: 优点:主流浏览器都支持. 缺点: ...

&lbrack;Asp&period;net&rsqb;常见word，excel，ppt，pdf在线预览方案&lpar;转&rpar;

引言 之前项目需要,查找了office文档在线预览的解决方案,顺便记录一下,方便以后查询. 方案一 直接在浏览器中打开Office文档在页面上的链接.会弹出如下窗口: 优点:主流浏览器都支持. 缺点: ...

java实现word转pdf在线预览(前端使用PDF&period;js；后端使用openoffice、aspose)

背景 之前一直是用户点击下载word文件到本地,然后使用office或者wps打开.需求优化,要实现可以直接在线预览,无需下载到本地然后再打开. 随后开始上网找资料,网上资料一大堆,方案也各有不同,大 ...

前端实现文件在线预览txt，pdf，doc，xls，ppt几种格式

做法就是使用iframe标签 1.text,pdf的文件预览