适配Google Drive链接的JS批量下载重命名脚本修改需求

问题背景 #

现有批量图片下载重命名脚本，可匹配「Image URLs」和「Renamed Text」列的内容，实现文件下载时实时重命名，但无法处理Google Drive直链（即使使用https://drive.google.com/uc?export=view&id=xxx格式的链接），需修改脚本支持该类链接的下载重命名功能。

修改后的完整脚本 #

<!DOCTYPE html>
<html>
<head>
<title>Image Downloader with Renaming (Support Google Drive)</title>
<style>
body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  margin: 0;
  padding: 20px;
}

.container {
  display: flex;
}

.column {
  flex: 1;
  margin-right: 20px;
}

h3 {
  margin-top: 0;
}

textarea {
  width: 100%;
  height: 200px;
  resize: vertical;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>
</head>
<body>
<h1>Image Downloader with Renaming</h1>
<div class="container">
<div class="column">
  <h3>URLs</h3>
  <textarea id="urlList" rows="10" cols="30"></textarea>
</div>
<div class="column">
  <h3>Renamed Text</h3>
  <textarea id="renamedTextList" rows="10" cols="30"></textarea>
 </div>
 </div>
<button id="downloadAllButton">Download All</button>

<script>
// 处理Google Drive链接，转换为可直接下载的链接
function convertDriveUrlToDownloadUrl(url) {
  const driveIdMatch = url.match(/id=([a-zA-Z0-9_-]+)/);
  if (driveIdMatch) {
    const fileId = driveIdMatch[1];
    return `https://drive.google.com/uc?export=download&id=${fileId}`;
  }
  return url;
}

// 通用下载函数，支持普通链接和Drive链接
async function downloadFile(url, renamedText) {
  try {
    const downloadUrl = convertDriveUrlToDownloadUrl(url);
    const response = await fetch(downloadUrl);
    if (!response.ok) throw new Error('Network response was not ok');
    
    const blob = await response.blob();
    const link = document.createElement('a');
    const urlObject = window.URL.createObjectURL(blob);
    
    link.href = urlObject;
    link.setAttribute('download', renamedText);
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    
    // 清理资源
    document.body.removeChild(link);
    window.URL.revokeObjectURL(urlObject);
  } catch (error) {
    alert(`下载 ${renamedText} 失败: ${error.message}`);
  }
}

function handleDownloadAll() {
  const urlList = document.getElementById('urlList').value.trim().split('\n');
  const renamedTextList = document.getElementById('renamedTextList').value.trim().split('\n');

  if (urlList.length !== renamedTextList.length) {
    alert('URL数量与重命名文本数量必须匹配！');
    return;
  }

  // 依次下载，避免同时请求过多导致的问题
  async function downloadSequentially(index) {
    if (index >= urlList.length) return;
    const url = urlList[index].trim();
    const renamedText = renamedTextList[index].trim();
    if (url && renamedText) {
      await downloadFile(url, renamedText);
    }
    downloadSequentially(index + 1);
  }

  downloadSequentially(0);
}

const downloadAllButton = document.getElementById('downloadAllButton');
downloadAllButton.addEventListener('click', handleDownloadAll);
</script>
</body>
</html>

核心修改说明 #

• Google Drive链接处理：新增convertDriveUrlToDownloadUrl函数，提取Drive链接中的文件ID，构造带有export=download参数的直链，确保文件可直接下载
• 替换下载方式：使用fetch API获取文件Blob，替代原有的Canvas转存方案，解决跨域（CORS）和Drive链接的权限问题
• 顺序下载控制：改为串行下载，避免同时发起过多请求导致浏览器限制或服务器拒绝
• 错误处理：添加异常捕获，下载失败时弹出提示信息

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