当前位置：首页 > JavaScript

js实现pdf在线预览

2026-02-28 18:23:13JavaScript

使用PDF.js实现PDF在线预览

PDF.js是由Mozilla开发的一个开源JavaScript库，可以在网页中直接渲染PDF文件，无需依赖任何插件。以下是实现PDF在线预览的方法：

引入PDF.js库 在HTML文件中引入PDF.js的核心库和查看器CSS文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf_viewer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

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

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

加载和渲染PDF 使用JavaScript代码加载和渲染PDF文件：

const url = 'your-pdf-file.pdf';
const canvas = document.getElementById('pdf-canvas');

pdfjsLib.getDocument(url).promise.then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    const viewport = page.getViewport({ scale: 1.0 });
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    const renderContext = {
      canvasContext: canvas.getContext('2d'),
      viewport: viewport
    };

    page.render(renderContext);
  });
});

使用iframe嵌入PDF预览

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

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

这种方法依赖于浏览器内置的PDF查看器功能，不同浏览器的显示效果可能有所差异。

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

对于不需要本地处理的场景，可以考虑使用Google Docs Viewer等第三方服务：

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

这种方法简单快捷，但需要注意隐私和安全性问题。

实现多页PDF预览

对于需要显示多页PDF的情况，可以扩展PDF.js的实现：

const url = 'your-pdf-file.pdf';
const container = document.getElementById('pdf-container');

pdfjsLib.getDocument(url).promise.then(function(pdf) {
  for (let i = 1; i <= pdf.numPages; i++) {
    pdf.getPage(i).then(function(page) {
      const canvas = document.createElement('canvas');
      container.appendChild(canvas);

      const viewport = page.getViewport({ scale: 1.0 });
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      page.render({
        canvasContext: canvas.getContext('2d'),
        viewport: viewport
      });
    });
  }
});

添加PDF导航控件

为PDF预览添加页面导航功能：

let currentPage = 1;
const totalPages = pdf.numPages;

function renderPage(num) {
  pdf.getPage(num).then(function(page) {
    // 渲染逻辑
  });
}

document.getElementById('prev').addEventListener('click', function() {
  if (currentPage > 1) {
    currentPage--;
    renderPage(currentPage);
  }
});

document.getElementById('next').addEventListener('click', function() {
  if (currentPage < totalPages) {
    currentPage++;
    renderPage(currentPage);
  }
});

处理大文件的分块加载

对于大PDF文件，可以实现分块加载优化性能：

const loadingTask = pdfjsLib.getDocument({
  url: 'large-file.pdf',
  rangeChunkSize: 65536, // 64KB chunks
  disableAutoFetch: true
});

loadingTask.onProgress = function(progressData) {
  const percent = Math.round((progressData.loaded / progressData.total) * 100);
  console.log(`Loading: ${percent}%`);
};

添加文本选择功能

PDF.js支持文本选择和搜索功能：

js实现pdf在线预览

page.getTextContent().then(function(textContent) {
  pdfjsLib.renderTextLayer({
    textContent: textContent,
    container: textLayerDiv,
    viewport: viewport,
    textDivs: []
  });
});

以上方法提供了多种实现PDF在线预览的方案，可以根据具体需求选择最适合的方式。PDF.js功能强大但实现相对复杂，iframe方法简单但功能有限，第三方服务便捷但有隐私考量。