Object标签加载同名更新PDF无法读取最新版本的问题求助

问题原因 #

你加的空?参数很多浏览器会直接忽略，没法触发缓存失效，所以还是会显示旧的PDF内容。下面是几个靠谱的解决办法：

方法1：添加动态版本参数（最推荐） #

给PDF的URL加一个唯一的参数值，比如文件的最后修改时间、版本号或者时间戳，让浏览器认为这是全新资源，从而请求最新文件。

• 静态页面：每次更新PDF后手动修改参数值，比如：

  <object id="men" data="seasons/S2223/Men2023.pdf?v=20240520" type="application/pdf" width="100%" height="750px">
      <p>The file could not be read in the browser<a href="seasons/S2223/Men2023.pdf?v=20240520"> Click here to download</a></p>
  </object>
  

• 动态页面（如PHP、Node.js）：自动获取文件最后修改时间作为参数，无需手动更新：

  <object id="men" data="seasons/S2223/Men2023.pdf?v=<?php echo filemtime('seasons/S2223/Men2023.pdf'); ?>" type="application/pdf" width="100%" height="750px">
      <p>The file could not be read in the browser<a href="seasons/S2223/Men2023.pdf?v=<?php echo filemtime('seasons/S2223/Men2023.pdf'); ?>"> Click here to download</a></p>
  </object>
  

方法2：配置服务器禁用PDF缓存 #

通过服务器设置，强制浏览器不缓存PDF文件，每次访问都从服务器拉取最新版本。

• Apache服务器：在网站根目录的.htaccess文件中添加以下规则：

  <FilesMatch "\.(pdf)$">
      Header set Cache-Control "no-cache, no-store, must-revalidate"
      Header set Pragma "no-cache"
      Header set Expires 0
  </FilesMatch>
  

• Nginx服务器：在站点配置文件中添加：

  location ~* \.(pdf)$ {
      add_header Cache-Control "no-cache, no-store, must-revalidate";
      add_header Pragma "no-cache";
      add_header Expires 0;
  }
  

方法3：用JavaScript动态更新URL #

页面加载时通过JS给PDF URL添加时间戳，强制浏览器请求新内容：

document.addEventListener('DOMContentLoaded', function() {
  const pdfObj = document.getElementById('men');
  const baseUrl = pdfObj.data.split('?')[0];
  const timestamp = new Date().getTime();
  // 更新Object的data属性
  pdfObj.data = `${baseUrl}?v=${timestamp}`;
  // 同步更新下载链接
  const downloadLink = pdfObj.querySelector('a');
  downloadLink.href = `${baseUrl}?v=${timestamp}`;
});

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