使用 JavaScript 库显示 PDF 工具栏 - 放大缩小功能 - 常规

```html <!DOCTYPE html> <html> <head> <title>PDF Viewer</title> <style> #pdfContainer { height: 500px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.8.335/pdf.min.js"></script> </head> <body> <div id="pdfContainer"></div>

// 加载PDF文件
PDFJS.getDocument('path/to/your/pdf/file.pdf').promise.then(function(pdf) {
  // 获取第一页
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport({ scale: scale });
    
    // 创建一个canvas元素来显示PDF页面
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    container.appendChild(canvas);
    
    // 渲染PDF页面到canvas上
    page.render({ canvasContext: context, viewport: viewport });
    
    // 创建放大和缩小按钮
    var zoomInButton = document.createElement('button');
    zoomInButton.innerHTML = '放大';
    zoomInButton.addEventListener('click', function() {
      scale += 0.1;
      viewport = page.getViewport({ scale: scale });
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      page.render({ canvasContext: context, viewport: viewport });
    });
    container.appendChild(zoomInButton);
    
    var zoomOutButton = document.createElement('button');
    zoomOutButton.innerHTML = '缩小';
    zoomOutButton.addEventListener('click', function() {
      scale -= 0.1;
      viewport = page.getViewport({ scale: scale });
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      page.render({ canvasContext: context, viewport: viewport });
    });
    container.appendChild(zoomOutButton);
  });
});

</script> </body> </html> ```

上述示例代码使用PDF.js加载PDF文件，并在一个canvas元素中显示第一页。同时，它还创建了放大和缩小按钮，并通过改变缩放比例重新渲染PDF页面来实现放大和缩小功能。您可以根据需要自定义工具栏的样式和功能。