0
507
ViewsDescargar imagen de la web de almacenamiento de firebase - vuejs
Estoy tratando de implementar un botón de descarga en una imagen que descargará la imagen. Dado que la imagen está alojada en Firebase Storage, estoy usando una variante de su código para recuperar los archivos que encontré en el documento oficial: https://firebase.google.com/docs/storage/web/download-files#download_data_via_url
Lo cambié un poco ya que en el ejemplo, el código está recuperando la URL del archivo de su ruta en el depósito, mientras que en mi caso ya conozco la URL:
download(url) { const xhr = new XMLHttpRequest(); xhr.responseType = "blob"; xhr.onload = () => { xhr.response; }; xhr.open("GET", url); xhr.send(); },Ahora el problema es que la solicitud obtiene la imagen, pero la descarga (a la máquina del usuario) no se activa:
Sé que estoy muy cerca, ¿cómo activo la descarga de la imagen? Además, ¿realmente necesito llamarlo desde firebase ya que la imagen ya se muestra en el sitio web?
Solución:
Gracias a Renaud por la ayuda, pude arreglar mi código:
download(url) { const xhr = new XMLHttpRequest(); xhr.responseType = "blob"; xhr.onload = () => { var urlCreator = window.URL || window.webkitURL; var imageUrl = urlCreator.createObjectURL(xhr.response); const link = document.createElement("a"); link.href = imageUrl; link.setAttribute("download", "test"); link.setAttribute("target", "new"); document.body.appendChild(link); link.click(); }; xhr.open("GET", url); xhr.send(); },No dude en publicar optimizaciones para esta solución.
1 answers
Answer question0
Un enfoque posible es crear un enlace oculto en la página y simular un clic en este enlace de la siguiente manera:
// Get the URL. You have it since you call download(url) // In case you don't have the URL, use const url = await getDownloadURL(fileRef); const url = ... const link = document.createElement('a'); link.href = url; link.setAttribute('download', fileName); link.setAttribute('target', 'new'); document.body.appendChild(link); link.click();