javascript 通过window.showSaveFilePicker下载时,有没有办法在底部显示下载的文件

qxgroojn  于 12个月前  发布在  Java
关注(0)|答案(2)|浏览(250)

我希望用户能够提供下载位置,而不是有文件自动下载到默认位置。我能够做到这一点,但现在用户无法看到它用来显示自动下载时,在浏览器的底部下载的文件。我想两者都有优势(能够选择下载位置,并显示在底部下载的文件)。
这就是我现在的代码。

if ('showSaveFilePicker' in window) {
          window
            .showSaveFilePicker({ suggestedName: `${fileName}.mp4` })
            .then((fileHandle) => fileHandle.createWritable())
            .then((stream) => {
              stream.write(blob);
              stream.close();
            })
            // eslint-disable-next-line no-console
            .catch((err) => console.log('SaveFile aborted'));
        } else {
          const url = window.URL.createObjectURL(new Blob([blob]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', `${fileName}.mp4`);
          document.body.appendChild(link);
          link.click();
          link.parentNode.removeChild(link);
 }

字符串

uinbv5nw

uinbv5nw1#

目前这似乎是不可能的-github issue
请注意,当您在Chrome中对图像使用保存时,会出现文件拾取器,下载内容会显示在浏览器中,您可以从浏览器中选择的文件夹中打开它。但这似乎不适用于文件系统访问API。
苏,我想我们将需要使用一些自定义弹出窗口或通知下载正在进行/完成.如果有人做了这项工作或有更好的想法,请分享!

omvjsjqw

omvjsjqw2#

您可以手动添加/撤销元素,如下所示:

if ('showSaveFilePicker' in window) {
  window
    .showSaveFilePicker({ suggestedName: `${fileName}.mp4` })
    .then((fileHandle) => fileHandle.createWritable())
    .then((stream) => {
      stream.write(blob);
      stream.close();
    })
    .then(() => {
      // Create a temporary URL and link to display the downloaded file at the bottom of the browser
      const tempUrl = window.URL.createObjectURL(blob);
      const tempLink = document.createElement('a');
      tempLink.href = tempUrl;
      tempLink.setAttribute('download', `${fileName}.mp4`);
      document.body.appendChild(tempLink);
      tempLink.style.display = 'none';
      tempLink.click();
      setTimeout(() => {
        document.body.removeChild(tempLink);
        window.URL.revokeObjectURL(tempUrl);
      }, 100);
    })
    // eslint-disable-next-line no-console
    .catch((err) => console.log('SaveFile aborted'));
} else {
  const url = window.URL.createObjectURL(new Blob([blob]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', `${fileName}.mp4`);
  document.body.appendChild(link);
  link.click();
  link.parentNode.removeChild(link);
}

字符串

相关问题