js 下载文件后弹出保存框

发表于 分类于 ， ， 本文字数： 721 阅读时长 ≈ 1 分钟

本文介绍了如何在前端 js 在下载文件时，弹出另存为对话框，方便用户可以选择保存的位置。

正文

可以使用 showSaveFilePicker() API 来实现，这个实现是 File System Access API 的一部分，虽然它仍然是一个草案，但是可以在 Chromuim 内核的浏览器中使用。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 );
  }
}

参考

  1. live demo
  2. code
  3. Force showing the "Save as" dialog box when downloading a file