Проверьте, не завершена ли загрузка, и спрячьте загрузчик.

Question

В моем проекте есть функциональность, которая позволяет пользователю загружать PDF-файл. Это работает, но так как PDF-файлы немного тяжелые, я показываю им изображение прогресса загрузки.

Проблема теперь в том, как я могу скрыть этот gif после загрузки, так как я не использую функцию загрузки AJAX?

Вот как я это делаю. Если у вас есть лучшие идеи или предложения, я открыт для этого.

$(document).on('click', '.download-pdf', function() {
  let reservation_id = $('#reservation_id').val();
  let account_name = $('#account_name').val();

  var a = $(this).data('href');
  $(this).attr('href', a +
    '&reservation_id=' + reservation_id +
    '&account_name=' + account_name);

  $('body').addClass('show-loading');
  //remove the loading after download
});

body.show-loading img[role=loading-circ-display] {
  display: block;
}

body.show-loading:before {
  content: "";
  background-color: black;
  opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
  <a type="button" href="#" data-href="{{ route('user.guest.list.pdf') }}" class="btn btn-block btn-secondary custom-font-button download-pdf">@lang('guest.pdf')</a>
</div>

Answer 1

Есть два подхода, и вы пытаетесь смешать их, поэтому вы попадаете в неловкую ситуацию здесь.

В блейде Laravel вы можете достичь любой функциональности с помощью:

• AJAX
• Классические формы отправки запросов

AJAX чаще всего используются, когда у вас есть какие-либо функциональные возможности одностраничного приложения.

Здесь вы используете загрузку как«Классическая форма отправки запросов», поэтому вы не можете ожидать, когда будет завершен запрос на загрузку. Обычно это происходит, когда вы работаете с одностраничным приложением и хотите показать статус загрузки, поэтому, как уже упоминалось выше, для этого мы используем AJAX.

Когда вы работаете с классическим запросом формы, выВы можете просто добавить target="_blank" параметр к вашему тегу a, и тогда загруженный файл откроется на новой вкладке, когда все будет готово, и полностью удалить загрузчик.

Я надеюсь, что проясняю себя:)