等待用户完成 JavaScript 中 blob 的下载

Question

等待用户完成 JavaScript 中 blob 的下载

non*_*all 5 javascript blob file save synchronous

在 Javascript 中，我正在创建许多 Blob，我想提示用户将它们另存为文件。目前，我正在使用来执行此操作URL.createObjectURL，将 URL 放入链接中，并模拟对该链接的单击。（当然，我调用URL.revokeObjectURL来释放 URL，以便在用户保存 Blob 后可以将其丢弃。）我有一个循环运行，并对我希望用户保存的每个 Blob 执行此操作。

至少在 Firefox 上，触发链接是一个异步操作；在用户选择保存文件的位置之前，我调用click()并生成其余 blob 的循环立即继续执行。

这会带来一些问题，因为每个斑点可能有点大，而且可能有很多。我可以很容易地预见到一种情况，即没有足够的内存来将它们全部保存在内存中等待用户将它们一一保存和释放。因此，我想生成一个 blob，让用户下载它，然后在保存文件后（因此有资格被垃圾收集器丢弃），继续生成下一个 blob 并让用户保存它。

有没有什么方法可以实现这一点，而不需要用户手动单击另一个按钮或类似的东西来向页面发出他已完成保存文件的信号？

Answer 1

Rya*_*yan 4

这对我有用。

/**
 *
 * @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)
}

Run Code Online (Sandbox Code Playgroud)

我知道其他人也有这个问题：

PS我很欣赏@sicking的想法https://github.com/whatwg/html/issues/954#issue-144165132。

归档时间：	10 年，8 月前
查看次数：	2819 次
最近记录：	4 年，8 月前