等待用户完成Java语言中的Blob下载 [英] Wait for user to finish downloading a blob in Javascript

问题描述

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

In Javascript, I'm creating a number of blobs that I want to prompt the user to save as files. At the moment, I'm doing that using URL.createObjectURL, placing the URL in a link, and simulating a click to the link. (Of course I call URL.revokeObjectURL to release the URL so the blob can be discarded after the user saves it.) I have a loop that runs through and does this for each blob I want the user to save.

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

At least on Firefox, triggering the link is an asynchronous operation; I call click() and my loop to generate the rest of the blobs immediately continues execution before the user chooses a location to save the file.

这带来了一个问题，因为每个斑点可能都很大，并且可能有很多.我可以很容易地预见到这样一种情况:没有足够的内存将所有内存都保存在内存中，以等待用户一张一张地保存和释放它们.因此，我想生成一个Blob，让用户下载它，然后 保存文件(因此有资格被垃圾收集器丢弃)后，继续生成下一个Blob，并让用户保存它.

This presents a bit of a problem because each blob could be somewhat large, and there could be a lot of them. I can easily foresee a situation where there wouldn't be sufficient memory to hold all of them in memory waiting for the user to save and release them one-by-one. So I'd like to generate one blob, have the user download it, and then, after the file has been saved (and thus is eligible to be discarded by the garbage collector), proceed to generate the next blob and have the user save it.

有什么方法可以实现这一功能，而无需用户手动单击另一个按钮或类似的东西来通知页面他已完成文件的保存?

Is there any way to achieve this without requiring the user to manually click another button or some such thing to signal the page that he is done saving the file?

推荐答案

这对我有用.

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

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

I know other people have this problem too:

• https://stackoverflow.com/a/55705784/470749
• https://stackoverflow.com/a/372​​40906/470749
• https://stackoverflow.com/a/30708820/470749
• 等待用户完成使用Javascript下载Blob
• https://stackoverflow.com/a/50698058/470749

P.S.我感谢@sicking在>://://github.com/whatwg/html/issues/954#issue-144165132 .

P.S. I appreciate the idea from @sicking at https://github.com/whatwg/html/issues/954#issue-144165132.

这篇关于等待用户完成Java语言中的Blob下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！