Chrome 在页面上停留一段时间后会阻止文件下载

Question

我正在开发 React 应用程序，它以格式从服务器获取一些 url

{
        filename: 'filename',
        url: 'url',
      },

然后以非常常见的方式呈现按钮

       <button onClick={() => downloadFile(file.url, file.filename)}>{file.filename}</button>

其中 downloadFile 是一个简单的函数

export const downloadFile = (url: string, filename: string) => {
  const link = document.createElement('a');
  link.href = `${url}?download`;
  link.download = `${filename}`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

所以通常当用户单击按钮时，浏览器开始下载文件。 问题是，当您在页面上花费大约 5 分钟而不刷新，然后单击按钮时，Chrome 会显示错误：“检查互联网连接”

错误图片

刷新页面/网址后，一切都恢复正常 而且这个问题并没有出现在 Mozila

Answer 1

    const downloadFile = async (fileId) => {
  try {
    const response = await fetch(`/api/getDownloadUrl?fileId=${fileId}`);
    const { url, filename } = await response.json();

    const link = document.createElement('a');
    link.href = `${url}?download`;
    link.download = `${filename}`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } catch (error) {
    console.error('Download failed:', error);
    alert('Failed to download the file. Please check your internet connection or try again later.');
  }
};

我更新了 downloadFile 函数，现在每次单击下载时它都会从服务器获取最新的下载 URL，因为存在一个问题，如果用户等待太长时间，则会收到“检查互联网连接”错误。该函数现在使用 try-catch 块来更好地处理错误：它根据 fileId 获取当前 URL 和文件名，然后创建一个临时元素来开始下载。如果失败，它会记录错误并显示一条警报，要求用户检查其互联网连接。此更改可确保 URL 始终保持最新状态，并在出现问题时改善用户体验。