时间戳

首页 > 解决方案 > 检查下载是否已经完成并隐藏加载器

jquery - 检查下载是否已经完成并隐藏加载器

问题描述

我的项目中有允许用户下载 PDF 文件的功能。它可以工作，但由于 PDF 文件有点重，我向他们展示了下载进度 gif。

现在的问题是，由于我没有使用 AJAX 下载功能，如何在下载后隐藏该 gif？

我就是这样做的。如果您有更好的想法或建议，我愿意接受。

$(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>

标签： jquerylaravel-5download

解决方案

有两种方法，你试图混合它们，因此你在这里进入一个尴尬的境地。

在 Laravel Blade 中，你可以通过以下方式实现任何类型的功能：

  • AJAX
  • 经典表单提交请求

当您拥有任何类型的单页应用程序功能时，通常会使用 AJAX。

在这里，您将下载用作“经典表单提交请求”，因此您不能期望知道下载请求何时完成。这通常是您在单页应用程序上的情况，并且您想要显示下载状态，因此如上所述，我们使用 AJAX 来实现。

当您使用经典表单请求时，您只需在标签target="_blank"上添加一个参数a，然后下载的文件将在完成后在新选项卡中打开，并完全删除加载程序。

我希望我让自己清楚:)

推荐阅读