【无标题】

不是程序员。

于 2025-06-27 17:10:38 发布

阅读量746

点赞数 20

CC 4.0 BY-SA版权

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_49220227/article/details/148957029

在通过 iframe 嵌入 PDF 文件时，若想禁止用户通过右键菜单和顶部工具栏按钮进行下载操作，可以通过以下方法实现。不过需要注意的是，这些方法只能在一定程度上限制用户操作，无法完全阻止技术熟练的用户通过其他手段获取 PDF 文件（例如直接查看浏览器开发者工具中的网络请求或使用浏览器插件）。

一、通过 `iframe` 嵌入 PDF 并禁用右键菜单

1. 嵌入 PDF 到 `iframe`

<iframe 
    src="your-pdf-file.pdf" 
    width="100%" 
    height="600px" 
    style="border: none;"
    oncontextmenu="return false;">
</iframe>

oncontextmenu="return false;"：通过此属性禁用右键菜单。

2. 使用 JavaScript 进一步禁用右键（可选）

如果希望更全面地禁用右键菜单，可以在页面中添加以下 JavaScript 代码：

<script>
    document.addEventListener('contextmenu', function(e) {
        e.preventDefault(); // 阻止默认的右键菜单行为
    });
</script>

二、通过 PDF 嵌入工具或服务限制下载

1. 使用 Google Docs Viewer（适用于公开可访问的 PDF）

Google Docs Viewer 可以嵌入 PDF 并限制一些功能，包括下载按钮（但用户仍可通过其他方式获取 PDF）：

<iframe 
    src="https://docs.google.com/gview?url=your-pdf-file.pdf&embedded=true" 
    width="100%" 
    height="600px" 
    style="border: none;"
    oncontextmenu="return false;">
</iframe>

正常开发都已经满足需求，但是测试发现浏览器自带右击οncοntextmenu="return false;"仍然可以另存为/保存 --使用邪修方法增加div z-index大于iframe opacity修改外层盖住的div透明度即可

2. 使用 PDF.js（Mozilla 的开源 PDF 查看器）

PDF.js 是一个强大的开源 PDF 查看器，可以自定义界面并移除下载按钮。以下是基本实现步骤：

下载 PDF.js：
- 从 PDF.js GitHub 仓库下载最新版本。
创建 HTML 页面：
- 创建一个 HTML 页面，嵌入 PDF.js 并加载 PDF 文件。
禁用下载按钮：
- 修改 PDF.js 的界面或通过自定义 CSS 隐藏下载按钮。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PDF Viewer</title>
    <script src="pdf.js/build/pdf.js"></script>
    <style>
        #pdf-viewer {
            width: 100%;
            height: 600px;
            border: none;
        }
        /* 隐藏下载按钮（需要根据 PDF.js 的实际类名调整） */
        .downloadButton {
            display: none !important;
        }
    </style>
</head>
<body>
    <canvas id="pdf-viewer"></canvas>
    <script>
        // 初始化 PDF.js
        pdfjsLib.getDocument('your-pdf-file.pdf').promise.then(function(pdf) {
            // 获取第一页
            pdf.getPage(1).then(function(page) {
                var viewport = page.getViewport({ scale: 1.0 });
                var canvas = document.getElementById('pdf-viewer');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        });

        // 禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        });
    </script>
</body>
</html>

3. 使用商业 PDF 嵌入服务

一些商业服务（如 Scribd、Issuu 等）提供 PDF 嵌入功能，并允许自定义界面（包括移除下载按钮）。这些服务通常需要注册账号并上传 PDF 文件，然后获取嵌入代码。

三、服务器端保护措施

除了前端限制，还可以通过服务器端措施增强安全性：

设置 HTTP 头：
- 使用 X-Content-Type-Options: nosniff 防止浏览器猜测内容类型。
- 使用 Content-Disposition: inline 强制浏览器内联显示 PDF（而非下载）。
限制访问权限：
- 通过服务器端认证（如登录验证）限制只有授权用户才能访问 PDF。
使用动态令牌：
- 为每个 PDF 请求生成一次性令牌，防止直接链接分享。