当前位置：首页 > JavaScript

js实现pdf实现预览

2026-04-05 07:13:42JavaScript

使用PDF.js实现PDF预览

PDF.js是Mozilla开发的一个开源库，可在浏览器中直接渲染PDF文件，无需插件。以下是实现PDF预览的具体方法：

1. 引入PDF.js库 在HTML文件中添加PDF.js的CDN链接或下载库文件到本地：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

2. 创建预览容器 在HTML中创建一个用于显示PDF的容器：

<canvas id="pdf-canvas"></canvas>

3. 初始化PDF渲染 通过JavaScript代码加载并渲染PDF文件：

// 设置PDF.js worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';

// 加载PDF文件
const loadingTask = pdfjsLib.getDocument('yourfile.pdf');
loadingTask.promise.then(function(pdf) {
    // 获取第一页
    return pdf.getPage(1);
}).then(function(page) {
    const scale = 1.5;
    const viewport = page.getViewport({ scale: scale });

    // 准备canvas
    const canvas = document.getElementById('pdf-canvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // 渲染PDF页面
    const renderContext = {
        canvasContext: context,
        viewport: viewport
    };
    page.render(renderContext);
});

使用iframe嵌入PDF预览

对于简单的预览需求，可以使用HTML5的iframe元素直接嵌入PDF：

<iframe 
    src="yourfile.pdf" 
    width="100%" 
    height="600px"
    style="border: none;">
</iframe>

使用第三方服务实现PDF预览

如需更完整的解决方案，可以考虑集成以下服务：

Google Docs Viewer：

<iframe 
  src="https://docs.google.com/viewer?url=YOUR_PDF_URL&embedded=true" 
  width="100%" 
  height="600px"
  frameborder="0">
</iframe>

PDFObject库：

js实现pdf实现预览

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.8/pdfobject.min.js"></script>
<div id="pdf-viewer"></div>
<script>
  PDFObject.embed("yourfile.pdf", "#pdf-viewer");
</script>