JavaScript文件下载：系统保存弹窗引发通知时机异常问题求助

你当前的代码里，触发a标签点击后，浏览器会立刻执行后面的setOpen(true)，完全不等用户操作保存弹窗，所以通知会提前弹出来。核心原因是：浏览器不会给网页暴露系统级保存弹窗的任何事件（比如保存/取消按钮点击），也没法直接监听文件下载完成的状态——因为这个下载是浏览器和系统交互的过程，网页无权干预。

下面给你几个可行的处理思路：

思路1：利用页面焦点变化间接判断弹窗关闭 #

当系统保存弹窗弹出时，页面会失去焦点；用户关闭弹窗（不管点了保存还是取消），页面会重新获得焦点。我们可以监听这个焦点事件，在弹窗关闭后再显示通知：

const type = 'text/json';
const fileName = `${programName}.json`;
const data = JSON.stringify(json);
const blob = new Blob([data], { type });

const a = document.createElement('a');
a.download = fileName;
a.href = URL.createObjectURL(blob);
const clickEvt = new MouseEvent('click', {
  view: window,
  bubbles: true,
  cancelable: true,
});

// 监听页面重新获取焦点
function onPageFocus() {
  window.removeEventListener('focus', onPageFocus);
  // 弹窗已关闭，显示通知
  setOpen(true);
}
window.addEventListener('focus', onPageFocus);

a.dispatchEvent(clickEvt);
a.remove();

注意：这个方法没法区分用户是保存了文件还是取消了下载，只能知道弹窗已经关闭。

思路2：针对前端生成的Blob，先验证有效性（可选） #

因为你的Blob是前端生成的，理论上不会出现下载失败的情况（除非用户取消）。如果想确保Blob能正常被浏览器识别，可以用FileReader先读取一遍，确认没问题再触发下载：

const type = 'text/json';
const fileName = `${programName}.json`;
const data = JSON.stringify(json);
const blob = new Blob([data], { type });

const reader = new FileReader();
reader.onload = function() {
  // Blob读取成功，触发下载
  const a = document.createElement('a');
  a.download = fileName;
  a.href = URL.createObjectURL(blob);
  const clickEvt = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true,
  });

  function onPageFocus() {
    window.removeEventListener('focus', onPageFocus);
    setOpen(true);
  }
  window.addEventListener('focus', onPageFocus);

  a.dispatchEvent(clickEvt);
  a.remove();
};
reader.onerror = function() {
  // Blob生成失败，显示错误通知
  // 这里可以替换成你的失败通知逻辑
  alert('文件生成失败');
};
reader.readAsText(blob);

关键说明 #

浏览器出于安全和隐私保护，完全隔离了网页与系统级保存弹窗的交互，所以没有任何原生API能直接监听用户点击了保存还是取消按钮。上面的方法都是基于间接行为的折中方案，是目前前端能做到的最优解。

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