Блог

У меня есть веб-сайт, на котором есть следующая HTML-ссылка:

 <a href="/api/admin_csv_dl" download="adminCSV.csv">Download CSV</a>
  

Это работает, но API, который я использую, требует времени для создания файла .csv, поэтому между нажатием кнопки и началом загрузки возникает задержка. Я хотел бы отключить ссылку до завершения загрузки или, по крайней мере, до ее начала (поскольку сама загрузка занимает сравнительно мало времени), а затем снова включить ее, но я не знаю, как «раскрыть» эту информацию при использовании атрибута загрузки HTML5.

Если бы я использовал что-то вроде ajax для подключения к API, я бы отключил ссылку, как только на нее нажали, и снова включил ее, как только получил успешный ответ, но атрибут загрузки HTML5 довольно удобен для моего варианта использования, за исключением того, что я не могу понять, как проверить процессподробнее.

Просто мысль, вы могли бы сохранить <a> таким же, как сейчас, но скрыть его, чтобы он использовался только для его функциональности, но не взаимодействовал напрямую с пользователем. Тогда у вас может быть кнопка или что-то, что вы могли бы использовать, чтобы «щелкнуть» <a> при нажатии и просто отключить кнопку, но нет способа узнать, когда загрузка будет завершена, чтобы вы могли установить тайм-аут или что-то в этом роде после некоторого тестирования того, сколько времени это займетчтобы загрузить элемент. Это очень хитро, потому что, очевидно, время загрузки может сильно варьироваться в зависимости от скорости Интернета пользователя. Это может выглядеть примерно так:

 const downloadBtn = document.getElementById('download-btn');

downloadBtn.addEventListener("click", function(event){
  event.preventDefault();

  // trigger download through hidden link
  document.getElementById('download-link').click();

  document.getItemById("btn").disabled = false;
  
  setTimeout(
      function(){ document.getItemById("btn").disabled = true; }, 3000);
}  

 <button id="download-btn">Download</button>

<a id="download-link" href="/api/admin_csv_dl" download="adminCSV.csv" hidden>Download CSV</a>  

При этом я бы предпочел сделать это полностью программно, если отключение ссылки / кнопки во время загрузки очень важно. Если вы пойдете по этому пути, я бы изучил что-нибудь, используя api браузера downloads . Более подробную информацию можно найти здесь. Удачи!