Javascript 显示“的力”；另存为；下载文件时的对话框

以下代码将文件保存到用户磁盘：

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);
}

它使用

标记来保存一些数据（在我的例子中，是从

导出的图像）

但这会直接保存到磁盘，不会提示保存文件的位置，也不会询问文件的名称

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

没有

您可以通过将字符串指定给

download

属性来指定文件名

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

否

您可以通过将字符串指定给

download

属性来指定文件名

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

是的，它被调用。 这是API的一部分，它仍然是一个草稿，但已经在所有Chromium浏览器中公开

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

一旦此方法返回的承诺得到解决，您就可以访问一个句柄，在该句柄中，您可以访问一个可写流，您可以将数据写入该流

它比

下载

要复杂一点，但它的功能也要强大得多，因为您可以以流的形式编写，而不需要将整个数据存储在内存中（比如录制视频）

在你的情况下，这会

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 );
  }
}

这是一个（和）。

是的，它被称为。 这是API的一部分，它仍然是一个草稿，但已经在所有Chromium浏览器中公开

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

一旦此方法返回的承诺得到解决，您就可以访问一个句柄，在该句柄中，您可以访问一个可写流，您可以将数据写入该流

它比

下载

要复杂一点，但它的功能也要强大得多，因为您可以以流的形式编写，而不需要将整个数据存储在内存中（比如录制视频）

在你的情况下，这会

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 );
  }
}

---

这是一个（和）。

这是否回答了您的问题？这回答了你的问题吗？这回答了你的问题吗？这回答了你的问题吗？那么这意味着如果没有默认文件夹，我可以创建“另存为”对话框？我很困惑，你的答案完全是“不”和“不可能”。你可以设置下载。你已经做到了。浏览器可能会将其保存到默认文件夹或显示另存为对话框，但您（网页的开发人员）无法控制该对话框。这意味着如果没有默认文件夹，我可以创建另存为对话框？我很困惑，你的答案完全是“不”和“不可能”。你可以设置下载。你已经做到了。浏览器可能会将其保存到默认文件夹或显示另存为对话框，但您（网页的开发人员）无法控制该对话框。哇，这太神奇了！当我看到现场演示和代码时，我想尽快将mycode应用到您的代码中，但作为初学者，我认为这将需要很长时间。谢谢你详细的回答。哇，太棒了！当我看到现场演示和代码时，我想尽快将mycode应用到您的代码中，但作为初学者，我认为这将需要很长时间。谢谢你的详细回答。