vue移动端项目预览pdf文件(vuepdf 打开预览)

vue手机H5预览PDF支持放大、分页、添加水印、PDF下载

预览PDF【pdfh5】

1.实现效果预览2.安装插件3.pdfh5的使用1.引入插件依赖2.实例化2.1示例参数2.2options配置项参数列表2.3methods方法列表2.4on方法监听所有事件-事件名称列表2.5pdf文件流请求示例2.6pdf下载2.6相关参考文档4.完整使用代码一、实现效果预览

上下滚动和缩放可在左上角查看当前页码和总页数。右下角一键返回顶部按钮。为每个pdf页面添加图像水印。二、安装插件

pdfh5.js基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。

npm我pdfh5

三、pdfh5的使用

1、引入插件依赖

从'pdfh5'导入Pdfh5;导入'pdfh5/css/pdfh5.css';

2、实例化

this.pdfh5=newPdfh5('#pdf-content',{pdfurl:this.url,});

2.1实例化参数

2.2options配置项参数列表

2.3methods方法列表

2.4on方法监听所有事件-事件名列表

2.5pdf文件流请求示例

//实现方法1axios.get(this.url,{responseType:'arraybuffer',}).then((res)={this.pdfh5=newPdfh5('#pdf-content',{data:res.data,//pdf文件流});});//实现方法2//首先实例化this.pdfh5=newPdfh5('#pdf-content',{pdfurl:this.url,});这个.pdfh5。on('complete',function(status,msg,time){console.log('状态：'+status+',信息：'+msg+',耗时：'+time+'毫秒，总页数：'+this.totalNum);});

2.6pdf下载

downloadPdf(){console.log('开始下载');this.pdfh5.download();},

2.6相关参考文档

相关参考文档：vue-pdfh5-npm

四、完整使用的代码

模板divclass='m-pdf'divid='pdf-content'/div/div/templatescriptimportPdfh5from'pdfh5';导入'pdfh5/css/pdfh5.css';导出默认值{name:'Pdfh5',data(){return{pdfh5:null,//可以导入网络文件或本地文件pdfUrl:'',//如果导入本地pdf文件，你需要将pdf放在公用文件夹中，引用时使用绝对路径};},挂载(){this.initPdf();},methods:{initPdf(){//实例化时传入pdfh5两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf并监听相关事件//pdfh5=newPdfh5(selector,options)goto最初转到哪一页，每次设置标志pdf的一页上有水印this.pdfh5=newPdfh5('#pdf-content',{pdfurl:this.pdfUrl,goto:1,//设置pdf每页水印logo:{src:require('@/assets/images/bus/icon_head@2x.png'),x:420,y:700,width:120,height:120},});this.pdfh5.scrollEnable(true);//允许pdf滚动//监听pdf开始渲染，这样就可以获取PDF总页数this.pdfh5.on('ready',function(){console.log('总页数：'+this.totalNum);});//监听PDF加载完成事件，加载失败且渲染成功会触发this.pdfh5.on('complete',(status,msg,time)={console.log('status:'+status+',information:'+msg+'，耗时：'+时间+'毫秒');});}，}，};/脚本