下载文件时强制显示“另存为”对话框

Question

下面的代码确实将文件保存到用户的磁盘：

function handleSaveImg(event){
  const image = canvas.toDataURL();
  const saveImg = document.createElement('a');
  saveImg.href = image;
  saveImg.download= saveAs;
  saveImg.click();
}

if(saveMode){
  saveMode.addEventListener("click", handleSaveImg);
}

它使用<a>标记来保存一些数据（在我的例子中，是从<canvas>导出的图像）。

但这直接保存到磁盘，没有提示询问文件保存在哪里，也不用哪个名称。

我想强制显示“另存为”对话框，以便用户必须选择保存该文件的位置。
有什么办法吗？

Answer 1

是的，它被称为showSaveFilePicker() 。

这是文件系统访问API 的一部分，目前仍是草案，但已在所有 Chromium 浏览器中公开。

这个 API 非常强大，可以让您的代码直接访问用户的磁盘，因此它仅在安全上下文中可用。

一旦此方法返回的 Promise 解析后，您将可以访问一个句柄，您可以在该句柄中访问可以写入数据的 WritableStream。

它比download复杂一点，但也更强大，因为你可以写成 stream，不需要在 memory 中拥有全部数据（想想录制视频）。

在你的情况下，这会给

async function handleSaveImg(event){
  const image = await new Promise( (res) => canvas.toBlob( res ) );
  if( window.showSaveFilePicker ) {
    const handle = await showSaveFilePicker();
    const writable = await handle.createWritable();
    await writable.write( image );
    writable.close();
  }
  else {
    const saveImg = document.createElement( "a" );
    saveImg.href = URL.createObjectURL( image );
    saveImg.download= "image.png";
    saveImg.click();
    setTimeout(() => URL.revokeObjectURL( saveImg.href ), 60000 );
  }
}

这是一个现场演示，（和代码）。

Answer 2

不。

您可以通过将字符串分配给download属性来指定文件名。

当浏览器配置为将下载内容保存到默认文件夹而不提示时，无法说服浏览器显示另存为对话框。 这完全在用户的控制之下。