pdfh5.js

有问题可以加Q群咨询，技术交流群，也可以探讨技术，另有开发技术讨论微信群可以问群主拉入微信群

pdfh5.js示例

更新信息

2025.10.19 更新： v3.0.0大版本更新，支持官方pdf.js v5.4.296，移除svg渲染模式，恢复懒加载模式，新增分段加载模式，新增沙箱集成（防止JavaScript注入等），新增密码pdf文件预览，优化手势缩放（后续会继续优化，目前还是有问题）。
根据需求选择加载模式：小文件直接全部加载，中等文件用懒加载，大文件用分段加载。如果同时配置多个模式，按优先级：分段加载 > 懒加载 > 传统加载。

pdfh5在线预览

https://pdfh5.gjtool.cn/pdfh5/pdf.html

https://pdfh5.gjtool.cn/pdfh5/password.pdf 密码 123456zxcv..

快速开始（有两种方式）

一、script标签引入方式

1.创建div容器

<div id="demo"></div>

2.引入pdfh5.js（插件会自动检测并加载PDF.js资源）

<script src="js/pdfh5.js"></script>

3.实例化

var pdfh5 = new Pdfh5(document.querySelector("#demo"), {
    pdfurl: "./default.pdf"
});

二、npm安装方式（适应于vue）, react使用方法类似vue（example/react-test是react使用示例）

1.安装

npm install pdfh5

2.静态资源引用

将pdfh5文件夹下的cmaps、iccs、standard_fonts、wasm、js/pdf.worker.min.js都放置到public静态资源目录下
3.使用

<script setup lang="ts">
import Pdfh5 from "pdfh5"
import { ref, onMounted, onUnmounted } from 'vue'

const container = ref<HTMLElement>()
let pdfViewer: any = null

onMounted(async () => {
  try {
    
    console.log('Pdfh5构造函数:', Pdfh5);

    // 创建PDF查看器
    pdfViewer = new Pdfh5(container.value!, {
      pdfurl: "/git.pdf",
      textLayer: true,
      workerSrc:"./pdf.worker.min.js",
      cMapUrl: './cmaps/',
      standardFontDataUrl: './standard_fonts/',
      iccUrl: './iccs/',
      wasmUrl: './wasm/'
    });
    console.log('PDF查看器创建成功:', pdfViewer);

  } catch (error) {
    console.error('PDF初始化失败:', error);
  }
})

onUnmounted(() => {
  if (pdfViewer && typeof pdfViewer.destroy === 'function') {
    pdfViewer.destroy()
  }
})
</script>

<template>
  <div class="pdf-container" ref="container"></div>
</template>

<style scoped>
.pdf-container {
  width: 100%;
  height: 100vh;
}
</style>

API接口方法

实例化

pdfh5实例化的时候传两个参数，selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件

var pdfh5 = new Pdfh5(selector, options);

|参数名称 |类型 |取值 |是否必须 |作用 | |:---:|:---:|:---:|:---:|:---:| |selector | HTMLElement | - | √ |pdfh5的容器,html DOM元素对象 | |options | Object | - | × |pdfh5的配置项参数 |

options配置项参数列表

示例： 配置项参数 pdfurl

var pdfh5 = new Pdfh5(document.querySelector("#demo"), {
	pdfurl: "./default.pdf"
});

基础配置

渲染配置

交互配置

懒加载配置

|参数名称 |类型 |取值 |默认值 |作用 | |:---:|:---:|:---:|:---:|:---:| |lazyLoad | Boolean |true、false |false |启用懒加载模式，只渲染可见页面 |

分段加载配置

UI组件配置

其他配置

|参数名称 |类型 |取值 |默认值 |作用 | |:---:|:---:|:---:|:---:|:---:| |goto | Number |页码数字 |0 |加载pdf跳转到第几页 | |enableHWA | Boolean |true、false |true |是否启用硬件加速，对图片渲染很重要 |

手势缩放配置

|参数名称 |类型 |取值 |默认值 |作用 | |:---:|:---:|:---:|:---:|:---:| |tapZoomFactor | Number |数字 |2 |双击缩放倍数 | |zoomOutFactor | Number |数字 |1.2 |缩放回弹因子 | |animationDuration| Number |数字，单位毫秒 |300 |缩放动画持续时间 | |maxZoom | Number |数字 |4 |最大缩放倍数 | |minZoom | Number |数字 |0.5 |最小缩放倍数 | |dampingFactor | Number |数字 |0.85 |阻尼因子 |

注释编辑器配置

|参数名称 |类型 |取值 |默认值 |作用 | |:---:|:---:|:---:|:---:|:---:| |annotationEditorMode| String |"NONE"、"FREETEXT"、"HIGHLIGHT"、"INK"、"STAMP"、"SIGNATURE" |"NONE" |注释编辑器模式 | |editorParams | Object |编辑器参数对象 |{} |注释编辑器参数配置 |

沙箱安全配置

|参数名称 |类型 |取值 |默认值 |作用 | |:---:|:---:|:---:|:---:|:---:| |sandboxEnabled | Boolean |true、false |true |是否启用沙箱模式，防止JavaScript注入和XSS攻击 |

沙箱配置选项（sandboxOptions）

|参数名称 |类型 |取值 |默认值 |作用 | |:---:|:---:|:---:|:---:|:---:| |allowScripts | Boolean |true、false |false |是否允许JavaScript执行 | |allowForms | Boolean |true、false |true |是否允许表单交互

Pdfh5

Install / Use

README