pdfh5
Version:
JS plugin of preview PDF for mobile. web/h5/移动端PDF预览手势缩放插件
447 lines (363 loc) • 14.6 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>PDFH5</title>
<link rel="stylesheet" href="css/style.css" />
<link href="./pdfh5.png" type="image/x-icon" rel="shortcut icon" />
<style>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
#demo {
display: block;
}
</style>
</head>
<body>
<div id="app">
<div class="text-wrapper">
<div class="text part1">
<span class="letter">
<div class="character">L</div> <span></span>
</span>
<span class="letter">
<div class="character">o</div> <span></span>
</span>
<span class="letter">
<div class="character">a</div> <span></span>
</span>
<span class="letter">
<div class="character">d</div> <span></span>
</span>
<span class="letter">
<div class="character">i</div> <span></span>
</span>
<span class="letter">
<div class="character">n</div> <span></span>
</span>
<span class="letter">
<div class="character">g</div> <span></span>
</span>
</div>
<div class="how-to"><span>正在加载中，请您耐心等待...</span></div>
</div>
</div>
<div id="demo"></div>
<script src="./js/pdfh5.js"></script>
<script src="./vconsole.min.js"></script>
<script>
// var vConsole = new VConsole();
var pdfUrl = "//pdfh5.gjtool.cn/pdfh5/git.pdf";
// var pdfUrl = "password.pdf";//密码 123456zxcv..
// var pdfUrl = "pdf/1.pdf";
if (location.search && location.search.includes("?file=")) {
pdfUrl = location.search.replace("?file=", "");
console.log(pdfUrl);
}
var pdfh5 = new window.Pdfh5(document.querySelector("#demo"), {
// ========== 基础配置 ==========
pdfurl: pdfUrl, // PDF文件地址
// data: null, // PDF文件流数据 (与pdfurl二选一)
// 正常情况下不需要配置下面这些配置，默认就好
// password: null, // PDF密码（如果有密码保护）
// goto: 0, // 初始跳转到指定页面（0表示不跳转）
// ========== 渲染配置 ==========
// scale: 1.0, // PDF渲染比例 (默认1.0，支持0.1-5.0)
textLayer: true, // 是否开启文本层，支持复制文本
// enableHWA: true, // 是否启用硬件加速（默认true）
// ========== 交互配置 ==========
// zoomEnable: true, // 是否允许手势缩放
// scrollEnable: true, // 是否允许滚动
// resize: true, // 是否允许窗口大小变化时重新渲染
// backTop: true, // 是否显示回到顶部按钮
// pageNum: true, // 是否显示页码
// loadingBar: true, // 是否显示加载进度条
// ========== 手势缩放配置 ==========
// tapZoomFactor: 2, // 双击缩放倍数（默认2）
// zoomOutFactor: 1.2, // 缩放退出因子（默认1.2）
// animationDuration: 300, // 动画持续时间（毫秒）
// maxZoom: 4, // 最大缩放倍数
// minZoom: 0.5, // 最小缩放倍数
// dampingFactor: 0.85, // 阻尼因子
// ========== 加载模式配置 ==========
// 根据文件大小选择加载模式：
// 小文件（<10MB）：不配置，使用传统加载
// 中等文件（10-50MB）：lazyLoad: true
// 大文件（>50MB）：progressiveLoading: true
// 懒加载模式（中等文件推荐）
// lazyLoad: true, // 启用懒加载模式
// maxMemoryPages: 5, // 懒加载模式下最大内存页面数（默认5）
// 分段加载模式（大文件推荐）
progressiveLoading: true, // 启用分段加载模式
// chunkSize: 65536, // 分段大小（字节，默认65536）
// ========== 性能优化配置 ==========
// maxImageSize: 8388608, // 最大图片大小（字节，8388608，兼容iOS Safari）
// canvasMaxAreaInBytes: 8388608, // 最大Canvas面积 iOS Safari浏览器canvas限制约为16777216
// ========== 资源路径配置 ==========
// workerSrc: "./pdf.worker.min.js", // PDF.js Worker路径
// cMapUrl: "../cmaps/", // 字符映射路径
// standardFontDataUrl: "../standard_fonts/", // 标准字体路径
// iccUrl: "../iccs/", // ICC配置文件路径
// wasmUrl: "../wasm/", // WASM文件路径
// ========== 沙箱安全配置 ==========
// sandboxEnabled: true, // 是否启用沙箱模式（默认true）
// sandboxOptions: { // 沙箱配置选项
// allowScripts: false, // 是否允许JavaScript执行
// allowForms: true, // 是否允许表单交互
// allowPopups: false, // 是否允许弹窗
// allowSameOrigin: true // 是否允许同源访问
// },
});
// ========== 事件监听示例 ==========
// PDF加载完成事件
pdfh5.on('ready', function (data) {
console.log('PDF加载完成，总页数：', data.totalPages);
});
// PDF加载错误事件
pdfh5.on('error', function (data) {
console.error('PDF加载失败：', data.message);
});
// 页面变化事件
pdfh5.on('pageChanged', function (data) {
console.log('当前页面：', data.pageNumber);
});
// 缩放变化事件
pdfh5.on('scaleChanged', function (data) {
console.log('缩放比例：', data.scale);
});
// 缩放事件
pdfh5.on('zoom', function (data) {
console.log('缩放：', data.scale);
});
// 搜索清除事件
pdfh5.on('searchCleared', function () {
console.log('搜索已清除');
});
// 打印事件
pdfh5.on('print', function () {
console.log('开始打印');
});
// 下载事件
pdfh5.on('download', function (data) {
console.log('下载文件：', data.filename);
});
// 密码取消事件
pdfh5.on('passwordCancelled', function () {
console.log('密码输入已取消');
});
// 密码错误事件
pdfh5.on('passwordError', function (data) {
console.error('密码错误：', data.message);
});
// ========== 方法调用示例 ==========
// 显示PDF
// pdfh5.show();
// 隐藏PDF
// pdfh5.hide();
// 滚动到指定页面
// pdfh5.scrollToPage(5);
// 滚动到顶部
// pdfh5.scrollToTop();
// 设置缩放比例
// pdfh5.setScale(1.5);
// 获取当前缩放比例
// var currentScale = pdfh5.getScale();
// console.log('当前缩放比例：', currentScale);
// 搜索文本
// pdfh5.searchText('关键词');
// 清除搜索
// pdfh5.clearSearch();
// 打印PDF
// pdfh5.print();
// 下载PDF
// pdfh5.download('文件名.pdf');
// 获取密码配置状态
// var passwordConfig = pdfh5.getPasswordConfig();
// console.log('密码配置：', passwordConfig);
// 销毁PDF实例
// pdfh5.destroy();
// ========== 事件监听示例 ==========
// 监听PDF加载完成事件
pdfh5.on("complete", function (status, msg, time) {
console.log("状态：" + status + "，总耗时：" + time + "毫秒，总页数：" + this.totalNum, msg);
});
// 监听滚动事件
pdfh5.on("scroll", function (data) {
// console.log("scrollTop:" + data.scrollTop, "currentNum:" + data.currentNum);
});
// 监听缩放事件
pdfh5.on("zoom", function (scale) {
console.log("当前缩放比例：" + scale);
});
// 监听渲染过程
pdfh5.on("render", function (currentNum, pageTime, totalTime, currentPageDom) {
console.log("正在渲染第" + currentNum + "页，单页耗时：" + pageTime + "ms，总耗时：" + totalTime + "ms");
// 调试信息：显示页面尺寸
if (currentPageDom) {
var container = currentPageDom;
var canvas = container.querySelector('canvas');
if (canvas) {
console.log("第" + currentNum + "页尺寸 - 容器:", container.style.width, "x", container.style.height, "Canvas:", canvas.style.width, "x", canvas.style.height);
}
}
// 当第一页渲染完成时，隐藏 loading
if (currentNum === 1) {
var loadingDiv = document.querySelector("#app");
if (loadingDiv) {
loadingDiv.style.opacity = "0";
loadingDiv.style.transition = "opacity 0.5s ease-out";
setTimeout(function () {
loadingDiv.style.display = "none";
}, 500);
}
}
});
// 监听回到顶部按钮点击
pdfh5.on("backTop", function () {
console.log("回到顶部按钮被点击");
});
// 监听显示/隐藏事件
pdfh5.on("show", function () {
console.log("PDF显示");
});
pdfh5.on("hide", function () {
console.log("PDF隐藏");
});
// ========== 分段加载事件监听 ==========
// 监听页面加载完成事件（分段加载）
pdfh5.on("pageLoaded", function (data) {
// console.log("页面加载完成:", data.pageNum, "内存使用:", data.memoryUsage);
});
// 监听页面清理事件（分段加载）
pdfh5.on("pageCleaned", function (data) {
// console.log("页面清理完成:", data.pageNum);
});
// 监听缩放开始事件
pdfh5.on("zoomStart", function (data) {
console.log("开始缩放:", data.scale, "中心点:", data.centerX, data.centerY);
});
// 监听缩放结束事件
pdfh5.on("zoomEnd", function (data) {
console.log("缩放结束:", data.scale, "缩放变化:", data.scaleChange, "耗时:", data.duration + "ms");
});
// 添加窗口resize调试监听
window.addEventListener('resize', function () {
console.log("窗口大小变化:", window.innerWidth, "x", window.innerHeight);
setTimeout(function () {
var demo = document.querySelector("#demo");
if (demo) {
console.log("PDF容器尺寸:", demo.clientWidth, "x", demo.clientHeight);
}
}, 100);
});
// ========== 方法调用示例 ==========
// 页面跳转示例
// pdfh5.goToPage(5); // 跳转到第5页
// ========== 分段加载模式下的页面跳转 ==========
// 分段加载模式支持goto配置和goToPage方法
// 配置示例：
// var pdfh5 = new Pdfh5('#demo', {
// pdfurl: 'large-pdf.pdf',
// progressiveLoading: true,
// goto: 10 // 初始跳转到第10页
// });
// 动态跳转示例：
// pdfh5.goToPage(20); // 跳转到第20页（会自动加载该页面）
// 缩放控制示例
// pdfh5.zoomIn(); // 放大
// pdfh5.zoomOut(); // 缩小
// pdfh5.setScale(2.0); // 设置缩放比例
// 滚动控制示例
// pdfh5.scrollToTop(); // 滚动到顶部
// 搜索功能示例
// pdfh5.searchText("关键词"); // 搜索文本
// pdfh5.findNext(); // 查找下一个
// pdfh5.findPrevious(); // 查找上一个
// pdfh5.clearSearch(); // 清除搜索
// 下载和打印示例
// pdfh5.downloadPDF("我的文档.pdf"); // 下载PDF
// pdfh5.printPDF(); // 打印PDF
// 显示/隐藏控制示例
// pdfh5.show(); // 显示PDF
// pdfh5.hide(); // 隐藏PDF
// 交互控制示例
// pdfh5.setZoomEnabled(false); // 禁用缩放
// pdfh5.setScrollEnabled(false); // 禁用滚动
// ========== 分段加载方法示例 ==========
// 设置分段加载配置
// pdfh5.setProgressiveLoading(true, {
// chunkSize: 131072, // 128KB分块
// maxMemoryPages: 8 // 最大8页内存
// });
// 获取分段加载状态
// var status = pdfh5.getProgressiveLoadingStatus();
// console.log("分段加载状态:", status);
// 获取内存使用情况
// var usage = pdfh5.getMemoryUsage();
// console.log("内存使用:", usage);
// 缩放控制方法
// pdfh5.setZoomConstraints({minScale: 0.5, maxScale: 3.0}); // 设置缩放范围
// var constraints = pdfh5.getZoomConstraints(); // 获取缩放范围
// var isZooming = pdfh5.isZooming(); // 检查是否正在缩放
// 状态获取示例
// var status = pdfh5.getStatus(); // 获取当前状态
// console.log("当前状态：", status);
// 销毁示例
// pdfh5.destroy(); // 销毁PDF实例
// ========== 分段加载模式测试 ==========
// 当前配置：分段加载模式已启用
// 测试功能：
// 1. 页面容器初始化 ✓（复用懒加载的createPageContainer）
// 2. 渐进式页面加载 ✓（使用renderPageLazy）
// 3. 内存管理 ✓（自动清理远距离页面）
// 4. goto配置支持 ✓（优先加载goto页面）
// 5. 手势缩放支持 ✓（与分段加载兼容）
// ========== 服务端配置说明 ==========
// 分段加载需要服务端支持HTTP范围请求（Range Requests）
//
// 完整的Nginx配置示例：
// server {
// listen 80;
// server_name your-domain.com;
//
// # 处理OPTIONS预检请求
// location / {
// if ($request_method = 'OPTIONS') {
// add_header Access-Control-Allow-Origin "*";
// add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS";
// add_header Access-Control-Allow-Headers "Range, Content-Range, Content-Type";
// add_header Access-Control-Max-Age 86400;
// add_header Content-Length 0;
// add_header Content-Type text/plain;
// return 204;
// }
// }
//
// # PDF文件特殊配置
// location ~* \.(pdf)$ {
// add_header Accept-Ranges bytes;
// add_header Content-Type application/pdf;
// add_header Access-Control-Allow-Origin "*";
// add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS";
// add_header Access-Control-Allow-Headers "Range, Content-Range, Content-Type";
// add_header Access-Control-Expose-Headers "Content-Range, Content-Length";
// }
// }
// 注意：PDF.js 5.4.296 版本只支持 Canvas 渲染模式
// 支持在线预览：http://pdfh5.gjtool.cn/pdfh5/pdf.html?file=http://pdfh5.gjtool.cn/pdfh5/git.pdf
</script>
</body>
</html>