如何用JQuery实现带进度条的文件下载及手动下载按钮功能？

Hey there, let's solve this problem properly. The main challenge here is tracking download progress—regular <a> tags don't give us access to that data, so we'll use jQuery alongside XMLHttpRequest (XHR) to handle the download and monitor progress. Here's a complete, working implementation that covers all your requirements:

1. HTML Structure #

First, set up the basic UI elements: a download button, a progress bar container, and a completion alert.

<button id="downloadBtn">Download Large PDF</button>

<!-- Progress Bar Container -->
<div id="progressContainer" style="display:none; margin-top: 1rem;">
  <div id="progressBar" style="width: 0%; height: 20px; background-color: #2563eb; border-radius: 3px;"></div>
</div>

<!-- Download Complete Alert -->
<div id="completeAlert" style="display:none; margin-top: 1rem; padding: 0.75rem; background-color: #dcfce7; color: #166534; border-radius: 4px;">
  Download Complete
</div>

2. CSS Styling (Optional but Recommended) #

Add some basic styling to make the progress bar and alert look clean:

#progressContainer {
  width: 100%;
  background-color: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
}

#progressBar {
  transition: width 0.2s ease-in-out; /* Smooth progress animation */
}

3. jQuery/JavaScript Logic #

This is the core part where we handle the download request, track progress, and trigger the completion flow.

$(document).ready(function() {
  $('#downloadBtn').click(function() {
    // Replace this with your actual PDF file URL
    const pdfFileUrl = '/path/to/your/large-document.pdf';
    
    // Reset UI state
    $('#progressContainer').show();
    $('#completeAlert').hide();
    $('#progressBar').width('0%');
    
    // Initialize XHR request
    const xhr = new XMLHttpRequest();
    xhr.open('GET', pdfFileUrl, true);
    xhr.responseType = 'blob'; // Critical: tells the browser to handle the response as a binary blob
    
    // Track download progress
    xhr.onprogress = function(event) {
      if (event.lengthComputable) {
        // Calculate percentage complete
        const progressPercent = (event.loaded / event.total) * 100;
        $('#progressBar').width(`${progressPercent}%`);
      }
    };
    
    // Handle successful download
    xhr.onload = function() {
      if (xhr.status === 200) {
        // Create a temporary blob URL for the downloaded file
        const blobUrl = URL.createObjectURL(xhr.response);
        
        // Create a hidden anchor tag to trigger the download
        const downloadLink = document.createElement('a');
        downloadLink.href = blobUrl;
        downloadLink.download = 'my-large-document.pdf'; // Set your desired filename here
        document.body.appendChild(downloadLink);
        downloadLink.click();
        
        // Clean up to avoid memory leaks
        document.body.removeChild(downloadLink);
        URL.revokeObjectURL(blobUrl);
        
        // Finalize UI: set progress to 100%, hide bar, show alert
        $('#progressBar').width('100%');
        setTimeout(() => {
          $('#progressContainer').hide();
          $('#completeAlert').show();
        }, 500); // Small delay to let users see the 100% state
      } else {
        alert('Download failed. Please check the file URL and try again.');
        $('#progressContainer').hide();
      }
    };
    
    // Handle download errors
    xhr.onerror = function() {
      alert('An error occurred while downloading the file.');
      $('#progressContainer').hide();
    };
    
    // Send the request
    xhr.send();
  });
});

Key Notes to Make This Work #

• Content-Length Header: Your server must return the Content-Length header for the PDF file. Without this, event.lengthComputable will be false, and we can't calculate the progress percentage. Most web servers (Apache, Nginx, etc.) do this automatically for static files, but double-check if you're generating PDFs dynamically.
• CORS: If the PDF is hosted on a different domain, you'll need to configure CORS on that server to allow cross-origin requests.
• Memory Management: We use URL.revokeObjectURL() to clean up the blob URL after download—this prevents memory leaks, especially important for large files.

That's it! This implementation will let users click the button to download large PDFs, see a real-time progress bar, and get a completion alert once done.

内容的提问来源于stack exchange，提问作者Viral Vanani