Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

354
Visualizações
Unable to run window.URL.createObjectURL(blob) to display a .png file

I am using an api to retrieve a .png file. When I try to create a URL for it so that I can display it in my HTML, the call fails with the following error:

userCodeAppPanel:94 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

I am calling my api with this code (using 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
}

The api call is successful as the logger shows a correct return code, the check on the content type of the blob shows it to be "image/png" as expected.

I call the api function from Java Script using:

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

and the function call to display the retrieved image is:

function showGraph(blob){

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

}

This is failing when I attempt to get the url.

I'm quite new to JS and Google Apps Script so i may be getting something simple wrong, but I have very similar functions which pass and process arrays between an api handler, server code and client code.

Any suggestions?

Thanks

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Modification points:

  • In your Google Apps Script side, the blob is returned to Javascript side. Unfortunately, in the current stage, the blob of Google Apps Script cannot be directly used on the Javascript side. I thought that this might be the reason for your issue.

In your situation, how about the following modification?

Modified script:

Google Apps Script side:

From:

return blob

To:

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

HTML&Javascript side:

From:

function showGraph(blob){

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

}

To:

function showGraph(url){
  document.getElementById("graph").src = url
}
  • In this modification, it supposes that the tag like <img id="graph"> is existing in your HTML. Please be careful this.

Reference:

  • base64Encode(data)

Added:

From graph of document.getElementById("graph"), I thought that you might want to show the image. But, if you want to make user download the file from Google Apps Script, how about the following modification?

Modified script:

Google Apps Script side:

From:

return blob

To:

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

HTML&Javascript side:

<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)
}
  • In this modification, when the button is clicked, the file is downloaded by retrieving the data from Google Apps Script.
  • In this case, please set the variables of selectedStation, dateFrom, numDays at Javascript side.
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda