Résolution des problèmes de téléchargement de fichiers JavaScript à partir du serveur Web ESP32

Comprendre les problèmes de téléchargement de fichiers JavaScript avec ESP32

Le téléchargement de fichiers depuis un serveur Web peut parfois s'avérer délicat, notamment lorsqu'il s'agit de microcontrôleurs comme l'ESP32. Lorsque vous tentez de télécharger un fichier à l'aide de JavaScript, il peut arriver que le téléchargement fonctionne parfaitement lorsqu'il est accessible directement depuis le navigateur, mais échoue lorsqu'il est lancé via un script.

Dans ce scénario, l'ESP32 diffuse un fichier .CSV statique à l'aide d'un serveur Web PsychicHTTP. Le problème survient lorsque le fichier ne se télécharge pas via JavaScript, bien qu'il soit accessible via un lien HTML direct dans le navigateur. Ce problème peut être frustrant, mais il est courant lorsque l'on travaille avec des systèmes embarqués.

Le code JavaScript utilise un XMLHttpRequest pour demander le fichier à l'ESP32, mais il ne déclenche pas le téléchargement comme prévu. Cet article explique pourquoi le lien direct fonctionne mais pas la méthode JavaScript. Il fournira également des informations sur la façon de modifier le JavaScript à l'aide d'une API de « récupération » plus moderne pour résoudre ce problème.

De plus, nous verrons si des modifications sont nécessaires dans le code ESP32 lors du passage de XMLHttpRequest à l'API fetch. En examinant ces deux questions, nous découvrirons le problème sous-jacent et proposerons des solutions pour des téléchargements de fichiers fiables.

Analyse des méthodes et solutions de téléchargement de fichiers JavaScript

Dans les exemples fournis, l'objectif était de télécharger un fichier CSV à partir d'un serveur Web ESP32 exécutant PsychicHTTP. Le premier script utilise le moderne Récupérer l'API, un outil puissant pour effectuer des requêtes HTTP en JavaScript. Cette méthode simplifie le processus en gérant les promesses et est plus lisible que les techniques plus anciennes comme XMLHttpRequest. La requête d'extraction envoie une requête GET à l'ESP32, récupère le fichier, puis le convertit en un goutte format, essentiel pour gérer les données binaires comme les fichiers CSV. Une URL temporaire est ensuite générée pour permettre à l'utilisateur de télécharger le fichier via une balise d'ancrage.

Le deuxième script est une alternative utilisant XMLHttpRequest, une manière plus traditionnelle d'effectuer des requêtes HTTP. Bien que XMLHttpRequest soit plus ancien, il est toujours utilisé dans de nombreuses applications. Dans cet exemple, le Type de réponse est défini sur « blob » pour gérer le fichier binaire renvoyé par le serveur. Le script écoute la réponse et, en cas de retour réussi, il crée dynamiquement un élément d'ancrage pour déclencher le téléchargement. Cette méthode offre un contrôle plus granulaire sur la requête, mais elle n'a pas la simplicité et la flexibilité de l'API Fetch, notamment lors de la gestion des promesses.

La troisième solution est une solution de secours qui ne nécessite pas du tout JavaScript. Il utilise une balise d'ancrage HTML avec le télécharger attribut, permettant aux utilisateurs de cliquer sur le lien et de télécharger automatiquement le fichier. Il s'agit de la solution la plus basique et ne nécessite aucun script. Cependant, il est moins flexible, car il ne vous permet pas de gérer par programmation les téléchargements de fichiers ni d'ajouter des conditions ou une logique avant de déclencher le téléchargement.

Chacune de ces solutions répond à un cas d’utilisation différent. L'API Fetch est la solution recommandée pour les applications modernes en raison de sa simplicité et de ses performances. XMLHttpRequest est utile lorsque vous avez besoin de plus de contrôle sur la demande et la réponse. Enfin, la solution HTML uniquement est idéale pour les pages Web statiques ou simples où JavaScript n'est pas nécessaire. En mettant en œuvre l'une de ces méthodes, vous pouvez garantir des téléchargements de fichiers fiables à partir d'un serveur Web ESP32, améliorant ainsi l'expérience utilisateur et les fonctionnalités.

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);
  });
});

Explorer les différences entre les méthodes de téléchargement de fichiers JavaScript et HTML

Lors du téléchargement de fichiers via JavaScript, il est important de comprendre comment les différentes méthodes interagissent avec les politiques de sécurité du navigateur. L'une des raisons pour lesquelles le lien direct dans la barre d'adresse fonctionne est que le navigateur peut immédiatement résoudre la demande et gérer le téléchargement. Cependant, lorsqu'ils tentent cela via JavaScript, les navigateurs appliquent des règles plus strictes, comme exiger des CORS (Partage de ressources cross-origine). Sans réglage sans cors ou cors modes correctement, le téléchargement pourrait ne pas avoir lieu.

De plus, les navigateurs modernes préfèrent utiliser le fetch() API sur les anciennes méthodes comme XMLHttpRequest, car il offre plus de contrôle sur la façon dont les réponses sont traitées, en particulier pour goutte ou des objets de type fichier. Il gère également les erreurs de manière plus gracieuse, ce qui en fait une solution plus fiable pour télécharger des fichiers de manière dynamique. La définition des types MIME appropriés est un autre facteur clé pour garantir que le fichier est géré correctement par le client.

Pour les applications telles que le téléchargement à partir d'un ESP32, il est crucial de s'assurer que le serveur gère correctement les requêtes et les réponses, en fournissant les types et en-têtes MIME corrects. L'API Fetch permet également une meilleure gestion des promesses, ce qui est particulièrement utile dans les environnements asynchrones comme le téléchargement de fichiers, garantissant que l'expérience utilisateur reste fluide et réactive.