如何阻止embed标签自动下载文件，仅实现内容展示？

• 检查服务器响应头
  服务器返回的Content-Disposition头是核心影响因素：如果值为attachment，浏览器会默认触发下载；需改为inline，明确告知浏览器以内嵌方式展示文件。例如后端可设置响应头：Content-Disposition: inline; filename="target-file.pdf"。

• 优化标签配置
  给标签明确指定文件类型，帮助浏览器正确识别渲染逻辑，以PDF为例：

  <embed 
    src={`${url}`} 
    type="application/pdf" 
    width="100%" 
    height="600px"
    title="内嵌展示文件"
  />
  

• 换用专用渲染库（针对PDF）
  若上述方法无效，直接用PDF.js封装的React组件（如react-pdf）渲染，通过将PDF内容转为Canvas/SVG展示，彻底规避浏览器默认下载行为：

  import { Document, Page } from 'react-pdf';
  import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
  
  const FileViewer = ({ fileUrl }) => {
    return (
      <Document file={fileUrl}>
        <Page pageNumber={1} />
        {/* 可循环渲染多页内容 */}
      </Document>
    );
  };
  

• 处理非PDF格式文件
  浏览器对Office文档（Word/Excel）等格式原生支持有限，容易触发下载。可先将文件转为PDF格式再内嵌，或使用支持在线预览的组件（注意文件隐私风险）。

• 验证文件URL
  确保URL直接指向文件资源，而非跳转链接或带下载参数的地址，部分跳转逻辑会强制触发下载。

内容的提问来源于stack exchange，提问作者Tùng Phạm