Сохраните данные, поступающие из ответа xhr, в файл js

#javascript #jquery #xmlhttprequest

Вопрос:

у меня есть конечная точка, которая выдает текстовые данные, и я знаю, что хочу сохранить эти данные на веб-интерфейсе в файл, если пользователь нажмет кнопку пуск/остановка

мой текущий подход, как показано ниже, но он не работает

 var el = document.getElementsByClassName(".fa-file-download");

function saving(){
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://127.0.0.0:8000/data');
    xhr.responseType = 'text';
    xhr.send();
    xhr.onload = function(e) {
      if (this.status == 200) {
          
          var blob = new Blob([this.response], {type: 'text'});
        
          let a = document.getElementsByClassName(".fa-save");
          a.style = "display: none";
          let b = document.getElementsByClassName(".fa-file-download");
          b.style = "display: block"
          
          let url = window.URL.createObjectURL(blob);
          b.href = url;
          
          b.download = 'logFile.txt';
          if (el.addEventListener) {
            el.addEventListener("click", function() {
                b.click();
            });
         
          
          window.URL.revokeObjectURL(url);
      }
  };
};

};
 

html-часть

  <i class="far fa-save" ></i>
 <i class="fas fa-file-download" onclick="saving()"></i>
 

Ответ №1:

у вас есть несколько проблем в коде

  • вы назначили href , в .fa-file-download котором нет <a> элемента
  • у вас уже есть встроенный onclick для saving функции, но вы снова привязали onclick внутри кода внизу
  • в вашем javascript у вас есть 2 переменные, выбирающие один и тот же элемент el и b

попробуйте этот код ниже, проверьте, работает ли он сейчас

     function saving(){
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://127.0.0.0:8000/data');
    xhr.responseType = 'text';
    xhr.send();
    xhr.onload = function(e) {
      if (this.status == 200) {
          
          var blob = new Blob([this.response], {type: 'text'}),
              newA = document.createElement("a"); // new line
        
          let a = document.getElementsByClassName(".fa-save");
          a.style = "display: none";
          let b = document.getElementsByClassName(".fa-file-download");
          b.style = "display: block";
          
          let url = window.URL.createObjectURL(blob);
          b.href = url;
          // new line
          newA.href = url;
          newA.download = "logFile.txt";
          newA.click()
          newA.remove()

          // b.download = 'logFile.txt';
          // if (el.addEventListener) {
          //   el.addEventListener("click", function() {
          //       b.click();
          //   });
         
          
          window.URL.revokeObjectURL(url);
      }
      };
    };