网页嵌入PDF时object与embed标签均不生效如何解决

问题产生原因 #

• 浏览器原生PDF渲染支持不足：部分老旧浏览器、移动端浏览器未内置PDF渲染能力，无法直接通过<object>、<embed>标签解析渲染PDF内容。
• 资源路径匹配错误：代码中同时使用了绝对路径/test.pdf和相对路径test.pdf，如果PDF文件的实际存放位置与路径预期不符，会导致资源加载失败。
• 服务端响应头配置错误：如果服务端返回PDF资源时的Content-Type响应头未设置为application/pdf，或者开启了X-Content-Type-Options: nosniff配置，会导致浏览器无法正确识别PDF资源类型。
• 跨域访问限制：如果PDF资源和页面所属域名不一致，且服务端未配置对应的CORS跨域许可，浏览器会拦截PDF资源的加载请求。
• PDF文件本身异常：如果test.pdf文件损坏、被加密或者体积过大加载超时，也会导致渲染失败。

解决方法 #

• 统一资源路径：首先直接在浏览器地址栏输入你代码中填写的PDF路径，确认资源可以正常访问，再统一代码中所有引用的PDF路径，避免绝对路径和相对路径混用导致的加载异常。
• 调整服务端配置：配置服务端返回PDF资源时携带正确的响应头：Content-Type: application/pdf，跨域场景下补充配置Access-Control-Allow-Origin头允许页面域名访问。
• 更换兼容性更好的嵌入方案：优先选用PDF.js作为渲染方案，完全基于JavaScript实现PDF渲染，不依赖浏览器原生PDF支持，适配全平台浏览器；也可以用<iframe>标签替代<object>、<embed>标签，兼容性更稳定，示例代码如下：

<iframe src="/test.pdf#toolbar=0" width="250" height="200">
  <p>当前浏览器不支持PDF预览，请 <a href="/test.pdf">下载PDF文件</a> 查看。</p>
</iframe>

• 保留降级逻辑：确保嵌入标签内的降级下载提示正常展示，在所有渲染方案都失效的场景下，用户仍可以通过下载PDF查看内容。

内容的提问来源于stack exchange，提问作者Hasan A Yousef