如何通过带Google Auth弹窗的JavaScript下载Google Sheet的CSV文件？

要复现官方API演示页的弹窗授权+导出功能，核心是用OAuth 2.0隐式授权流（Implicit Grant Flow）——这是唯一不需要后端、不用私钥、纯前端就能完成的授权方式，完全符合你的极简需求。

第一步：快速创建Google OAuth客户端ID（5分钟搞定） #

• 打开Google Cloud控制台，创建一个新项目（随便起个名字，比如「Sheet导出工具」）
• 搜索并启用「Google Drive API」
• 进入「API和服务」→「凭据」，点击「创建凭据」→「OAuth客户端ID」
• 应用类型选「桌面应用」（本地工具用这个最方便），随便填个名称，点击创建
• 记下生成的客户端ID，这是唯一需要的配置项，不用管私钥

第二步：本地HTML+JS代码实现 #

创建一个index.html文件，复制下面的代码，把YOUR_CLIENT_ID替换成你刚才拿到的客户端ID：

<!DOCTYPE html>
<html>
<head>
    <title>Sheet导出CSV工具</title>
    <style>
        .container { margin: 20px; }
        input, button { padding: 8px; margin: 5px; font-size: 16px; }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="fileId" placeholder="输入Google Sheet文件ID">
        <button onclick="exportSheet()">导出CSV</button>
    </div>

    <script>
        const CLIENT_ID = 'YOUR_CLIENT_ID';
        const REDIRECT_URI = 'http://localhost:8080'; // 要和控制台填的重定向URI一致
        const SCOPE = 'https://www.googleapis.com/auth/drive.readonly';

        // 处理授权弹窗逻辑
        function initAuth() {
            return new Promise((resolve, reject) => {
                // 构造授权URL
                const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?` +
                    `client_id=${CLIENT_ID}` +
                    `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
                    `&scope=${encodeURIComponent(SCOPE)}` +
                    `&response_type=token` +
                    `&prompt=consent`; // 强制弹出授权窗口，可选auto

                // 打开授权弹窗
                const authWindow = window.open(authUrl, 'AuthWindow', 'width=600,height=600');
                
                // 监听弹窗消息（授权完成后传递token）
                window.addEventListener('message', function handleMessage(event) {
                    if (event.origin !== new URL(REDIRECT_URI).origin) return;
                    if (event.data.token) {
                        resolve(event.data.token);
                        authWindow.close();
                        window.removeEventListener('message', handleMessage);
                    } else if (event.data.error) {
                        reject(event.data.error);
                        authWindow.close();
                        window.removeEventListener('message', handleMessage);
                    }
                });
            });
        }

        // 授权完成后调用Drive API导出CSV
        async function exportSheet() {
            const fileId = document.getElementById('fileId').value.trim();
            if (!fileId) {
                alert('请输入Google Sheet文件ID');
                return;
            }

            try {
                const token = await initAuth();
                
                // 调用Drive Files: Export接口
                const response = await fetch(`https://www.googleapis.com/drive/v3/files/${fileId}/export?mimeType=text/csv`, {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });

                if (!response.ok) throw new Error(`API请求失败: ${response.statusText}`);
                
                // 下载CSV文件
                const csvBlob = await response.blob();
                const url = URL.createObjectURL(csvBlob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `${fileId}.csv`;
                a.click();
                URL.revokeObjectURL(url);
            } catch (err) {
                alert(`导出失败: ${err.message}`);
            }
        }
    </script>

    <!-- 授权回调页面（嵌入在弹窗内） -->
    <script id="redirect-page" type="text/html">
        <!DOCTYPE html>
        <html>
        <body>
            <script>
                // 从URL哈希解析token或错误信息
                const hash = window.location.hash.substring(1);
                const params = new URLSearchParams(hash);
                const token = params.get('access_token');
                const error = params.get('error');

                // 向主窗口发送消息
                window.opener.postMessage({ token, error }, window.opener.origin);
            </script>
        </body>
        </html>
    </script>

    <!-- 处理授权回调：自动渲染回调页面 -->
    <script>
        if (window.location.hash.includes('access_token') || window.location.hash.includes('error')) {
            document.write(document.getElementById('redirect-page').innerHTML);
        }
    </script>
</body>
</html>

第三步：本地运行 #

1. 用Python启动静态服务器：

   python -m http.server 8080
   

2. 浏览器访问http://localhost:8080
3. 输入Google Sheet的文件ID（从Sheet URL中提取，比如https://docs.google.com/spreadsheets/d/XXXXXX/edit里的XXXXXX）
4. 点击「导出CSV」，弹出授权窗口后登录授权，CSV文件会自动下载

关键细节说明 #

• 授权流程：隐式授权流直接在前端返回access_token，无需后端参与，适配本地工具场景
• 权限控制：使用drive.readonly最小权限，降低用户授权门槛，同时保证安全
• 跨域处理：通过window.postMessage在弹窗和主窗口间传递token，避免跨域问题
• 简化配置：将回调页面嵌入同一HTML文件，无需额外创建文件

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