前端 A 标签下载文件监听 - 使用 JavaScript 和 AJAX 方法 - 常规

在前端页面监听使用 A 标签下载文件的成功事件，主要有两种方法：

使用 JavaScript 的 'download' 属性：在前端页面的 'a' 标签中添加 'download' 属性，将后台返回的文件路径作为 'href' 属性值。当用户点击该链接进行下载时，浏览器会自动下载文件，并触发 'a' 标签的 'click' 事件。你可以在 'click' 事件中添加回调函数来监听下载成功。

<a href='path/to/file.php' download id='downloadLink'>Download file</a>

<script>
  const downloadLink = document.getElementById('downloadLink');
  downloadLink.addEventListener('click', () => {
    // 下载成功后的操作
  });
</script>

使用 AJAX 请求下载文件：通过 AJAX 请求后台 PHP 代码，后台将文件以流的形式返回给前端。在 AJAX 请求的 'success' 回调函数中，可以监听到文件的下载成功。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/file.php', true);
xhr.responseType = 'blob'; // 指定响应类型为blob
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const blob = xhr.response;
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'filename'; // 指定文件名
    link.click();
    // 下载成功后的操作
  }
};
xhr.send();

其中，第二种方法可以更加灵活地处理下载成功后的操作，例如弹出提示框、更新页面内容等。