如何在网页嵌入PDF并禁用下载？求JS/HTML兼容Chrome内置pdf-viewer的方案

优先前端（JS/HTML）方案 #

1. 基于Canvas渲染PDF内容 #

借助PDF.js前端库将PDF逐页渲染为Canvas元素，用户看到的是图片化的内容，完全规避Chrome内置PDF Viewer的下载控件。这种方式能有效阻止直接下载原始PDF文件，缺点是会失去文本可复制功能（若需保留可额外做交互处理）。

示例代码：

// 初始化PDF渲染函数
async function renderPDF(pdfUrl) {
  // 加载PDF文档
  const pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;
  const container = document.getElementById('pdf-render-container');

  // 逐页渲染到Canvas
  for (let pageNum = 1; pageNum <= pdfDoc.numPages; pageNum++) {
    const page = await pdfDoc.getPage(pageNum);
    const viewport = page.getViewport({ scale: 1.2 });
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    
    // 渲染页面到Canvas
    await page.render({
      canvasContext: ctx,
      viewport: viewport
    }).promise;
    
    container.appendChild(canvas);
  }
}

// 调用渲染（替换为你的PDF路径）
renderPDF('/your-protected.pdf');

2. CSS隐藏控件（临时缓解方案） #

这种方法依赖Chrome内置PDF Viewer的DOM结构，浏览器更新后可能失效，仅作为临时补充：
将PDF嵌入iframe，通过CSS隐藏下载按钮及工具栏：

/* 隐藏Chrome PDF Viewer的下载按钮和工具栏 */
iframe#pdf-embed::-webkit-scrollbar { display: none; }
#viewer #download, #viewer #secondaryToolbarButtonContainer {
  display: none !important;
}

注意：用户可通过开发者工具修改CSS恢复控件，或直接打开PDF原始链接，因此无法作为核心方案。

增强限制的补充建议 #

纯前端方案无法实现100%的下载阻止（用户可通过截图、抓包等方式获取内容），若需更强的保护，建议结合后端处理：

• 生成带时效的临时PDF访问链接，过期后自动失效
• 为PDF添加专属水印，即使被下载也能追踪来源
• 限制单IP的PDF访问次数，防止批量爬取

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