添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
master
dependabot/npm_and_yarn/example/react-test/word-wrap-1.2.4
dependabot/npm_and_yarn/example/react-test/semver-6.3.1
dependabot/npm_and_yarn/example/react-test/merge-deep-3.0.3
dependabot/npm_and_yarn/example/react-test/dns-packet-1.3.4
dependabot/npm_and_yarn/example/react-test/hosted-git-info-2.8.9
dependabot/npm_and_yarn/example/react-test/url-parse-1.5.1
dependabot/npm_and_yarn/example/react-test/ssri-6.0.2
dependabot/npm_and_yarn/example/react-test/ini-1.3.8
dependabot/npm_and_yarn/example/react-test/http-proxy-1.18.1
dependabot/npm_and_yarn/example/react-test/elliptic-6.5.3
dependabot/npm_and_yarn/example/test/webpack-dev-server-3.11.0
dependabot/npm_and_yarn/example/react-test/websocket-extensions-0.1.4
dependabot/npm_and_yarn/example/test/webpack-bundle-analyzer-3.7.0
v1.4.9
v1.4.8
v1.4.2
v1.4.0
1.3.20
v1.3.20
1.3.19
1.3.18
1.3.17
v1.3.8
1.3.6
v1.2.22
v1.2.21
v1.2.19
1.2.18
v1.2.17
v1.2.14
使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议 配置并使用私人令牌 替代登录密码进行克隆、推送等操作
Username for 'https://gitee.com': userName
Password for 'https://[email protected]':

1、有问题可以加Q群咨询,技术交流群,也可以探讨技术,另有微信群可以问群主拉入微信群

2、如果有报错,请复制example运行,然后对照相关文件,以及package.json,缺什么补什么

3、如果有某些字体显示不了,那可能是pdf.js缺少相关字库解析,可以尝试更改cMapUrl,建议去官方地址找版本

4、如果IOS下pdf显示不了,安卓却可以,可能是pdf精度过高导致,Safari浏览器canvas渲染绘制图片宽高不能超过16777216,超过会不显示

QQ群521681398

pdfh5博客主页

pdfh5项目GitHub地址

pdfh5项目gitee地址

react、vue均可使用 example/test 是vue使用示例 example/vue3demo 是vue3使用示例 example/vite4vue3 是vite4+vue3+ts使用示例 example/react-test 是react使用示例
  • 2024.02.29 更新: 修复部分bugs。
  • pdfh5在线预览 (建议使用谷歌浏览器F12手机模式打开预览)
  • https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf
  • 快速使用(有两种方式) 一、script标签引入方式(需下载本项目文件夹css/pdfh5.css、js内所有文件)
  • 1.引入css
  • <link rel="stylesheet" href="css/pdfh5.css" />
  • 2.创建div
  • <div id="demo"></div>
  • 3.依次引入js(需引用本项目的js,不要引用官方的pdf.js,jquery可以引用其它版的)
  • <script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
  • 4.实例化
  • var pdfh5 = new Pdfh5('#demo', {
      pdfurl: "./default.pdf"
    二、npm安装方式(适应于vue), react使用方法类似vue(example/react-test是react使用示例)
    
    npm install pdfh5
    <template>
      <div id="app">
    	<div id="demo"></div>
    </template>
    <script>
      import Pdfh5 from "pdfh5";
      export default {
        name: 'App',
    	data() {
    	  return {
    	    pdfh5: null
    	mounted() {
    		//实例化
    	  this.pdfh5 = new Pdfh5("#demo", {
    		pdfurl: "../../static/test.pdf",
    		// cMapUrl:"https://unpkg.com/[email protected]/cmaps/",
    		// responseType: "blob" // blob arraybuffer
    	  //监听完成事件
    	  this.pdfh5.on("complete", function (status, msg, time) {
    		console.log("状态:" + status + ",信息:" + msg + ",耗时:" + time + "毫秒,总页数:" + this.totalNum)
    		//禁止手势缩放
    		this.pdfh5.zoomEnable(false);
    </script>
    <style>
    	@import "pdfh5/css/pdfh5.css";
    	padding: 0;
    	margin: 0;
    	html,body,#app {
    	width: 100%;
    	height: 100%;
    </style>
  • 注意:如果css引用报错的话,按下面的方式引用。
  •   import Pdfh5 from "pdfh5";
      import "pdfh5/css/pdfh5.css";
    API接口方法
  • pdfh5实例化的时候传两个参数,selector选择器,options配置项参数,会返回一个pdfh5实例对象,可以用来操作pdf,监听相关事件
  • var pdfh5 = new Pdfh5(selector, options);
    Array(arraybuffer) pdf文件流 ,与pdfurl二选一(二进制PDF数据。使用类型化数组(Uint8Array)可以提高内存使用率。如果PDF数据是BASE64编码的,请先使用atob()将其转换为二进制字符串。) renderType String "canvas"、"svg",默认"canvas" pdf渲染模式 pageNum Boolean true、false, 默认true 是否显示左上角页码 backTop Boolean true、false, 默认true 是否显示右下角回到顶部按钮 maxZoom Number 最大倍数3 手势缩放最大倍数 scale Number 最大比例5,默认1.5 pdf渲染的比例 scrollEnable Boolean true、false, 默认true 是否允许pdf滚动 zoomEnable Boolean true、false, 默认true 是否允许pdf手势缩放 cMapUrl String 解析pdf时,特殊情况下显示完整字体的cmaps文件夹路径,例如 cMapUrl:"
    https://unpkg.com/[email protected]/cmaps/" limit Number 限制pdf加载最大页数 Object {src:"pdfh5.png",x:10,y:10,width:40,height:40}src水印图片路径(建议使用png透明图片),width水印宽度,height水印高度,以每页pdf左上角为0点,x、y为偏移值。 默认false 给每页pdf添加水印logo(canvas模式下使用) Number 加载pdf跳转到第几页 textLayer Boolean true、false, 默认false 是否开启textLayer,可以复制文本(canvas模式下使用)【处于测试阶段,位置偏移严重】 background Object {color:"#fff",image:"url('pdfh5.png')",repeat:"no-repeat",position:"left top",size:"40px 40px"},和css的background属性语法相同,默认false 是否开启背景图模式
    new Pdfh5('#demo', {
    	pdfurl: "git.pdf",
    	// responseType: "blob" // blob arraybuffer
    
  • pdf文件流或者buffer已经得到,如何渲染
  •  new Pdfh5('#demo', {
     	data: blob,  //blob arraybuffer
    methods 方法列表
    示例: 是否允许pdf滚动
    
    pdfh5.scrollEnable(true) //允许pdf滚动
    pdfh5.scrollEnable(false) //不允许pdf滚动
    render Function(currentNum, time, currentPageDom) 监听pdf渲染过程,currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数, Function(scale) 监听pdf缩放,scale缩放比例 scroll Function(scrollTop,currentNum) 监听pdf滚动,scrollTop滚动条高度,currentNum当前页码 backTop Function 监听回到顶部按钮的点击事件回调 zoomEnable Function(flag) 监听允许缩放,flag:true,false scrollEnable Function(flag) 监听允许滚动,flag:true,false Function 监听pdfh5显示 Function 监听pdfh5隐藏 reset Function 监听pdfh5还原 destroy Function 监听pdfh5销毁 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。

    如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。

  • 协作:代表了开源开发行为中协作的程度和深度。
  • 人:观察开源项目核心人员在开源项目中的影响力,并通过第三方视角考察用户和开发者对开源项目的评价。
  • 软件:从开源项目对外输出的制品评估其价值最终落脚点。也是开源评估最“古老”的主流方向之一“开源软件” 的具体表现。
  • 3. 评估模型

    基于“开源生态”与“协作、人、软件”的维度,找到与该目标直接或间接相关的可量化指标,对开源项目健康与生态进行量化评估,最终形成开源评估指数。