如何下载审查元素网络面板中的12000个Blob格式文件？

解决方案：使用浏览器控制台脚本批量处理 #

1. 打开包含Blob文件的页面，确保所有目标文件已加载完成。
2. 按F12打开开发者工具，切换到Console标签页。
3. 粘贴以下脚本并回车执行：

// 获取所有src为Blob URL的图片元素（若Blob是其他元素，修改选择器即可）
const blobElements = document.querySelectorAll('img[src^="blob:"]');

// 遍历处理每个Blob
blobElements.forEach(async (elem, index) => {
    try {
        // 提取Blob URL中的唯一标识
        const blobId = elem.src.split('blob:')[1].split('/')[1];
        // 生成指定格式的文件名
        const fileName = `${blobId.toUpperCase()} File (.${blobId.toLowerCase()})`;
        
        // 获取Blob对象
        const response = await fetch(elem.src);
        const blob = await response.blob();
        
        // 创建并触发下载
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.download = fileName;
        
        document.body.appendChild(link);
        link.click();
        
        // 清理临时资源
        window.URL.revokeObjectURL(downloadUrl);
        document.body.removeChild(link);
        
        console.log(`已完成第${index+1}个文件保存: ${fileName}`);
    } catch (err) {
        console.error(`第${index+1}个文件保存失败:`, err);
    }
});

注意事项 #

• 元素选择器调整：如果你的Blob不是通过img标签展示，而是a标签的href或其他元素，修改document.querySelectorAll的参数，比如a[href^="blob:"]，同时将elem.src替换为elem.href。
• 批量下载权限：浏览器可能会拦截大量下载请求，需在弹出的权限提示中允许该网站的下载操作。
• 分批次处理：12000个文件数量较大，建议修改脚本分批次处理（比如每次处理100个），避免浏览器卡顿崩溃。示例：

  // 分批次处理，每次处理100个
  const batchSize = 100;
  for (let i = 0; i < blobElements.length; i += batchSize) {
      const batch = Array.from(blobElements).slice(i, i + batchSize);
      batch.forEach(async (elem, index) => {
          // 复用上面的核心处理逻辑
          const blobId = elem.src.split('blob:')[1].split('/')[1];
          const fileName = `${blobId.toUpperCase()} File (.${blobId.toLowerCase()})`;
          const response = await fetch(elem.src);
          const blob = await response.blob();
          
          const downloadUrl = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = downloadUrl;
          link.download = fileName;
          
          document.body.appendChild(link);
          link.click();
          
          window.URL.revokeObjectURL(downloadUrl);
          document.body.removeChild(link);
          
          console.log(`批次内第${index+1}个文件已保存: ${fileName}`);
      });
      // 等待2秒再处理下一批，降低浏览器负载
      await new Promise(resolve => setTimeout(resolve, 2000));
  }
  

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