Ajax скачать PDF-файл с большими данными - PullRequest
Новая
       1

Ajax скачать PDF-файл с большими данными

0 голосов
/ 13 сентября 2018

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

Мне нужно показать счетчик при запуске запроса и скрыть его при завершении запроса.

Как я могу сделать это с помощью JavaScript ASP.NET MVC.

--- ОБНОВЛЕНИЕ ------

Пример контроллера выглядит следующим образом: 

public ActionResult DownloadFile()
    {


        return File(@"C:\Temp2\HolidayInnReceipt.pdf", "application/pdf", "Report.pdf");

    }

--- ОБНОВЛЕНИЕ------

Здесь - пример проекта.

Ответы [ 3 ]

0 голосов
/ 13 сентября 2018

Добавить ниже CSS 

<style>
#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 99;
    cursor: pointer;
}</style>

В теге формы 

 <button class="btn btn-default btn-lg" onclick="ConfirmDialog('Are you sure you want To Download?')">Download</button>
<br /><br />
<div id="overlay">
    <div id="text">
        <img src="~/assets/images/loadingimage.gif" style="width:5%;" /><span> &nbsp; Downloading....</span>
    </div>
</div>
<label class="error-msg" style="color:green;" itemid="lblmsg"></label>

Тег скрипта 

<script type="text/javascript">
    function ConfirmDialog(message) {
        debugger;

        var x = window.confirm(message)
        debugger;
        if (x) {
            on();               
            $.ajax({
                url: '@Url.Action("YourMVC_Method", "Controller")',
                type: 'GET',
                contentType: 'application/json;charset=utf-8',
                success: function (result) {
                    debugger;
                    $("label[itemid='lblmsg']").show();
                    $('label[itemid="lblmsg"]').text('DownloadSuccess');
                    off();
                },
                error: function (ex) {
                    //alert(ex);
                    $('label[itemid="lblmsg"]').hide();
                    off();
                }
            });
        }
        else {
            $('label[itemid="lblmsg"]').hide();
            off();
        }
    }
    function on() {
        document.getElementById("overlay").style.display = "block";
    }

    function off() {
        document.getElementById("overlay").style.display = "none";
    }
</script>
0 голосов
/ 22 сентября 2018

Вы можете использовать URL.createObjectURL, чтобы получить временный URL для загруженного объекта blob, а затем просто использовать ссылку с атрибутом download. 

<div id="spinner" style="display: none;">Loading...</div>
<button onclick="downloadPDF()">Download</button>

function downloadPDF () {
  const spinner = document.getElementById("spinner")

  spinner.style.display = "block"

  fetch('YOUR_URL_HERE')
    .then(resp => resp.blob())
    .then(blob => {
      const href = URL.createObjectURL(blob)
      const link = document.createElement('a')

      link.href = href;
      link.download = "filename.pdf"
      link.click()

      spinner.style.display = "none"
    })
}
0 голосов
/ 13 сентября 2018

Вы можете реализовать это с помощью Ajax-запроса.

Шаг 1 Создайте ajax-вызов для создания файла pdf
Шаг 2 Верните путь к сохраненному pdf-файлу и установите window.location для загрузки pdf

На шаге 1 - вы можете показать счетчик, используя следующий подход:
jQuery - Эффект загрузки AJAX: простой способ отображения контента с использованием запроса AJAX

Пример: 

   <body onload="loadingAjax('myDiv');">
    <div id="myDiv">
        <img id="loading-image" src="ajax-loader.gif" style="display:none;"/>
    </div>
</body>

и сценарий - 

<script>
function loadingAjax(div_id) {
      var divIdHtml = $("#"+div_id).html();
      $.ajax({
           type: "POST",
           url: "controller/method", //URL which generate pdf
           data: "data here",
           beforeSend: function() {
              $("#loading-image").show();
           },
           success: function(msg) {
              $("#loading-image").hide();
              window.location= msg.FilePath;
           }
      });
}
</script>

Ссылка:
Отображение загрузчика Ajax перед загрузкой данных

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...