Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

348
Vistas
No se puede ejecutar window.URL.createObjectURL(blob) para mostrar un archivo .png

Estoy usando una API para recuperar un archivo .png. Cuando trato de crear una URL para poder mostrarla en mi HTML, la llamada falla con el siguiente error:

userCodeAppPanel: 94 TypeError no detectado: no se pudo ejecutar 'createObjectURL' en 'URL': la resolución de sobrecarga falló.

Estoy llamando a mi api con este código (usando Google Apps Script):

 function retrieveAdmiraltyTideGraph(tideStationName, dateFrom, numDays){ //get tide station code from tide station name passed from user input let tideStationCode = getTideStationCode(tideStationName) var url = _admiraltyURL + "Stations/" + tideStationCode + "/TidalHeightGraph?dateTime=" + dateFrom + "&duration=" + numDays; url = url + "&width=500&height=200" var response = UrlFetchApp.fetch(url, _admiraltyRequestHeader); var responseCode = response.getResponseCode() var blob = response.getBlob() Logger.log("graph response" + responseCode) Logger.log(blob.getContentType()) return blob }

La llamada a la API es exitosa ya que el registrador muestra un código de retorno correcto, la verificación del tipo de contenido del blob muestra que es "imagen/png" como se esperaba.

Llamo a la función api desde Java Script usando:

 google.script.run.withSuccessHandler(showGraph).withFailureHandler(onFailure).retrieveAdmiraltyTideGraph(selectedStation, dateFrom, numDays);

y la llamada de función para mostrar la imagen recuperada es:

 function showGraph(blob){ var url = window.URL.createObjectURL(blob); document.getElementById("graph").src = url }

Esto está fallando cuando intento obtener la URL.

Soy bastante nuevo en JS y Google Apps Script, por lo que es posible que me esté equivocando en algo, pero tengo funciones muy similares que pasan y procesan matrices entre un controlador de API, el código del servidor y el código del cliente.

¿Alguna sugerencia?

Gracias

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Puntos de modificación:

  • En su lado de Google Apps Script, el blob se devuelve al lado de Javascript. Desafortunadamente, en la etapa actual, el blob de Google Apps Script no se puede usar directamente en el lado de Javascript. Pensé que esta podría ser la razón de su problema.

En su situación, ¿qué tal la siguiente modificación?

Guión modificado:

Lado de Google Apps Script:

De:

 return blob

A:

 return `data:${blob.getContentType()};base64,${Utilities.base64Encode(blob.getBytes())}`;

Lado HTML y Javascript:

De:

 function showGraph(blob){ var url = window.URL.createObjectURL(blob); document.getElementById("graph").src = url }

A:

 function showGraph(url){ document.getElementById("graph").src = url }
  • En esta modificación, se supone que la etiqueta como <img id="graph"> existe en su HTML. Por favor tenga cuidado con esto.

Referencia:

  • codificar base64 (datos)

Adicional:

Del graph de document.getElementById("graph") , pensé que tal vez quisiera mostrar la imagen. Pero, si desea que el usuario descargue el archivo de Google Apps Script, ¿qué tal la siguiente modificación?

Guión modificado:

Lado de Google Apps Script:

De:

 return blob

A:

 return [`data:${blob.getContentType()};base64,${Utilities.base64Encode(blob.getBytes())}`, blob.getName()];

Lado HTML y Javascript:

 <input type="button" value="download" onclick="sample()"> <script> function sample() { google.script.run.withSuccessHandler(showGraph).withFailureHandler(onFailure).retrieveAdmiraltyTideGraph(selectedStation, dateFrom, numDays); } function showGraph([url, filename]){ fetch(url) .then(res => res.blob()) .then(blob => { var a = document.createElement("a"); var url = window.URL.createObjectURL(blob); a.href = url; a.download = filename; a.click(); }); } function onFailure(e) { console.log(e) }
  • En esta modificación, cuando se hace clic en el botón, el archivo se descarga recuperando los datos de Google Apps Script.
  • En este caso, configure las variables de selectedStation, dateFrom, numDays en el lado de Javascript.
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda