Flutter Web部署至IIS后showSaveFilePicker函数失效问题

数据老陈

2026-8-22

解决Flutter Web部署到IIS后showSaveFilePicker不可用的问题

问题根源

window.showSaveFilePicker属于File System Access API，该API有严格的运行环境限制：

仅在安全上下文中可用（即HTTPS协议或localhost本地环境）
本地调试时用的是localhost，属于浏览器认可的安全上下文，所以功能正常；但部署到IIS如果使用HTTP协议，会触发浏览器安全限制，导致API被禁用，抛出TypeError: window.showSaveFilePicker is not a function错误。

解决方案

方案1：将IIS站点配置为HTTPS

这是符合API要求的标准解决方案，步骤如下：

在IIS中为站点申请或导入SSL证书（测试环境可使用自签证书，生产环境建议使用正规CA颁发的证书）
打开站点的「绑定」设置，添加HTTPS绑定并选择对应的SSL证书
访问项目时使用https://你的域名/路径，此时浏览器会识别为安全上下文，showSaveFilePicker即可正常工作

方案2：改用兼容所有环境的传统下载方式

如果无法配置HTTPS，或者需要兼容更多浏览器环境，可以放弃File System Access API，改用HTML5的传统文件下载逻辑，修改app.js中的saveFile函数：

function saveFile(blob, fileName) {
  // 创建临时URL指向Blob资源
  const url = URL.createObjectURL(blob);
  // 创建隐藏的a标签触发下载
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = fileName;
  // 触发点击后清理临时资源
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(url);
}

这个方法无需依赖特殊API，在HTTP/HTTPS环境下都能正常工作，兼容性覆盖所有现代浏览器。