Question

这是我的问题。

我正在PHP函数中生成excel文件（使用Zend Framework 2）。有时，生成过程可能很长，太长（25秒+），因此我决定创建一个基于模态的结构来显示加载器，这样用户就不会感到困惑。

我正在尝试使用Jquery来了解生成和下载excel文件的时间，以便我可以隐藏加载器。只需单击链接即可生成该文件：

    <!DOCTYPE html>
  <html>
  <head>
      <title>Mousemove</title>
  </head>

  <body>

      <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<canvas id="canvas" width="500" height="500"></canvas>
      <script>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

var circle = function (x, y, radius, fillCircle) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  if (fillCircle) {
    ctx.fill();
  } else {
    ctx.stroke();
  }
};

// The Ball constructor
var Ball = function () {
  this.x = width / 2;
  this.y = height / 2;
  this.xSpeed = 5;
  this.ySpeed = 0;
};

// Update the ball's position based on its speed
Ball.prototype.move = function () {
  this.x += this.xSpeed;
  this.y += this.ySpeed;

  if (this.x < 0) {
    this.x = width;
  } else if (this.x > width) {
    this.x = 0;
  } else if (this.y < 0) {
    this.y = height;
  } else if (this.y > height) {
    this.y = 0;
  }
};

// Draw the ball at its current position
Ball.prototype.draw = function () {
  circle(this.x, this.y, 10, true);
};

// Set the ball's direction based on a string

Ball.prototype.setDirection = function() {
  var upPressed = keysDown[directions.up];
  var downPressed = keysDown[directions.down];
  var rightPressed = keysDown[directions.right];
  var leftPressed = keysDown[directions.left];

  if (upPressed) {
    this.ySpeed = -5;
  } else if (downPressed) {
    this.ySpeed = 5;
  }

  if (leftPressed) {
    this.xSpeed = -5;
  } else if (rightPressed) {
    this.xSpeed = 5;
  }
};

// Create the ball object
var ball = new Ball();

// An object to convert keycodes into action names
var directions = {
  left: 37,
  up: 38,
  right: 39,
  down: 40
};

// The keydown handler that will be called for every keypress

var keysDown = {};
$('body').keydown(function(event) {
  keysDown[event.keyCode] = true;
}).keyup(function(event) {
  keysDown[event.keyCode] = false;
});

// The animation function, called every 30 ms
setInterval(function () {
  ctx.clearRect(0, 0, width, height);

  ball.draw();
  ball.move();

  ctx.strokeRect(0, 0, width, height);
}, 30);
       </script>
   </body>
   </html>

以下代码生成并下载excel文件，但不允许我知道它何时完成：

<a href="linkToGenerateMyExcelFile">Download excel file</a>

有没有办法知道链接何时完全加载？实际上，我不知道。

Answer 1

对于正在创建excel文件的PHP文件，您需要base64文件，然后返回已完成文件的文件路径，如此...

<?php

$writer = new \PHPExcel_Writer_Excel5($workbook);


ob_start();

    $writer->save('php://output');

$xls = ob_get_contents();
ob_end_clean();

echo 'data:text/xls;base64,' . base64_encode($xls);

?>

对于你想要进行AJAX get调用的JS，当文件返回时，直接将文件输出到一个标签中，并将其附加到任何地方。您也可以window.location = data但它不会添加文件名。我还试图触发a标签上的点击，但也没有触发。

$(function() {
    $(document).on('click', ".btn-export", function(event){
        event.preventDefault();

        $("#myModal-export .loader").removeClass("hide");
        var url = $(this).attr("href");

        $.get(url, function( data ) {
            $("#myModal-export .loader").addClass("hide");
            $a = $("<a>", {href: data, download: 'file_name.xls'});
            $a.text('Download');
            $('body').append($a);
        });

    });
});

Answer 2

如果使用jQuery.ajax（）或jQuery.load（）函数加载Excel创建页面，则可以分别使用“success”或callback函数来了解该过程已完成并转到下一步。如果模态的ID为myModal，则使用load（）函数执行此操作：

$('#myModal').load('path-to-excel-generator.php',function() {
    // code to be executed after completion
});

加载链接后执行一些代码

2 个答案: