如何在iframe中展示PDF时保留工具栏并隐藏下载、打印选项

方法一：利用浏览器内置PDF Viewer的URL参数（仅部分浏览器支持） #

Chrome、Edge等基于Chromium的浏览器支持通过URL后缀参数控制内置PDF工具栏的显示项。你可以在PDF链接后添加#toolbar=1&download=0&print=0，实现保留工具栏的同时隐藏下载和打印按钮。

修改后的代码如下：

<!DOCTYPE html>
<html lang="en">
<body style="margin: 0; padding: 0; overflow: hidden">
  <iframe 
    src="https://www.africau.edu/images/default/sample.pdf#toolbar=1&download=0&print=0"
    style="
      overflow: hidden;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    "
    type='application/pdf'
  ></iframe>
</body>
</html>

注意：该方案局限性明显——Firefox等非Chromium浏览器不识别这些参数，仍会显示完整工具栏按钮。若需跨浏览器兼容，优先使用下方方案。

方法二：使用PDF.js自定义渲染（跨浏览器兼容，更可控） #

PDF.js是开源PDF渲染库，可完全自定义工具栏的功能与显示项，彻底移除下载、打印按钮，同时保留其他工具栏功能。

实现步骤： #

1. 下载PDF.js的库文件（包含pdf.js和pdf.worker.js），放置到项目目录中。
2. 编写如下HTML代码自定义工具栏：

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body { margin: 0; padding: 0; }
    .pdf-toolbar {
      padding: 8px;
      background: #f5f5f5;
      border-bottom: 1px solid #ddd;
    }
    .pdf-toolbar button {
      margin-right: 8px;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
    }
    #pdf-container {
      width: 100%;
      height: calc(100vh - 48px);
    }
  </style>
</head>
<body>
  <div class="pdf-toolbar">
    <!-- 只保留需要的工具栏按钮，移除下载、打印 -->
    <button id="zoom-out">缩小</button>
    <button id="zoom-in">放大</button>
    <span id="page-info"></span>
    <button id="prev-page">上一页</button>
    <button id="next-page">下一页</button>
  </div>
  <div id="pdf-container"></div>

  <script src="./pdf.js"></script>
  <script>
    // 初始化PDF.js
    const url = 'https://www.africau.edu/images/default/sample.pdf';
    let pdfDoc = null;
    let currentPage = 1;
    let scale = 1.0;

    // 获取DOM元素
    const container = document.getElementById('pdf-container');
    const zoomOutBtn = document.getElementById('zoom-out');
    const zoomInBtn = document.getElementById('zoom-in');
    const pageInfo = document.getElementById('page-info');
    const prevPageBtn = document.getElementById('prev-page');
    const nextPageBtn = document.getElementById('next-page');

    // 加载PDF文档
    pdfjsLib.getDocument(url).promise.then(doc => {
      pdfDoc = doc;
      pageInfo.textContent = `第 ${currentPage} 页 / 共 ${pdfDoc.numPages} 页`;
      renderPage(currentPage);
    });

    // 渲染指定页面
    function renderPage(pageNum) {
      pdfDoc.getPage(pageNum).then(page => {
        const viewport = page.getViewport({ scale });
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        container.innerHTML = '';
        container.appendChild(canvas);

        const renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        page.render(renderContext);
      });
    }

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

    zoomInBtn.addEventListener('click', () => {
      if (scale < 2.0) {
        scale += 0.1;
        renderPage(currentPage);
      }
    });

    prevPageBtn.addEventListener('click', () => {
      if (currentPage > 1) {
        currentPage--;
        pageInfo.textContent = `第 ${currentPage} 页 / 共 ${pdfDoc.numPages} 页`;
        renderPage(currentPage);
      }
    });

    nextPageBtn.addEventListener('click', () => {
      if (currentPage < pdfDoc.numPages) {
        currentPage++;
        pageInfo.textContent = `第 ${currentPage} 页 / 共 ${pdfDoc.numPages} 页`;
        renderPage(currentPage);
      }
    });
  </script>
</body>
</html>

说明： #

• 该方案完全自定义工具栏，可根据需求添加或移除按钮，彻底规避下载、打印功能。
• 所有主流浏览器均支持PDF.js，兼容性更强。

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