在当今数字化办公和内容分享的时代，PDF文件因其格式稳定、跨平台兼容的特性，成为文档传输和展示的首选格式。然而，如何在网页中高效、安全地预览PDF文件，而不依赖用户本地安装的PDF阅读器，是一个常见的前端开发挑战。基于jQuery的PDF预览插件因其轻量、易集成和良好的浏览器兼容性，成为许多开发者的首选方案。本文将深入探讨几种主流的jQuery PDF预览插件，提供详细的集成指南、代码示例，并解析常见问题，帮助您构建流畅的PDF在线预览体验。

一、为什么选择基于jQuery的PDF预览方案？

在深入具体插件之前，我们先明确选择jQuery方案的优势：

  1. 广泛的浏览器兼容性：jQuery库本身对旧版浏览器（如IE8+）有良好的支持，这对于需要兼容老旧企业环境的项目至关重要。
  2. 轻量级与易集成：大多数jQuery PDF插件体积小，依赖简单，可以快速集成到现有项目中，无需复杂的构建流程。
  3. 丰富的插件生态：社区提供了多种选择，从简单的PDF.js封装到功能全面的商业插件，满足不同场景需求。
  4. 降低开发成本：利用成熟的插件可以避免从零开始实现PDF渲染的复杂性，节省开发时间和资源。

二、主流jQuery PDF预览插件详解

1. PDF.js + jQuery 封装方案

核心原理：PDF.js是Mozilla开源的一个强大的PDF解析库，它使用HTML5 Canvas和Web Workers在浏览器中直接渲染PDF，无需插件。许多jQuery插件是对PDF.js的封装，使其更易于使用。

推荐插件：jquery-pdf-viewer 或直接使用PDF.js的jQuery封装。

集成步骤：

步骤1：引入依赖

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>PDF预览示例</title>
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入PDF.js核心库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
    <!-- 引入PDF.js的jQuery封装插件（示例） -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-pdf-viewer/1.0.0/jquery-pdf-viewer.min.js"></script>
    <!-- 引入PDF.js的CSS样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf_viewer.min.css">
</head>
<body>
    <div id="pdf-container" style="width: 100%; height: 800px; border: 1px solid #ccc;"></div>
</body>
</html>

步骤2：初始化PDF查看器

$(document).ready(function() {
    // 设置PDF.js的worker路径（重要！）
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';

    // 使用jQuery插件初始化
    $('#pdf-container').pdfViewer({
        pdfUrl: 'https://example.com/sample.pdf', // 替换为您的PDF文件URL
        // 可选配置
        page: 1, // 起始页码
        scale: 1.0, // 缩放比例
        // 事件回调
        onDocumentLoad: function() {
            console.log('PDF文档加载完成');
        },
        onPageRender: function(pageNumber) {
            console.log('正在渲染第 ' + pageNumber + ' 页');
        }
    });
});

步骤3：高级功能扩展（自定义工具栏）

// 自定义工具栏按钮事件
$(document).ready(function() {
    // 初始化PDF查看器
    const viewer = $('#pdf-container').pdfViewer({
        pdfUrl: 'https://example.com/sample.pdf'
    });

    // 绑定自定义工具栏事件
    $('#zoom-in').click(function() {
        // 获取当前缩放比例并增加
        const currentScale = viewer.getScale();
        viewer.setScale(currentScale + 0.2);
    });

    $('#zoom-out').click(function() {
        const currentScale = viewer.getScale();
        viewer.setScale(Math.max(0.5, currentScale - 0.2));
    });

    $('#next-page').click(function() {
        viewer.nextPage();
    });

    $('#prev-page').click(function() {
        viewer.prevPage();
    });
});

优点：

  • 完全免费开源
  • 高度可定制
  • 支持文本搜索、选择等高级功能
  • 良好的性能

缺点：

  • 需要手动处理PDF.js的版本兼容性
  • 对于超大PDF文件，首次加载可能较慢

2. Viewer.js

核心原理：Viewer.js是一个轻量级的jQuery插件，专门用于在网页中显示PDF文件。它基于PDF.js，但提供了更简洁的API和预设的UI组件。

集成步骤：

步骤1：引入依赖

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入Viewer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.5/viewer.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.5/viewer.min.css">

步骤2：HTML结构

<div class="pdf-viewer-container">
    <div id="pdf-viewer" style="width: 100%; height: 800px;"></div>
    <!-- 自定义工具栏 -->
    <div class="toolbar">
        <button id="prev-page">上一页</button>
        <span id="page-num">1</span> / <span id="page-count">0</span>
        <button id="next-page">下一页</button>
        <button id="zoom-in">放大</button>
        <button id="zoom-out">缩小</button>
    </div>
</div>

步骤3：初始化与事件绑定

$(document).ready(function() {
    // 配置Viewer.js
    const viewer = new Viewer(document.getElementById('pdf-viewer'), {
        url: 'https://example.com/sample.pdf',
        // 自定义事件
        ready: function() {
            console.log('Viewer.js准备就绪');
            // 更新页码显示
            $('#page-count').text(viewer.getPageCount());
        },
        pagechange: function(page) {
            $('#page-num').text(page);
        }
    });

    // 绑定工具栏事件
    $('#prev-page').click(function() {
        viewer.prevPage();
    });

    $('#next-page').click(function() {
        viewer.nextPage();
    });

    $('#zoom-in').click(function() {
        viewer.zoomIn();
    });

    $('#zoom-out').click(function() {
        viewer.zoomOut();
    });
});

优点：

  • API简洁易用
  • 内置工具栏和导航
  • 支持触摸事件（移动端友好）
  • 文档完善

缺点：

  • 自定义UI受限
  • 对于复杂需求可能需要修改源码

3. 商业插件：PDF.js Viewer (PDFTron)

核心原理：PDFTron的PDF.js Viewer是一个功能全面的商业解决方案，基于PDF.js构建，提供了企业级的功能和性能优化。

集成步骤：

步骤1：获取许可证并引入资源

<!-- 引入PDF.js Viewer核心 -->
<script src="https://webviewer.pdftron.com/lib/core/WebViewer.js"></script>
<!-- 引入jQuery适配器（可选） -->
<script src="https://webviewer.pdftron.com/lib/adapters/jquery/WebViewerjQuery.js"></script>

步骤2：初始化WebViewer

$(document).ready(function() {
    // 初始化WebViewer
    const viewerElement = document.getElementById('pdf-viewer');
    WebViewer({
        path: 'https://webviewer.pdftron.com/lib/',
        initialDoc: 'https://example.com/sample.pdf',
        // 配置选项
        config: {
            // 禁用某些功能
            disabledElements: ['downloadButton', 'printButton'],
            // 自定义工具栏
            customElements: [
                {
                    type: 'button',
                    title: '自定义按钮',
                    onClick: function() {
                        alert('自定义按钮被点击');
                    }
                }
            ]
        }
    }, viewerElement).then(function(instance) {
        // 获取核心API
        const { Core, UI } = instance;
        
        // 监听事件
        Core.documentViewer.on('documentLoaded', function() {
            console.log('PDF加载完成');
        });
        
        // 使用jQuery绑定事件
        $('#custom-btn').click(function() {
            UI.showErrorMessage('这是一个自定义操作');
        });
    });
});

步骤3：高级功能示例（表单填写）

// 检查PDF是否包含表单字段
instance.Core.documentViewer.on('documentLoaded', function() {
    const annotManager = instance.Core.annotationManager;
    
    // 获取所有表单字段
    const formFields = annotManager.getFieldManager().getFields();
    
    // 填充表单字段
    formFields.forEach(function(field) {
        if (field.getType() === 'Text') {
            // 设置文本字段值
            field.setValue('示例文本');
        } else if (field.getType() === 'Checkbox') {
            // 选中复选框
            field.setValue(true);
        }
    });
    
    // 保存修改后的PDF
    instance.Core.documentViewer.getDocument().save();
});

优点：

  • 功能全面（注释、表单、数字签名等）
  • 企业级支持
  • 性能优化好
  • 跨平台兼容

缺点：

  • 商业许可费用
  • 学习曲线较陡

三、性能优化策略

1. 懒加载与分页渲染

// 使用PDF.js的懒加载机制
$(document).ready(function() {
    const pdfContainer = $('#pdf-container');
    
    // 只渲染当前视口内的页面
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const pageNum = parseInt(entry.target.dataset.page);
                renderPage(pageNum);
            }
        });
    }, {
        rootMargin: '100px' // 提前100px开始加载
    });
    
    // 为每个页面容器添加观察器
    $('.page-container').each(function() {
        observer.observe(this);
    });
});

2. 缓存策略

// 使用localStorage缓存已加载的PDF页面
function getCachedPage(pageNum) {
    const cacheKey = `pdf_page_${pageNum}`;
    const cached = localStorage.getItem(cacheKey);
    if (cached) {
        return JSON.parse(cached);
    }
    return null;
}

function setCachedPage(pageNum, data) {
    const cacheKey = `pdf_page_${pageNum}`;
    // 限制缓存大小（示例：最多缓存10页）
    const keys = Object.keys(localStorage).filter(k => k.startsWith('pdf_page_'));
    if (keys.length >= 10) {
        localStorage.removeItem(keys[0]); // 移除最旧的
    }
    localStorage.setItem(cacheKey, JSON.stringify(data));
}

3. Web Workers优化

// 使用Web Workers处理PDF解析，避免阻塞主线程
if (window.Worker) {
    const pdfWorker = new Worker('pdf-worker.js');
    
    pdfWorker.onmessage = function(e) {
        const { pageNum, canvasData } = e.data;
        // 将Canvas数据渲染到页面
        const canvas = document.getElementById(`page-${pageNum}`);
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.onload = function() {
            ctx.drawImage(img, 0, 0);
        };
        img.src = canvasData;
    };
    
    // 发送任务到Worker
    function renderPageInWorker(pageNum) {
        pdfWorker.postMessage({
            action: 'renderPage',
            pageNum: pageNum,
            pdfData: pdfData // PDF二进制数据
        });
    }
}

四、常见问题解析

问题1：PDF加载缓慢或卡顿

原因分析：

  • PDF文件过大（>50MB）
  • 网络带宽限制
  • 浏览器内存不足
  • 未使用Web Workers

解决方案：

// 1. 分片加载PDF
async function loadPDFInChunks(pdfUrl) {
    const response = await fetch(pdfUrl);
    const contentLength = response.headers.get('Content-Length');
    const chunkSize = 1024 * 1024; // 1MB chunks
    
    let receivedLength = 0;
    const chunks = [];
    
    while (receivedLength < contentLength) {
        const chunk = await response.body.read(chunkSize);
        chunks.push(chunk);
        receivedLength += chunk.length;
        
        // 更新进度条
        updateProgress(receivedLength / contentLength);
    }
    
    // 合并chunks
    const blob = new Blob(chunks);
    return blob;
}

// 2. 使用PDF.js的懒加载
pdfjsLib.getDocument({
    url: pdfUrl,
    disableAutoFetch: true, // 禁用自动获取所有页面
    disableStream: true     // 禁用流式加载
}).promise.then(function(pdf) {
    // 只加载当前需要的页面
    pdf.getPage(1).then(function(page) {
        // 渲染第一页
    });
});

问题2：跨域问题（CORS）

原因分析：

  • PDF文件托管在不同域名
  • 服务器未设置正确的CORS头

解决方案：

// 1. 服务器端设置CORS头（示例：Node.js/Express）
app.get('/pdf/*', function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    // ... 其他处理
});

// 2. 客户端使用代理（如果无法修改服务器）
// 通过后端代理PDF请求
$.ajax({
    url: '/api/proxy-pdf',
    method: 'POST',
    data: {
        pdfUrl: 'https://external-domain.com/file.pdf'
    },
    success: function(data) {
        // 使用返回的PDF数据初始化查看器
        initPDFViewer(data);
    }
});

// 3. 使用PDF.js的withCredentials选项
pdfjsLib.getDocument({
    url: pdfUrl,
    withCredentials: true // 发送cookie（需要服务器支持）
}).promise.then(function(pdf) {
    // ...
});

问题3：移动端触摸事件冲突

原因分析：

  • PDF查看器的触摸事件与页面滚动冲突
  • 多点触控缩放不流畅

解决方案：

// 1. 阻止PDF容器的默认触摸行为
$('#pdf-container').on('touchstart touchmove touchend', function(e) {
    // 阻止事件冒泡，避免与页面滚动冲突
    e.stopPropagation();
    
    // 处理自定义触摸逻辑
    if (e.type === 'touchstart') {
        // 记录起始触摸点
        this.touchStartX = e.touches[0].clientX;
        this.touchStartY = e.touches[0].clientY;
    } else if (e.type === 'touchmove') {
        // 计算移动距离
        const deltaX = e.touches[0].clientX - this.touchStartX;
        const deltaY = e.touches[0].clientY - this.touchStartY;
        
        // 水平滑动翻页
        if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
            if (deltaX > 0) {
                // 向右滑动 - 上一页
                viewer.prevPage();
            } else {
                // 向左滑动 - 下一页
                viewer.nextPage();
            }
            // 重置触摸点
            this.touchStartX = e.touches[0].clientX;
        }
    }
});

// 2. 使用Hammer.js处理复杂手势
const hammer = new Hammer(document.getElementById('pdf-container'));
hammer.get('pinch').set({ enable: true }); // 启用捏合缩放
hammer.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL }); // 水平滑动

hammer.on('pinch', function(e) {
    // 处理缩放
    const scale = viewer.getScale() * e.scale;
    viewer.setScale(scale);
});

hammer.on('swipeleft', function() {
    viewer.nextPage();
});

hammer.on('swiperight', function() {
    viewer.prevPage();
});

问题4：PDF.js版本兼容性问题

原因分析：

  • PDF.js版本更新导致API变化
  • 与jQuery或其他库冲突

解决方案：

// 1. 版本检测与降级
function checkPDFJSVersion() {
    const version = pdfjsLib.version;
    const majorVersion = parseInt(version.split('.')[0]);
    
    if (majorVersion >= 2) {
        // 使用新API
        return {
            getDocument: pdfjsLib.getDocument,
            GlobalWorkerOptions: pdfjsLib.GlobalWorkerOptions
        };
    } else {
        // 使用旧API（降级）
        return {
            getDocument: PDFJS.getDocument,
            GlobalWorkerOptions: PDFJS.GlobalWorkerOptions
        };
    }
}

// 2. 使用命名空间避免冲突
(function() {
    // 保存全局引用
    const originalPDFJS = window.pdfjsLib;
    
    // 创建独立的命名空间
    window.MyPDFViewer = {
        pdfjsLib: originalPDFJS,
        
        // 封装方法以处理版本差异
        getDocument: function(options) {
            const lib = this.pdfjsLib;
            if (lib.getDocument) {
                return lib.getDocument(options);
            } else if (lib.version && lib.version.startsWith('2.')) {
                return lib.getDocument(options);
            } else {
                // 旧版本处理
                return PDFJS.getDocument(options);
            }
        }
    };
})();

问题5：内存泄漏

原因分析：

  • 未正确销毁PDF实例
  • 事件监听器未移除
  • Canvas元素未清理

解决方案：

// 1. 创建PDF查看器管理类
class PDFViewerManager {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.pdfDoc = null;
        this.canvasPool = [];
        this.eventListeners = [];
    }
    
    // 加载PDF
    async loadPDF(url) {
        // 清理之前的实例
        this.cleanup();
        
        // 加载新PDF
        const pdf = await pdfjsLib.getDocument(url).promise;
        this.pdfDoc = pdf;
        
        // 创建Canvas池
        for (let i = 0; i < pdf.numPages; i++) {
            const canvas = document.createElement('canvas');
            canvas.id = `page-${i + 1}`;
            this.container.appendChild(canvas);
            this.canvasPool.push(canvas);
        }
        
        return pdf;
    }
    
    // 渲染页面
    async renderPage(pageNum) {
        const page = await this.pdfDoc.getPage(pageNum);
        const viewport = page.getViewport({ scale: 1.5 });
        const canvas = this.canvasPool[pageNum - 1];
        
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        
        const renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        
        await page.render(renderContext).promise;
    }
    
    // 清理资源
    cleanup() {
        // 销毁PDF实例
        if (this.pdfDoc) {
            this.pdfDoc.destroy();
            this.pdfDoc = null;
        }
        
        // 清除Canvas
        this.canvasPool.forEach(canvas => {
            const context = canvas.getContext('2d');
            if (context) {
                context.clearRect(0, 0, canvas.width, canvas.height);
            }
            canvas.remove();
        });
        this.canvasPool = [];
        
        // 移除事件监听器
        this.eventListeners.forEach(listener => {
            listener.element.removeEventListener(listener.type, listener.handler);
        });
        this.eventListeners = [];
    }
    
    // 添加事件监听器（自动管理）
    addEventListener(element, type, handler) {
        element.addEventListener(type, handler);
        this.eventListeners.push({ element, type, handler });
    }
}

// 2. 使用示例
const viewerManager = new PDFViewerManager('pdf-container');

// 加载PDF
viewerManager.loadPDF('https://example.com/sample.pdf').then(() => {
    // 渲染第一页
    viewerManager.renderPage(1);
    
    // 添加事件监听器（自动管理）
    viewerManager.addEventListener(document.getElementById('next-btn'), 'click', () => {
        // 翻页逻辑
    });
});

// 页面卸载时清理
window.addEventListener('beforeunload', () => {
    viewerManager.cleanup();
});

五、最佳实践总结

1. 选择合适的插件

  • 简单需求：Viewer.js 或 PDF.js jQuery封装
  • 企业级需求：PDFTron WebViewer
  • 完全自定义：直接使用PDF.js

2. 性能优化清单

  • [ ] 启用Web Workers
  • [ ] 实现懒加载和分页渲染
  • [ ] 使用Canvas池减少DOM操作
  • [ ] 实现PDF缓存机制
  • [ ] 压缩和优化PDF文件

3. 安全考虑

  • XSS防护：对PDF中的文本内容进行转义
  • 文件验证：验证上传文件的MIME类型和大小
  • CORS策略：合理配置跨域访问策略
  • 内容安全策略：使用CSP头限制资源加载

4. 移动端适配

  • 实现触摸手势（滑动翻页、捏合缩放）
  • 优化Canvas渲染性能
  • 考虑使用原生PDF查看器（iOS Safari）

5. 可访问性（A11y）

// 为PDF查看器添加ARIA属性
$('#pdf-container').attr({
    'role': 'document',
    'aria-label': 'PDF文档查看器',
    'aria-live': 'polite'
});

// 键盘导航支持
$(document).keydown(function(e) {
    if (e.key === 'ArrowLeft') {
        viewer.prevPage();
    } else if (e.key === 'ArrowRight') {
        viewer.nextPage();
    } else if (e.key === '+' || e.key === '=') {
        viewer.zoomIn();
    } else if (e.key === '-') {
        viewer.zoomOut();
    }
});

六、未来趋势与替代方案

1. 现代替代方案

  • 原生浏览器支持：Chrome 94+ 支持<embed type="application/pdf">，但功能有限
  • WebAssembly：使用WASM加速PDF解析（如PDF.js的WASM版本）
  • Service Workers：离线缓存PDF文件
  • WebRTC：实时协作编辑PDF（高级场景）

2. 云服务集成

  • Google Docs Viewer：简单但功能有限
  • Microsoft Office Online：企业级集成
  • Adobe PDF Embed API：官方解决方案

3. 性能对比（2023年数据）

方案 首次加载时间 内存占用 移动端支持 成本
PDF.js + jQuery 2-5秒 中等 良好 免费
Viewer.js 1-3秒 低 优秀 免费
PDFTron WebViewer 1-2秒 低 优秀 商业
原生浏览器 秒 最低 一般 免费

七、实战案例：构建企业级PDF预览系统

项目结构

pdf-viewer-system/
├── index.html
├── css/
│   └── viewer.css
├── js/
│   ├── pdf-viewer.js
│   ├── pdf-worker.js
│   └── vendor/
│       ├── jquery.min.js
│       └── pdf.js
└── assets/
    └── sample.pdf

核心代码实现

// pdf-viewer.js
class EnterprisePDFViewer {
    constructor(options) {
        this.options = $.extend({
            container: '#pdf-viewer',
            pdfUrl: null,
            enableAnnotations: false,
            enableForms: false,
            onReady: null,
            onError: null
        }, options);
        
        this.init();
    }
    
    init() {
        // 检查浏览器兼容性
        if (!this.checkCompatibility()) {
            this.fallbackToNative();
            return;
        }
        
        // 初始化PDF.js
        this.initPDFJS();
        
        // 创建UI组件
        this.createUI();
        
        // 加载PDF
        if (this.options.pdfUrl) {
            this.loadPDF(this.options.pdfUrl);
        }
    }
    
    checkCompatibility() {
        const features = [
            'Promise' in window,
            'Worker' in window,
            'Canvas' in document.createElement('canvas')
        ];
        return features.every(f => f);
    }
    
    initPDFJS() {
        // 设置PDF.js worker
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'js/vendor/pdf.worker.js';
        
        // 配置PDF.js
        pdfjsLib.disableTextLayer = false;
        pdfjsLib.disableWebGL = false;
    }
    
    createUI() {
        const $container = $(this.options.container);
        
        // 创建工具栏
        const toolbar = `
            <div class="pdf-toolbar">
                <div class="toolbar-group">
                    <button class="btn" data-action="prev">上一页</button>
                    <span class="page-info">
                        <input type="number" id="page-input" min="1" value="1" style="width: 50px;">
                        / <span id="total-pages">0</span>
                    </span>
                    <button class="btn" data-action="next">下一页</button>
                </div>
                <div class="toolbar-group">
                    <button class="btn" data-action="zoom-out">-</button>
                    <span id="zoom-level">100%</span>
                    <button class="btn" data-action="zoom-in">+</button>
                </div>
                <div class="toolbar-group">
                    <button class="btn" data-action="download">下载</button>
                    <button class="btn" data-action="print">打印</button>
                </div>
            </div>
        `;
        
        // 创建Canvas容器
        const canvasContainer = `
            <div class="pdf-canvas-container">
                <canvas id="pdf-canvas"></canvas>
            </div>
        `;
        
        $container.append(toolbar + canvasContainer);
        
        // 绑定事件
        this.bindEvents();
    }
    
    bindEvents() {
        const $container = $(this.options.container);
        
        // 工具栏按钮
        $container.on('click', '.btn', (e) => {
            const action = $(e.target).data('action');
            this.handleAction(action);
        });
        
        // 页码输入
        $container.on('change', '#page-input', (e) => {
            const pageNum = parseInt(e.target.value);
            if (pageNum > 0 && pageNum <= this.totalPages) {
                this.renderPage(pageNum);
            }
        });
        
        // 键盘快捷键
        $(document).on('keydown', (e) => {
            if (e.ctrlKey || e.metaKey) {
                switch(e.key) {
                    case '+':
                    case '=':
                        e.preventDefault();
                        this.zoomIn();
                        break;
                    case '-':
                        e.preventDefault();
                        this.zoomOut();
                        break;
                    case 'p':
                        e.preventDefault();
                        this.print();
                        break;
                }
            }
        });
    }
    
    async loadPDF(url) {
        try {
            // 显示加载状态
            this.showLoading(true);
            
            // 获取PDF数据（支持跨域）
            const response = await fetch(url, {
                mode: 'cors',
                credentials: 'omit'
            });
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            
            const arrayBuffer = await response.arrayBuffer();
            
            // 加载PDF文档
            const loadingTask = pdfjsLib.getDocument({
                data: arrayBuffer,
                disableAutoFetch: true
            });
            
            this.pdfDoc = await loadingTask.promise;
            this.totalPages = this.pdfDoc.numPages;
            
            // 更新UI
            $('#total-pages').text(this.totalPages);
            
            // 渲染第一页
            await this.renderPage(1);
            
            // 触发就绪回调
            if (this.options.onReady) {
                this.options.onReady(this.pdfDoc);
            }
            
            this.showLoading(false);
            
        } catch (error) {
            console.error('PDF加载失败:', error);
            this.showError(error.message);
            if (this.options.onError) {
                this.options.onError(error);
            }
        }
    }
    
    async renderPage(pageNum) {
        if (!this.pdfDoc) return;
        
        try {
            // 获取页面
            const page = await this.pdfDoc.getPage(pageNum);
            
            // 计算缩放比例
            const viewport = page.getViewport({ scale: this.currentScale });
            
            // 获取Canvas
            const canvas = document.getElementById('pdf-canvas');
            const context = canvas.getContext('2d');
            
            // 设置Canvas尺寸
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            
            // 渲染页面
            const renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            
            await page.render(renderContext).promise;
            
            // 更新当前页码
            this.currentPage = pageNum;
            $('#page-input').val(pageNum);
            
            // 触发页面变化事件
            this.onPageChange(pageNum);
            
        } catch (error) {
            console.error('页面渲染失败:', error);
        }
    }
    
    handleAction(action) {
        switch(action) {
            case 'prev':
                this.prevPage();
                break;
            case 'next':
                this.nextPage();
                break;
            case 'zoom-in':
                this.zoomIn();
                break;
            case 'zoom-out':
                this.zoomOut();
                break;
            case 'download':
                this.download();
                break;
            case 'print':
                this.print();
                break;
        }
    }
    
    prevPage() {
        if (this.currentPage > 1) {
            this.renderPage(this.currentPage - 1);
        }
    }
    
    nextPage() {
        if (this.currentPage < this.totalPages) {
            this.renderPage(this.currentPage + 1);
        }
    }
    
    zoomIn() {
        this.currentScale = Math.min(this.currentScale + 0.2, 3.0);
        this.updateZoomDisplay();
        this.renderPage(this.currentPage);
    }
    
    zoomOut() {
        this.currentScale = Math.max(this.currentScale - 0.2, 0.5);
        this.updateZoomDisplay();
        this.renderPage(this.currentPage);
    }
    
    updateZoomDisplay() {
        $('#zoom-level').text(Math.round(this.currentScale * 100) + '%');
    }
    
    download() {
        if (!this.options.pdfUrl) return;
        
        const a = document.createElement('a');
        a.href = this.options.pdfUrl;
        a.download = 'document.pdf';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }
    
    print() {
        const printWindow = window.open('', '_blank');
        printWindow.document.write(`
            <html>
            <head><title>打印PDF</title></head>
            <body style="margin:0;">
                <iframe src="${this.options.pdfUrl}" 
                        style="width:100%; height:100%; border:none;"
                        onload="this.contentWindow.print();">
                </iframe>
            </body>
            </html>
        `);
    }
    
    onPageChange(pageNum) {
        // 可以在这里添加自定义逻辑
        console.log(`页面变化: ${pageNum}/${this.totalPages}`);
    }
    
    showLoading(show) {
        const $container = $(this.options.container);
        if (show) {
            $container.append('<div class="loading-overlay">加载中...</div>');
        } else {
            $container.find('.loading-overlay').remove();
        }
    }
    
    showError(message) {
        const $container = $(this.options.container);
        $container.append(`<div class="error-message">${message}</div>`);
    }
    
    fallbackToNative() {
        const $container = $(this.options.container);
        $container.html(`
            <div class="native-viewer">
                <p>您的浏览器不支持PDF.js，将使用原生查看器。</p>
                <embed src="${this.options.pdfUrl}" 
                       type="application/pdf" 
                       width="100%" 
                       height="800px">
            </div>
        `);
    }
    
    // 公共API
    destroy() {
        if (this.pdfDoc) {
            this.pdfDoc.destroy();
        }
        $(this.options.container).empty();
    }
}

// 使用示例
$(document).ready(function() {
    const viewer = new EnterprisePDFViewer({
        container: '#pdf-viewer',
        pdfUrl: 'https://example.com/sample.pdf',
        enableAnnotations: true,
        onReady: function(pdfDoc) {
            console.log('PDF系统就绪，共', pdfDoc.numPages, '页');
        },
        onError: function(error) {
            console.error('PDF加载错误:', error);
        }
    });
    
    // 暴露全局API
    window.PDFViewer = viewer;
});

八、结论

基于jQuery的PDF在线预览解决方案为开发者提供了灵活、高效的选择。通过合理选择插件、实施性能优化策略和解决常见问题，可以构建出用户体验良好的PDF预览系统。

关键建议：

  1. 根据需求选择方案：简单项目用Viewer.js，复杂项目用PDFTron
  2. 重视性能优化：懒加载、Web Workers、缓存机制必不可少
  3. 考虑移动端体验：触摸手势和响应式设计
  4. 确保安全性：验证输入、防止XSS、配置CSP
  5. 提供降级方案：当PDF.js不可用时，回退到原生查看器

随着Web技术的发展，PDF预览方案也在不断演进。建议持续关注PDF.js的更新、浏览器原生支持的进展，以及WebAssembly等新技术在PDF处理中的应用，以保持解决方案的先进性和兼容性。

通过本文提供的详细指南和代码示例，您应该能够快速构建出满足业务需求的PDF在线预览系统，并有效解决开发过程中遇到的常见问题。