TCPDF创建PDF需要花费太多时间，如何在此时显示加载效果

Question

I have an anchor tag, with href to a page, where it will generate a PDF using TCPDF. It takes too much time to generate PDF. Meanwhile the interface page remain as such, it shows a loading icon on top of browser title bar. How can i show a loader on the interface, and this loader need to vanish after the download is completed.

Thanks in advance.

Answer 1

Here is something to get you started.

HTML:

<a id="loadPDF" href="#">Get PDF</a>

JS:

// When link is clicked show loading indicator
$('#loadPDF').on("click", function () {

    // Save element
    var link = $(this);

    // Insert loading indicator after link
    link.after("<span> Loading...</p>");

    // Hide indicator after 2 seconds
    setTimeout(function(){ link.next().hide(); }, 2000);
});

You can replace the "loading..." with an animated gif. If you want to get fancier you can lookup some code that will make the loading indicator follow the mouse around. As far as removing the loading indicator after the PDF loads is a little trickier. In the example I made it disappear after 2 seconds.

Example: JSFiddle