如何禁用Chrome浏览器下载文件时弹出的底部下载进度条

Chrome的下载进度提示（旧版底部进度条、新版右上角下载气泡）是浏览器默认行为，针对你的场景有两种可落地的实现方案：

方案1：修改本地浏览器配置（仅开发者调试用） #

适合本地开发阶段不想被下载提示打扰的场景，不能要求普通访问用户操作：

• 地址栏输入 chrome://flags/#download-bubble 回车访问
• 找到 Enable download bubble 配置项，下拉选择 Disabled
• 按照提示重启浏览器后生效，所有下载操作都不会再弹出提示控件

方案2：前端改逻辑规避默认下载行为（生产环境适用） #

你当前用FileSaver触发前端Blob下载，本质是调用浏览器默认下载接口，必然会触发下载提示。可以替换为隐藏iframe加载的逻辑，完全不会弹出下载提示，有两种实现可选：

纯前端实现（无需改动Express后端） #

直接把生成的Blob对象塞进隐藏iframe触发下载：

// 生成图表Blob的逻辑不变
canvas.toBlob((blob) => {
  // 下载图片
  const blobUrl = URL.createObjectURL(blob);
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = blobUrl;
  document.body.appendChild(iframe);
  // 1分钟后销毁资源避免内存泄漏
  setTimeout(() => {
    URL.revokeObjectURL(blobUrl);
    iframe.remove();
  }, 60 * 1000);
})

// 生成PDF的场景同理，用jsPDF的话直接输出Blob即可
const doc = new jsPDF();
// 插入图表、添加文本等PDF生成逻辑不变
const pdfBlob = doc.output('blob');
const pdfUrl = URL.createObjectURL(pdfBlob);
const pdfIframe = document.createElement('iframe');
pdfIframe.style.display = 'none';
pdfIframe.src = pdfUrl;
document.body.appendChild(pdfIframe);
setTimeout(() => {
  URL.revokeObjectURL(pdfUrl);
  pdfIframe.remove();
}, 60 * 1000);

后端中转实现（适合需要存文件、后续溯源的场景） #

如果需要把生成的文件存到服务端，可以走Express中转：

1. 前端把生成的文件Base64传给后端，后端写入临时目录返回临时下载地址
2. 前端用隐藏iframe加载临时地址触发下载，后端定时清理过期临时文件即可
   核心Express示例代码：

const fs = require('fs');
const path = require('path');
// 提前创建temp临时目录
const TEMP_DIR = path.join(__dirname, 'temp');
fs.existsSync(TEMP_DIR) || fs.mkdirSync(TEMP_DIR);

// 接收前端传的Base64存储临时文件
app.post('/api/save-temp', (req, res) => {
  const { base64, suffix } = req.body;
  const fileBuffer = Buffer.from(base64.split(',')[1], 'base64');
  const fileName = `${Date.now()}.${suffix}`;
  const filePath = path.join(TEMP_DIR, fileName);
  fs.writeFileSync(filePath, fileBuffer);
  res.json({ url: `/temp/${fileName}` });
})

// 配置临时文件静态访问路由
app.use('/temp', express.static(TEMP_DIR));

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