如何阻止用户PC端IDM自动下载网站内供在线预览的PDF文件

方法1：动态加载Blob流形式的PDF资源 #

不要直接将服务端返回的PDF静态URL传入组件，改为前端主动请求二进制流，生成临时Blob URL供组件使用。IDM无法识别这类动态生成的无.pdf后缀的临时链接，不会触发捕获逻辑。

import { useState, useEffect } from 'react';
import { Viewer, Worker } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

const PdfPreview = ({ pdfId }) => {
  const [pdfUrl, setPdfUrl] = useState('');

  useEffect(() => {
    const fetchPdf = async () => {
      try {
        // 请求PDF二进制流，可携带自定义鉴权头
        const res = await fetch(`/api/get-course-pdf?id=${pdfId}`, {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('login_token')}`
          }
        });
        const blob = await res.blob();
        // 生成临时Blob URL
        const objectUrl = URL.createObjectURL(blob);
        setPdfUrl(objectUrl);
      } catch (err) {
        console.error('PDF加载失败', err);
      }
    };
    fetchPdf();

    // 组件卸载时释放Blob URL避免内存泄漏
    return () => {
      if (pdfUrl) URL.revokeObjectURL(pdfUrl);
    };
  }, [pdfId]);

  if (!pdfUrl) return <div>文档加载中...</div>;

  return (
    <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js">
      <Viewer fileUrl={pdfUrl} />
    </Worker>
  );
};

方法2：服务端调整响应规则 #

• 将Content-Disposition响应头设置为inline，明确告知浏览器该资源用于直接预览，而非下载
• 取消PDF资源路径的.pdf后缀，改用接口路由形式返回资源（如/api/getCourseMaterial?id=123），避免IDM通过后缀规则匹配到PDF资源
• 接口开启鉴权校验，要求请求必须携带自定义头（如Authorization），IDM捕获链接后无法自动携带自定义请求头，下载请求会直接被服务端拒绝，不会弹出下载提示

方法3：引导用户配置IDM例外（可选补充方案） #

若仍有部分用户因IDM自定义规则过强触发拦截，可在站点内添加操作提示，引导用户将当前站点域名添加到IDM的例外列表中：打开IDM设置 -> 例外 -> 输入当前站点域名并确认，IDM将不再捕获当前站点的任何资源请求。

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