Løsning af JavaScript-fildownloadproblemer fra ESP32-webserver

Forstå JavaScript-fildownloadproblemer med ESP32

Det kan nogle gange være vanskeligt at downloade filer fra en webserver, især når man har at gøre med mikrocontrollere som ESP32. Når du forsøger at downloade en fil ved hjælp af JavaScript, kan der være tilfælde, hvor overførslen fungerer perfekt, når den åbnes direkte fra browseren, men mislykkes, når den startes gennem et script.

I dette scenarie serverer ESP32 en statisk .CSV-fil ved hjælp af en PsychicHTTP-webserver. Problemet opstår, når filen ikke downloades via JavaScript, på trods af at den er tilgængelig via et direkte HTML-link i browseren. Dette problem kan være frustrerende, men det er et almindeligt problem, man står over for, når man arbejder med indlejrede systemer.

JavaScript-koden bruger en XMLHttpRequest til at anmode om filen fra ESP32, men den udløser ikke download som forventet. Denne artikel vil undersøge, hvorfor det direkte link virker, men JavaScript-metoden gør det ikke. Det vil også give indsigt i, hvordan man ændrer JavaScript ved hjælp af en mere moderne 'hent' API for at løse dette problem.

Desuden vil vi diskutere, om der er behov for ændringer i ESP32-koden, når der skiftes fra XMLHttpRequest til hente-API'en. Ved at undersøge disse to spørgsmål vil vi afdække det underliggende problem og give løsninger til pålidelige fildownloads.

Analyse af metoder og løsninger til download af JavaScript-filer

I de medfølgende eksempler var målet at downloade en CSV-fil fra en ESP32-webserver, der kører PsychicHTTP. Det første script bruger det moderne Hent API, et kraftfuldt værktøj til at lave HTTP-anmodninger i JavaScript. Denne metode forenkler processen ved at håndtere løfter og er mere læsbar end ældre teknikker som XMLHttpRequest. Henteanmodningen sender en GET-anmodning til ESP32, henter filen og konverterer den derefter til en klat format, som er afgørende for håndtering af binære data som CSV-filer. En midlertidig URL genereres derefter for at give brugeren mulighed for at downloade filen via et ankertag.

Det andet script er et alternativ ved hjælp af XMLHttpRequest, en mere traditionel måde at lave HTTP-anmodninger på. Selvom XMLHttpRequest er ældre, bruges det stadig i mange applikationer. I dette eksempel er responstype er sat til 'blob' for at håndtere den binære fil, der returneres af serveren. Scriptet lytter efter svaret, og ved en vellykket tilbagevenden opretter det dynamisk et ankerelement for at udløse download. Denne metode giver mere detaljeret kontrol over anmodningen, men den mangler enkelheden og fleksibiliteten i Fetch API, især når man håndterer løfter.

Den tredje løsning er en fallback, der slet ikke kræver JavaScript. Den bruger et HTML-ankertag med download attribut, så brugerne kan klikke på linket og automatisk downloade filen. Dette er den mest basale løsning og kræver ingen scripting. Det er dog mindre fleksibelt, da det ikke tillader dig programmæssigt at håndtere fildownloads eller tilføje nogen betingelser eller logik, før du udløser download.

Hver af disse løsninger adresserer en anden use case. Fetch API er den anbefalede løsning til moderne applikationer på grund af dens enkelhed og ydeevne. XMLHttpRequest er nyttig, når du har brug for mere kontrol over anmodningen og svaret. Endelig er HTML-only-løsningen ideel til statiske eller simple websider, hvor JavaScript ikke er nødvendigt. Ved at implementere en af ​​disse metoder kan du sikre pålidelige fildownloads fra en ESP32-webserver, hvilket forbedrer både brugeroplevelsen og funktionaliteten.

function downloadFile(url, fileName) {
  fetch(url, { method: 'GET', mode: 'cors' })
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.blob();
    })
    .then(blob => {
      const aElement = document.createElement('a');
      const objectUrl = URL.createObjectURL(blob);
      aElement.href = objectUrl;
      aElement.download = fileName;
      document.body.appendChild(aElement);
      aElement.click();
      URL.revokeObjectURL(objectUrl);
      document.body.removeChild(aElement);
    })
    .catch(error => console.error('Fetch error:', error));
}
downloadFile('http://192.168.0.136/saveFile', 'sample.csv');

function saveFile() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/saveFile', true);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    if (xhr.status === 200) {
      var blob = xhr.response;
      var aElement = document.createElement('a');
      var url = URL.createObjectURL(blob);
      aElement.href = url;
      aElement.download = 'sample.csv';
      document.body.appendChild(aElement);
      aElement.click();
      URL.revokeObjectURL(url);
      document.body.removeChild(aElement);
    }
  };
  xhr.send();
}

<a href="http://192.168.0.136/saveFile" download="sample.csv">Download CSV</a>

describe('Download File Test', function() {
  it('should successfully download a file using fetch', function(done) {
    const url = 'http://192.168.0.136/saveFile';
    fetch(url, { method: 'GET' })
      .then(response => {
        expect(response.ok).toBe(true);
        return response.blob();
      })
      .then(blob => {
        expect(blob.size).toBeGreaterThan(0);
        done();
      })
      .catch(done.fail);
  });
});

Udforskning af forskelle i JavaScript- og HTML-fildownloadmetoder

Når du downloader filer via JavaScript, er det vigtigt at forstå, hvordan forskellige metoder interagerer med browserens sikkerhedspolitikker. En af grundene til, at linket til direkte adresselinje virker, er fordi browseren straks kan løse anmodningen og håndtere overførslen. Men når du forsøger dette gennem JavaScript, anvender browsere strengere regler, såsom at kræve korrekt CORS (Cross-Origin Resource Sharing) indstillinger. Uden indstilling no-cors eller cors tilstande korrekt, vil overførslen muligvis ikke finde sted.

Derudover foretrækker moderne browsere brugen af fetch() API over ældre metoder som XMLHttpRequest, da det giver mere kontrol over, hvordan svar håndteres, især for klat eller fillignende objekter. Det håndterer også fejl mere elegant, hvilket gør det til en mere pålidelig løsning til dynamisk download af filer. Indstilling af de korrekte MIME-typer er en anden nøglefaktor for at sikre, at filen håndteres korrekt af klienten.

Til applikationer som at downloade fra en ESP32, er det afgørende at sikre, at serveren håndterer anmodninger og svar korrekt og serverer de korrekte MIME-typer og overskrifter. Fetch API'en giver også mulighed for bedre løftehåndtering, hvilket er særligt nyttigt i asynkrone miljøer som fildownload, hvilket sikrer, at brugeroplevelsen forbliver jævn og lydhør.