如何在网页上实现点击按钮将CSV内容导出到Google Sheet的功能

结论 #

完全可以在你自己的站点实现该功能，以下是具体实现方案：

实现前提 #

你需要先完成以下准备工作：

• 前往Google Cloud Console创建新项目
• 为项目启用「Google Sheets API」和「Google Drive API」
• 创建OAuth 2.0客户端ID，将你的站点域名添加到授权的JavaScript源列表中

完整实现代码 #

在你原有代码基础上补充JavaScript逻辑即可，完整代码如下：

textarea {width:300px;height:200px}
button {display:block}

<script src="https://apis.google.com/js/api.js"></script>
<textarea id="csvContent">id,value
2,alpha
3,beta
14,test</textarea>
<button id="openSheetBtn">Open in Google Sheet</button>

// 替换为你自己的OAuth 2.0客户端ID
const CLIENT_ID = '你的客户端ID';
const DISCOVERY_DOCS = ["https://sheets.googleapis.com/$discovery/rest?version=v4"];
const SCOPES = "https://www.googleapis.com/auth/spreadsheets https://www.googleapis.com/auth/drive.file";

let gapiInited = false;
let gisInited = false;

document.getElementById('openSheetBtn').addEventListener('click', handleOpenSheet);

function gapiLoaded() {
  gapi.load('client', initializeGapiClient);
}

async function initializeGapiClient() {
  await gapi.client.init({
    discoveryDocs: DISCOVERY_DOCS,
  });
  gapiInited = true;
}

function gisLoaded() {
  tokenClient = google.accounts.oauth2.initTokenClient({
    client_id: CLIENT_ID,
    scope: SCOPES,
    callback: '', // 后续调用时定义
  });
  gisInited = true;
}

function handleOpenSheet() {
  if (!gapiInited || !gisInited) return;
  
  tokenClient.callback = async (resp) => {
    if (resp.error !== undefined) throw resp;
    await createSheetWithCsv();
  };

  if (gapi.client.getToken() === null) {
    tokenClient.requestAccessToken({prompt: 'consent'});
  } else {
    tokenClient.requestAccessToken({prompt: ''});
  }
}

async function createSheetWithCsv() {
  // 读取并解析CSV内容
  const csvText = document.getElementById('csvContent').value;
  const rows = csvText.split('\n').map(row => row.split(','));
  
  // 创建新表格
  const createResponse = await gapi.client.sheets.spreadsheets.create({
    properties: {
      title: '导入的CSV数据'
    }
  });
  const spreadsheetId = createResponse.result.spreadsheetId;
  const sheetUrl = createResponse.result.spreadsheetUrl;

  // 写入CSV数据
  await gapi.client.sheets.spreadsheets.values.update({
    spreadsheetId: spreadsheetId,
    range: 'Sheet1!A1',
    valueInputOption: 'RAW',
    values: rows
  });

  // 跳转到新的Google Sheet
  window.open(sheetUrl, '_blank');
}

注意事项 #

• 首次使用时用户需要登录Google账号并授权你的应用创建表格的权限
• 免费配额足够普通场景使用，如果访问量较大可以在Google Cloud Console申请提升配额
• 仅支持用户浏览器端操作，所有数据不会经过你的后端服务器

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