iframe 嵌入预览 PDF ,禁用右键菜单、打印下载按钮不展示

需求场景：pdf文件预览我一开始就想到了<iframe></iframe>标签去实现但是并不能满足我后续的场景(1.右上方下载、打印按钮不展示 2.禁用右键菜单)。用过的都知道iframe标签没有针对于特定按钮隐藏属性要么都展示要么都隐藏(在路径后面拼接#toolbar=0) 针对于隐藏特定按钮隐藏我这边也实现了通过定位方法透明背景样式去写但是这样写后禁用右键菜单后 (οncοntextmenu="return false;" ) 如果pdf文件很大没法滚动了

我这边也尝试了个别的依赖(vue-pdf-embed)都不好使最终选择了pdfjs+iframe 下面是具体操作方法

1.去官网下载pdfjs 记住不要太高的版本稳定版本就行因为太高的版本是mjs(服务器不认识 .mjs 文件，把它当成了二进制文件，导致 PDF.js 无法加载！)

https://github.com/mozilla/pdf.js/releases/download/v3.11.174/pdfjs-3.11.174-dist.zip

2.把下载下来的文件放到public/pdfjs

3.修改配置：pdfjs/web/viewer.html（阻止跨域、禁用右键菜单、打印下载按钮隐藏）

复制代码

 <script>
      // 强制关闭 PDF.js 跨域验证
      window.Cypress = true;
      window.PDFJS = {
        disableWebSecurity: true,
        disableOriginCheck: true,
      };
    </script>
    <script>
      // 全局禁用右键菜单
      document.addEventListener('DOMContentLoaded', function () {
        // 禁用右键
        document.addEventListener('contextmenu', function (e) {
          e.preventDefault();
          return false;
        });

        // 禁用图片另存为
        document.addEventListener('dragstart', function (e) {
          e.preventDefault();
        });

        // 禁用选择
        document.addEventListener('selectstart', function (e) {
          e.preventDefault();
        });

        // 禁用 F12 / Ctrl+Shift+I / Ctrl+Shift+J / Ctrl+U
        document.addEventListener('keydown', function (e) {
          if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'J')) || (e.ctrlKey && e.key === 'U')) {
            e.preventDefault();
            return false;
          }
        });
      });
    </script>
    <style>
      #printButton,
      #downloadButton,
      #editorFreeTextButton,
      #editorInkButton,
      #editorStampButton,
      #toolbarViewerRight,
      #toolbarViewerMiddle,
      #toolbarViewerLeft,
      #viewAttachments,
      #viewLayers,
      #editorHighlightButton {
        display: none !important;
      }
      /* 隐藏右键菜单 */
      html,
      body {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
    </style>

4.具体页面使用

复制代码

  <a-modal v-model:open="pdfVisible" width="95%" :footer="null" destroyOnClose @cancel="handleCancelPdf" style="top: 20px">
      <!-- 禁用右键菜单 -->
      <div @contextmenu.prevent style="width: 100%; height: 88vh; padding: 0; margin: 0">
        <!-- 本地 PDF.js 预览，无跨域问题 -->
        <iframe v-if="pdfVisible" :src="pdfSrc" width="100%" height="100%" frameborder="0" style="border: none" oncontextmenu="return false;" />
      </div>
    </a-modal>
  const pdfVisible = ref(false);
  const pdfSrc = ref('');

打开弹框方法
const previewFile = async (record) => {
    try {
      // ✅ 唯一能100%绕过跨域校验的方法
      const response = await fetch(record.fileUrl);
      const blob = await response.blob();
      const blobUrl = URL.createObjectURL(blob);

      // ✅ 直接加载，不触发任何跨域检查
      pdfSrc.value = `/pdfjs/web/viewer.html?file=${encodeURIComponent(blobUrl)}`;
      pdfVisible.value = true;
    } catch (e) {
      message.error('PDF 加载失败');
    }
  };
  // 关闭 PDF
  const handleCancelPdf = () => {
    pdfVisible.value = false;
    pdfSrc.value = '';
  };

5.以上就是实现全过程有不懂的可以随时交流哈