等待用户在Javascript中完成blob的下载
Wait for user to finish downloading a blob in Javascript
在Javascript中,我创建了许多Blob,希望提示用户将其保存为文件。目前,我正在使用URL.createObjectURL
,将URL放置在链接中,并模拟单击链接。(当然,我会调用URL.revokeObjectURL
来释放URL,这样在用户保存blob后就可以丢弃它。)我有一个循环,它会贯穿始终,并为我希望用户保存的每个blob执行此操作。
至少在Firefox上,触发链接是一种异步操作;我调用click()
,生成其余Blob的循环在用户选择保存文件的位置之前立即继续执行。
这带来了一点问题,因为每个斑点可能都有点大,而且可能有很多。我可以很容易地预见这样一种情况,即没有足够的内存来将它们全部保存在内存中,等待用户逐个保存和释放它们。因此,我想生成一个blob,让用户下载它,然后,在文件保存后(因此有资格被垃圾收集器丢弃),继续生成下一个blob并让用户保存它。
有没有任何方法可以实现这一点,而不需要用户手动点击另一个按钮或类似的东西来向页面发出他已经完成保存文件的信号?
这就是我的工作原理。
/**
*
* @param {object} object A File, Blob, or MediaSource object to create an object URL for. https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
* @param {string} filenameWithExtension
*/
function saveObjectToFile (object, filenameWithExtension) {
console.log('saveObjectToFile: object', object, 'filenameWithExtension', filenameWithExtension)
const url = window.URL.createObjectURL(object)
console.log('url', url)
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.target = '_blank'
link.download = filenameWithExtension
console.log('link', link)
document.body.appendChild(link)
link.click()
window.setTimeout(function () {
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
}, 0)
}
/**
* @param {string} path
* @param {object} payload
* @param {string} filenameWithExtension
* @returns {promise}
*/
export async function downloadFileInBackground (path, payload, filenameWithExtension) {
console.log('downloadFileInBackground awaiting fetch...')
const response = await fetch(path, {
method: 'POST',
cache: 'no-cache',
headers: {
'Content-Type': 'application/json'
},
body: payload // body data type must match "Content-Type" header
})
console.log('response', response)
const blob = await response.blob()
saveObjectToFile(blob, filenameWithExtension)
console.log('downloadFileInBackground finished saving blob to file!', filenameWithExtension)
}
我知道其他人也有这个问题:
- https://stackoverflow.com/a/55705784/470749
- https://stackoverflow.com/a/37240906/470749
- https://stackoverflow.com/a/30708820/470749
- 等待用户完成在Javascript中下载blob
- https://stackoverflow.com/a/50698058/470749
附言:我很欣赏@ssicking在https://github.com/whatwg/html/issues/954#issue-144165132.
相关文章:
- 使用blob从ajax结果下载文件
- CSV、PDF、Excel文件在dataTables的导出扩展中作为blob下载
- 从IE 11中的HTTP URL下载blob
- 等待用户在Javascript中完成blob的下载
- 如何用Javascript从Chrome iOS下载blob文件
- 从火狐中的 blob 下载图像
- Javascript下载一个URL-Azure Blob存储
- Blob下载在IE中不起作用
- Angularjs/Restangular,如何命名文件blob以供下载
- Javascript Blob 锚标记下载生成损坏的文件
- Safari 9 XMLHttpRequest Blob 文件下载
- 使用Ajax调用从Node.js服务器下载文件会产生截断的数据和膨胀的blob
- “另存为blob”需要很长时间才能从给定的url下载文件
- 下载一个javascript blob变量作为mhtml
- 使用HTML元素中的数据创建Javascript Blob().然后将其作为文本文件下载
- 下载一个包含filesaver.js和blob的pdf文件
- 使用$http从服务器下载的原始文件创建Blob对象
- HTML标签中的下载属性不能与BLOB文件一起工作
- 使用chrome扩展中的html5 Blob下载mp3文件
- 触发Blob下载