LQ博客 www.lqblogs.com
arrows
nav

pdfh5.js Vue 实现移动端pdf展示预览缩放

作者:LQ 来源:网络 发布时间:2019-12-01 浏览量:10261 评论:0 点赞:3

pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件。支持canvas和svg两种渲染模式,支持ajax和fetch两种请求方式。支持懒加载。

 npm install pdfh5 --save-dev
<template>
<div  id="pdf">
    <div  id="demo"></div>
</div>
</template>
<script>

import Pdfh5 from "pdfh5";

export default {
  name: 'pdf',
  data() {
    return {
    pdfh5:  null
   };
  },

mounted() {
  //实例化
 this.pdfh5 = new  Pdfh5("#demo", {
      pdfurl:  "/test.pdf",
      lazy:true
  }).on("complete", function (status, msg, time) { //监听完成事件
      console.log("状态:" + status + ",信息:" + msg + ",耗时:" + time + "毫秒,总页数:" + this.totalNum)
   })
  }
}
</script>

<style>

*{
  padding: 0;
  margin: 0;
  }
html,body,#app {
  width: 100%;
  height: 100%;
}
#demo svg{
  height: calc(100vh) !important;
}
</style>

实例化

  • pdfh5实例化的时候传两个参数,selector选择器,options配置项参数,options可以不填写,会自动获取浏览器地址栏?file=后面的地址。会返回一个pdfh5实例对象,可以用来操作pdf,监听相关事件

var  pdfh5 = new  Pdfh5(selector, options);
参数名称类型取值是否必须作用
selector{String}-pdfh5的容器选择器
options{Object}-×pdfh5的配置项参数

options配置项参数列表

  • 示例: 配置项参数 lazy:true 开启懒加载,默认是false,不开启懒加载

var  pdfh5 = new  Pdfh5('#demo', {    pdfurl:  "./default.pdf",    lazy:true});
参数名称类型取值作用
pdfurl{String}-pdf地址,当前默认优先获取浏览器地址栏?file=后面的地址,如果地址栏没有,再拿配置项的pdfurl或者data来渲染pdf,优先顺序: ?file= > pdfurl > data
URIenable{Boolean}true、false, 默认true可以无视地址栏参数,只拿配置项的pdfurl或者data来渲染pdf
data{String(blob) / Array(Uint8Array)}-pdf文件流 ,与pdfurl二选一。可以传普通文件流blob,也可以传转过码的Uint8Array
type{String}"ajax"、"fetch",默认"fetch"请求pdf方式
renderType{String}"canvas"、"svg",默认"svg"pdf渲染模式
scale{Number}默认1.3。canvas模式下,为2渲染的清晰度比例
lazy{Boolean}true、false, 默认false是否开启懒加载
maxZoom{Number}默认4手势缩放最大倍数
tapZoomFactor{Number}默认2双击放大倍数
scrollEnable{Boolean}true、false, 默认true是否允许pdf滚动
zoomEnable{Boolean}true、false, 默认true是否允许pdf手势缩放
cMapUrl{String}默认"./js/cmaps/"解析pdf时,特殊情况下显示完整字体的cmaps文件夹路径


分享链接:https://www.gjtool.cn/articles/2019/09/04/1567571649102.html

pdfh5 pdf Vue
如果你感觉本文章对你有帮助的话,那就点赞、打赏或订阅一下吧
点赞(3)
打赏
倒踩(2)
关闭 感谢您的支持,我会继续努力
微信支付
支付宝支付
扫码打赏,建议金额1-20元
浏览量(10261)
讨论本篇文章(0)
发表评论

最多访问文章

最新文章