Chrome更新后JS多文件下载脚本失效，求修复方案

Got it, let's get that batch download working again with the latest Chrome updates! The problem with your original script is that Chrome has tightened security around automated download triggers recently—rapid, unprompted click() events are now flagged as potentially untrusted auto-behavior and blocked.

Here's a revised script that works around these restrictions, with better compliance and reliability:

// Your list of files to download
const downloadLinks = [
  'http://file-examples.com/wp-content/uploads/2017/10/file_example_JPG_100kB.jpg',
  'http://file-examples.com/wp-content/uploads/2017/10/file_example_TIFF_1MB.tiff'
];

// Create a visible button to trigger downloads (required for Chrome's user interaction rule)
function setupDownloadTrigger() {
  const triggerBtn = document.createElement('button');
  triggerBtn.textContent = 'Start Batch Download';
  triggerBtn.style.cssText = 'padding: 12px 24px; font-size: 16px; cursor: pointer; margin: 20px;';
  triggerBtn.addEventListener('click', async () => await handleBatchDownload(downloadLinks));
  document.body.appendChild(triggerBtn);
}

// Core download function with safeguards for Chrome
async function handleBatchDownload(urls) {
  const downloadLink = document.createElement('a');
  downloadLink.style.display = 'none';
  document.body.appendChild(downloadLink);

  for (const url of urls) {
    try {
      // Fetch the file as a Blob to create a trusted object URL
      const response = await fetch(url);
      if (!response.ok) throw new Error(`Failed to fetch ${url}`);
      
      const fileBlob = await response.blob();
      const objectUrl = URL.createObjectURL(fileBlob);

      // Configure download details
      downloadLink.href = objectUrl;
      // Extract filename from the URL (customize this if needed)
      downloadLink.download = url.split('/').pop();

      // Trigger download with a small buffer to avoid Chrome's block
      downloadLink.click();

      // Clean up the object URL after a short delay to prevent memory leaks
      setTimeout(() => URL.revokeObjectURL(objectUrl), 1500);
      // Add a delay between downloads to bypass anti-abuse restrictions
      await new Promise(resolve => setTimeout(resolve, 600));
    } catch (err) {
      console.error(`Download failed for ${url}:`, err);
    }
  }

  document.body.removeChild(downloadLink);
}

// Initialize the trigger button when the script loads
setupDownloadTrigger();

Why this works where your old script failed: #

• User interaction requirement: Chrome now requires downloads to be initiated by an explicit user action (like clicking a button). The script above creates a visible trigger button instead of running automatically on load.
• Trusted Blob URLs: By fetching files as Blobs and creating object URLs, we give Chrome a "trusted" source for the download, avoiding blocks on direct external URL clicks.
• Controlled delays: The small delay between downloads prevents Chrome from flagging the batch as abusive auto-behavior.

Key Notes: #

• If your files are hosted on a different domain, the server must enable CORS (send Access-Control-Allow-Origin headers) for the fetch() call to work.
• Adjust the delay values (600ms between downloads, 1500ms for cleanup) if you run into issues—larger files may need longer delays.
• You can customize the download attribute value if you want to rename files instead of using the original filename from the URL.

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