如何忽略Content-disposition:attachment头，在<object>中嵌入PDF？

关于能否强制忽略Content-Disposition:attachment响应头 #

不能直接在前端强制忽略这个响应头。Content-Disposition:attachment是服务器明确告知浏览器“该资源需触发下载”的指令，浏览器会优先遵循这个规则——即便用<object>标签尝试嵌入，浏览器仍会触发PDF的新标签打开或下载行为，不会将内容填充到<object>元素中。

可行方案：通过JS获取文件后转为Blob URL/Data URL嵌入<object> #

可以通过前端JS先请求获取PDF二进制内容，再将其转为Blob URL或Data URL赋值给<object>的data属性，绕开服务器的attachment指令。

方案1：使用Blob URL（推荐，性能更优） #

Blob URL不会将整个PDF转为base64字符串，而是创建指向内存中Blob的临时URL，适合大文件场景：

<object id="pdf-container" type="application/pdf" width="100%" height="600px"></object>

<script>
const pdfObject = document.getElementById('pdf-container');
const apiUrl = '你的PDF接口URL';

fetch(apiUrl)
  .then(res => res.blob())
  .then(blob => {
    // 创建Blob URL
    const blobUrl = URL.createObjectURL(blob);
    pdfObject.data = blobUrl;
    
    // 资源加载完成后释放Blob URL，避免内存泄漏
    pdfObject.addEventListener('load', () => {
      URL.revokeObjectURL(blobUrl);
    });
  })
  .catch(err => {
    console.error('PDF加载失败:', err);
    // 可添加错误提示，比如：pdfObject.innerHTML = '<p>无法加载PDF文档</p>';
  });
</script>

方案2：使用Data URL #

如果PDF文件较小，也可以转为Data URL嵌入：

<object id="pdf-container" type="application/pdf" width="100%" height="600px"></object>

<script>
const pdfObject = document.getElementById('pdf-container');
const apiUrl = '你的PDF接口URL';

fetch(apiUrl)
  .then(res => res.blob())
  .then(blob => {
    const reader = new FileReader();
    reader.onload = () => {
      pdfObject.data = reader.result;
    };
    reader.readAsDataURL(blob);
  })
  .catch(err => {
    console.error('PDF加载失败:', err);
  });
</script>

注意事项 #

• 跨域问题：如果前端页面和PDF接口不在同一域名下，必须确保接口服务器配置了CORS，允许你的前端域名发起请求（响应头需包含Access-Control-Allow-Origin等字段），否则请求会被浏览器拦截。
• 内存占用：Data URL会将文件转为base64字符串，体积比原文件大30%左右，大文件场景优先用Blob URL。

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