如何用JavaScript从Google Sheets获取二维数组用于外部应用？

1. 准备Google Sheets数据 #

• 打开目标Google Sheets表格，确保数据结构和原本地数组一致（每行对应一条记录，每列对应表格字段）
• 点击文件 > 共享 > 发布到网络
• 在弹窗中：
  • 选择要发布的目标工作表（如"Sheet1"）
  • 格式选择逗号分隔值(.csv)
  • 点击发布，复制生成的CSV链接

2. 修改代码实现数据加载 #

以下两种方式任选其一即可：

方式一：让DataTables直接加载CSV（最简便） #

利用DataTables的ajax配置直接指定CSV链接，它会自动完成数据解析：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css" />
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" width="100%"></table>

<script>
new DataTable('#example', {
    columns: [
        { title: 'Description et lien, par exemple' },
        { title: 'Nom du document' },
        { title: 'date entrée' },
        { title: 'date création' }
    ],
    // 替换成你复制的Google Sheets CSV链接
    ajax: {
        url: '你的Google Sheets CSV链接',
        dataType: 'csv',
        headers: { 'Accept': 'text/csv' }
    }
});
</script>
</body>
</html>

方式二：手动获取并解析CSV为二维数组 #

如果需要对数据做额外处理（比如过滤、格式转换），可以手动获取CSV并解析：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css" />
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" width="100%"></table>

<script>
// 替换成你复制的Google Sheets CSV链接
const csvUrl = '你的Google Sheets CSV链接';

$.get(csvUrl, function(csvData) {
    // 解析CSV为二维数组
    const dataSet = csvData.split('\n').map(row => row.split(',').map(cell => cell.trim()));
    // 移除可能存在的空行
    const filteredData = dataSet.filter(row => row.length === 4);

    new DataTable('#example', {
        columns: [
            { title: 'Description et lien, par exemple' },
            { title: 'Nom du document' },
            { title: 'date entrée' },
            { title: 'date création' }
        ],
        data: filteredData
    });
});
</script>
</body>
</html>

注意事项 #

• 发布Google Sheets时，权限需设置为**"任何人，即使没有链接"**，否则前端无法访问数据
• 如果数据包含逗号等特殊字符，建议改用**制表符分隔值(.tsv)**格式发布，解析时将split(',')替换为split('\t')
• Google Sheets数据更新后，发布链接会自动同步新数据，无需重新发布

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