pdfjs 参数_pdf.js实战,含水印、电子签章解决方案

项目涉及到移动端查看电子合同的问题,前前后后试了三种方案,真是一步一个坑,三种方案各有各的优点,不水,直接上代码,按照自己的需求选择。

一、pdf-vue

直接使用vue-pdf插件,核心的代码是pdf.js,只不过就是自己封装了一下,优点是方便快捷,缺点是无法加载电子签章。

1、npm install pdf-vue --save

2、template代码

// 上一页

Preview

{ {currentPage}} / { {pageCount}}

// 下一页

Next

// 自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了

:src="src" // src需要展示的PDF地址

:page="currentPage" // 当前展示的PDF页码

@num-pages="pageCount=$event" // PDF文件总页码

@page-loaded="currentPage=$event" // 一开始加载的页面

@loaded="loadPdfHandler"> // 加载事件

3、js代码

import pdf from 'vue-pdf'

export default {

components: {pdf},

data () {

return {

currentPage: 0, // pdf文件页码

pageCount: 0, // pdf文件总页数

fileType: 'pdf', // 文件类型

src: '', // pdf文件地址

}

},

created: {

// 有时PDF文件地址会出现跨域的情况,这里最好处理一下

this.src = pdf.createLoadingTask(this.src)

}

method: {

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

changePdfPage (val) {

// console.log(val)

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

t

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值