是否有一种方法来显示下载的文件在底部通过window.showSaveFilePicker下载 &g

Question

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

这是我目前拥有的代码。

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

Answer 1

您可以像这样手动添加/撤销元素:

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