当前位置：首页 > JavaScript

js实现pdf在线预览

2026-01-13 13:56:51JavaScript

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

PDF.js是由Mozilla开发的一个开源JavaScript库，可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤：

引入PDF.js库 在HTML文件中引入PDF.js的核心库和渲染库：

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

创建Canvas容器 在HTML中创建一个Canvas元素用于渲染PDF：
```
<canvas id="pdf-canvas"></canvas>
```

初始化PDF.js并渲染 使用JavaScript代码加载和渲染PDF：

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

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

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

使用iframe嵌入PDF预览

另一种简单的方法是使用HTML5的iframe元素直接嵌入PDF文件：

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

这种方法依赖浏览器的内置PDF查看器，不同浏览器可能表现不一致。

使用第三方服务预览PDF

对于不想自己托管PDF文件的场景，可以使用Google Docs Viewer等第三方服务：

<iframe 
  src="https://docs.google.com/viewer?url=http://yourdomain.com/your-file.pdf&embedded=true"
  width="100%"
  height="600px"
  frameborder="0">
</iframe>

处理大文件的分页加载

对于大型PDF文件，可以实现分页加载功能：

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

function renderPage(pageNum) {
  pdf.getPage(pageNum).then(function(page) {
    const viewport = page.getViewport({ scale: 1.0 });
    canvas.width = viewport.width;
    canvas.height = viewport.height;

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

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

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