如何在HTML中控制PDF渲染以显示分页与边距？

首先明确：你已经在使用PDF.js了——你引入的pdf.min.js就是PDF.js的核心库，pdfjsLib是它暴露的全局API对象，所以你搜索到的PDF.js官方文档完全适用。

要实现类似Chrome PDF查看器的分页和边距效果，你可以通过以下方式修改代码：

核心修改点 #

• 给每个PDF页面添加独立容器，通过CSS设置边距、背景，模拟真实分页的视觉效果
• 可选：让页面自适应容器宽度，同时保持PDF原始比例
• 优化异步渲染逻辑，让代码更易读

修改后的完整代码 #

HTML结构 #

<div id="pdfRenderer" style="max-width: 800px; margin: 0 auto;"></div>

CSS样式 #

.pdf-page-container {
  margin: 20px 0; /* 上下边距，模拟分页间隔 */
  padding: 15px; /* 页面内边距 */
  background-color: #fff; /* 页面背景 */
  box-shadow: 0 0 5px rgba(0,0,0,0.1); /* 可选：添加阴影增强层次感 */
  border-radius: 4px;
}

.pdf-page-container canvas {
  display: block;
  margin: 0 auto; /* 让canvas居中 */
  max-width: 100%; /* 自适应容器宽度 */
}

JavaScript代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js"></script>
<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.worker.min.js';
</script>
  
<script>
  const container = document.getElementById('pdfRenderer');

  // 用async/await优化渲染逻辑
  async function renderPage(pageNumber, pdf) {
    const page = await pdf.getPage(pageNumber);
    
    // 创建页面容器
    const pageContainer = document.createElement('div');
    pageContainer.classList.add('pdf-page-container');

    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    // 自适应容器宽度，计算合适的缩放比例
    const containerWidth = container.clientWidth;
    const viewport = page.getViewport({ scale: 1 });
    const scale = containerWidth / viewport.width;
    const scaledViewport = page.getViewport({ scale });

    canvas.height = scaledViewport.height;
    canvas.width = scaledViewport.width;

    await page.render({
      canvasContext: context,
      viewport: scaledViewport
    }).promise;

    pageContainer.appendChild(canvas);
    container.appendChild(pageContainer);

    if (pageNumber < pdf.numPages) {
      await renderPage(pageNumber + 1, pdf);
    }
  }

  pdfjsLib.getDocument('Fergus-pdf-small.pdf').promise.then(async pdf => {
    await renderPage(1, pdf);
  });
</script>

额外说明 #

• 如果需要更接近Chrome的完整体验（比如页码导航、缩放控制），可以直接使用PDF.js官方提供的Viewer组件，它已经封装了所有常用功能，无需从零实现
• 你可以在PDF.js官方文档中找到更多API细节，比如页面渲染参数、事件监听等

内容的提问来源于stack exchange，提问作者user1476044