如何在pdfjs-dist中配置显示带工具栏与侧边栏的PDF内容

下面是一套完整的实现代码，包含基础工具栏（翻页、缩放、页码显示）和PDF渲染逻辑，直接整合到你的现有代码里即可：

HTML 结构 #

<div class="pdf-toolbar">
  <button id="prev-page">上一页</button>
  <span id="page-info">第 <span id="current-page">1</span> 页 / <span id="total-pages">0</span> 页</span>
  <button id="next-page">下一页</button>
  <button id="zoom-out">缩小</button>
  <button id="zoom-in">放大</button>
</div>
<div class="pdf-container">
  <canvas id="pdf-canvas"></canvas>
</div>

CSS 样式（可选，用于美化布局） #

.pdf-toolbar {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #f5f5f5;
  align-items: center;
  margin-bottom: 10px;
}

.pdf-toolbar button {
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
}

.pdf-container {
  display: flex;
  justify-content: center;
}

#pdf-canvas {
  border: 1px solid #eee;
}

JavaScript 逻辑 #

// 导入pdfjs-dist的核心和worker
import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

// 配置worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

// DOM元素引用
const canvas = document.getElementById('pdf-canvas');
const ctx = canvas.getContext('2d');
const prevBtn = document.getElementById('prev-page');
const nextBtn = document.getElementById('next-page');
const currentPageEl = document.getElementById('current-page');
const totalPagesEl = document.getElementById('total-pages');
const zoomOutBtn = document.getElementById('zoom-out');
const zoomInBtn = document.getElementById('zoom-in');

// 全局变量
let pdfDoc = null;
let currentPage = 1;
let zoom = 1.0;

// 加载PDF文档
async function loadPDF(url) {
  pdfDoc = await pdfjsLib.getDocument(url).promise;
  totalPagesEl.textContent = pdfDoc.numPages;
  renderPage(currentPage);
}

// 渲染指定页面
async function renderPage(pageNum) {
  const page = await pdfDoc.getPage(pageNum);
  const viewport = page.getViewport({ scale: zoom });
  
  // 设置画布尺寸匹配页面
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  
  // 渲染页面到画布
  const renderContext = {
    canvasContext: ctx,
    viewport: viewport
  };
  await page.render(renderContext).promise;
  
  // 更新页码显示与按钮状态
  currentPageEl.textContent = pageNum;
  currentPage = pageNum;
  prevBtn.disabled = currentPage === 1;
  nextBtn.disabled = currentPage === pdfDoc.numPages;
}

// 绑定工具栏按钮事件
prevBtn.addEventListener('click', () => {
  if (currentPage > 1) renderPage(currentPage - 1);
});

nextBtn.addEventListener('click', () => {
  if (currentPage < pdfDoc.numPages) renderPage(currentPage + 1);
});

zoomInBtn.addEventListener('click', () => {
  zoom += 0.2;
  renderPage(currentPage);
});

zoomOutBtn.addEventListener('click', () => {
  if (zoom > 0.5) {
    zoom -= 0.2;
    renderPage(currentPage);
  }
});

// 加载目标PDF，替换为你的文件路径
loadPDF('/path/to/your/pdf/file.pdf');

关键说明 #

• 把HTML结构插入到你的页面中，CSS可以根据项目风格自由调整
• 若使用Vue/React等框架，直接将JS逻辑放到组件的生命周期钩子中即可
• 替换loadPDF中的路径为你实际的PDF文件地址
• 如需扩展功能（如打印、下载），只需添加对应按钮并绑定事件：打印用window.print()，下载可通过创建a标签触发文件流下载

内容的提问来源于stack exchange，提问作者Tam Ho Chi