显示文件下载对话框时关闭当前弹出窗口

时间:2018-10-03 10:04:04

标签: javascript file download popup

我尝试搜索解决方案,但未获得任何相关答案。我要在浏览器中打开文件下载弹出窗口后关闭当前弹出窗口。例如,在下面的源代码中,如果我在ajax请求之后编写“ window.close()”,则文件下载弹出窗口将永远不会显示。

但是一旦我删除了这一行,文件下载就可以了,但是我如何关闭当前弹出窗口?

我的用例是:

main.php

<script>
    window.open('popup.php','redirect','width=500,height=500');
</script>

popup.php

<body>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script>
        var url = 'download.php';
        var output_type = 'xls';
        params = "function=execute_cache&output="+output_type;
        $.ajax({
            type: "POST",
            url: url,
            data: params,
            success: function(response, status, request) {
                var disp = request.getResponseHeader('Content-Disposition');
                if (disp && disp.search('attachment') != -1) {
                    var form = $('<form method="POST" action="' + url + '">');
                    $.each(params, function(k, v) {
                        form.append($('<input type="hidden" name="' + k +
                                '" value="' + v + '">'));
                    });
                    $('body').append(form);
                    form.submit();
                }
            }
        });
        window.close();
    </script>
</body>

download.php

<?php
$handle = fopen("file.txt", "w");
fwrite($handle, "text1.....");
fclose($handle);
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename='.basename('file.txt'));
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize('file.txt'));
readfile('file.txt');
exit;

注意:我无法使用setTimeout函数自动关闭弹出窗口,因为我不知道文件将下载多少时间。所以我不能给最大时间。 download.php中显示的代码不是实际的代码。实际上,我会获取大量数据并生成XLS。

我只想在文件下载弹出窗口显示给用户下载文件时自动关闭当前弹出窗口。

1 个答案:

答案 0 :(得分:0)

使用 promise 进行此类异步调用。进一步了解https://www.sitepoint.com/overview-javascript-promises/

还为

赋予window.open一个ID

windowPopup = window.open('popup.php','redirect','width=500,height=500');

并使用

windowPopup.close();

var windowPopup = window.open('popup.php','redirect','width=500,height=500');

    function callRequest () {
      return new Promise(function (resolve, reject) {
        var url = 'download.php';
        var output_type = 'xls';
        var params = "function=execute_cache&output="+output_type;

        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, param);
        xhr.onload = function () {
          if (this.status >= 200 && this.status < 300) {
              var disp = request.getResponseHeader('Content-Disposition');
              if (disp && disp.search('attachment') != -1) {
                  var form = $('<form method="POST" action="' + url + '">');
                  $.each(params, function(k, v) {
                      form.append($('<input type="hidden" name="' + k +
                              '" value="' + v + '">'));
                  });
                  $('body').append(form);

                  setTimeout(function(){
                    form.submit();
                    resolve(true);
                }, 1000);              
              }
          } else {
            reject(false);
          }
        };
        xhr.onerror = function () {
          reject(false);
        };
        xhr.send();
      });
    }


    callRequest()
    .then(function (res) {
        console.log('result : ',  res);
        if(res) {
            windowPopup.close();
        } 
    })
    .catch(function (err) {
      console.error('error : ', err);
    });