Решавање проблема са преузимањем ЈаваСцрипт датотеке са ЕСП32 веб сервера

Разумевање проблема са преузимањем ЈаваСцрипт датотека са ЕСП32

Преузимање датотека са веб сервера понекад може бити незгодно, посебно када се ради са микроконтролерима као што је ЕСП32. Када покушавате да преузмете датотеку помоћу ЈаваСцрипт-а, могу постојати случајеви у којима преузимање функционише савршено када се приступа директно из прегледача, али не успе када се покрене путем скрипте.

У овом сценарију, ЕСП32 сервира статичну .ЦСВ датотеку користећи ПсицхицХТТП веб сервер. Проблем настаје када се датотека не преузима преко ЈаваСцрипт-а, упркос томе што је доступна преко директне ХТМЛ везе у претраживачу. Овај проблем може бити фрустрирајући, али је уобичајен са којим се суочавате када радите са уграђеним системима.

ЈаваСцрипт код користи КСМЛХттпРекуест да затражи датотеку од ЕСП32, али не покреће преузимање како се очекивало. Овај чланак ће истражити зашто директна веза функционише, али ЈаваСцрипт метода не. Такође ће пружити увид у то како да модификујете ЈаваСцрипт коришћењем модернијег АПИ-ја за „преузимање“ да бисте решили овај проблем.

Штавише, разговараћемо о томе да ли су потребне промене у ЕСП32 коду приликом преласка са КСМЛХттпРекуест на АПИ за преузимање. Испитујући ова два питања, открићемо основни проблем и пружити решења за поуздано преузимање датотека.

Анализа метода и решења за преузимање ЈаваСцрипт датотека

У наведеним примерима, циљ је био преузимање ЦСВ датотеке са ЕСП32 веб сервера који ради на ПсицхицХТТП. Први сценарио користи модерно Дохвати АПИ, моћан алат за прављење ХТТП захтева у ЈаваСцрипт-у. Овај метод поједностављује процес руковањем обећањима и читљивији је од старијих техника као што је КСМЛХттпРекуест. Захтев за преузимање шаље ГЕТ захтев ЕСП32, преузима датотеку, а затим је конвертује у блоб формат, који је неопходан за руковање бинарним подацима као што су ЦСВ датотеке. Затим се генерише привремена УРЛ адреса која омогућава кориснику да преузме датотеку преко ознаке сидра.

Друга скрипта је алтернатива користећи КСМЛХттпРекуест, традиционалнији начин прављења ХТТП захтева. Иако је КСМЛХттпРекуест старији, још увек се користи у многим апликацијама. У овом примеру, респонсеТипе је постављен на 'блоб' за руковање бинарном датотеком коју враћа сервер. Скрипта ослушкује одговор и након успешног повратка, динамички креира сидрени елемент за покретање преузимања. Овај метод пружа детаљнију контролу над захтевом, али му недостаје једноставност и флексибилност Фетцх АПИ-ја, посебно када се рукује обећањима.

Треће решење је резервно решење које уопште не захтева ЈаваСцрипт. Користи ХТМЛ сидрену ознаку са преузимање атрибут, омогућавајући корисницима да кликну на везу и аутоматски преузму датотеку. Ово је најосновније решење и не захтева скриптовање. Међутим, мање је флексибилан, јер вам не дозвољава да програмски управљате преузимањима датотека или додајете услове или логику пре него што покренете преузимање.

Свако од ових решења се бави различитим случајевима употребе. Фетцх АПИ је препоручено решење за модерне апликације због своје једноставности и перформанси. КСМЛХттпРекуест је користан када вам је потребна већа контрола над захтевом и одговором. На крају, решење само за ХТМЛ идеално је за статичне или једноставне веб странице где ЈаваСцрипт није потребан. Применом једне од ових метода, можете обезбедити поуздано преузимање датотека са ЕСП32 веб сервера, побољшавајући и корисничко искуство и функционалност.

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

Истраживање разлика у методама преузимања ЈаваСцрипт и ХТМЛ датотека

Када преузимате датотеке путем ЈаваСцрипт-а, важно је разумети како различите методе утичу на безбедносне смернице претраживача. Један од разлога зашто директна веза у адресној траци функционише је тај што прегледач може одмах да реши захтев и обради преузимање. Међутим, када то покушавају преко ЈаваСцрипт-а, прегледачи примењују строжа правила, као што је захтевање исправних ЦОРС (Дељење ресурса са више извора). Без подешавања но-цорс или цорс режимима исправно, преузимање се можда неће догодити.

Поред тога, савремени претраживачи преферирају употребу fetch() АПИ у односу на старије методе као што су XMLHttpRequest, пошто пружа већу контролу над начином на који се поступа са одговорима, посебно за блоб или објекте налик фајлу. Такође елегантније обрађује грешке, што га чини поузданијим решењем за динамичко преузимање датотека. Постављање одговарајућих МИМЕ типова је још један кључни фактор у осигуравању да клијент правилно рукује датотеком.

За апликације као што је преузимање са ЕСП32, кључно је осигурати да сервер правилно рукује захтевима и одговорима, служећи исправним МИМЕ типовима и заглављима. Фетцх АПИ такође омогућава боље руковање обећањима, што је посебно корисно у асинхроним окружењима као што је преузимање датотека, осигуравајући да корисничко искуство остане глатко и брзо реагује.