直接从客户端 JavaScript 访问 public google sheet 的数据

Question

有没有办法获取 public google 传播 sheet 的单元格值？

GET https://sheets.googleapis.com/v4/spreadsheets/1vW01Y46DcpCC7aKLIUwV_W4RXLbeukVwF-G9AA7P7R0/values/A1A4?key=abcdef

returns403.

我还在 Postman 中发送了 Referrer : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36

{
    "error": {
        "code": 403,
        "message": "Requests from referer Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36 are blocked.",
        "status": "PERMISSION_DENIED",
        "details": [
            {
                "@type": "type.googleapis.com/google.rpc.ErrorInfo",
                "reason": "API_KEY_HTTP_REFERRER_BLOCKED",
                "domain": "googleapis.com",
                "metadata": {
                    "consumer": "projects/666",
                    "service": "sheets.googleapis.com"
                }
            }
        ]
    }
}

我正在尝试直接从客户端 JavaScript 访问 public sheet 的数据。

没有往返服务器。我记得这在大约 10 年前是可能的，但我无法找到文档。

Answer 1

基于 some brief research，有可用的 JS 库可以让您访问 GSheets 数据，但是 Google 需要 API 键：

Requests to the Google Sheets API for public data must be accompanied by an identifier, which can be an API key or an access token.

这是一个示例库：

gsheets - 获取 public Google 工作表作为普通 JavaScript/JSON.

Answer 2

答案是删除 Google Cloud Console

中的限制

Answer 3

您可以通过 json 端点

访问 public 传播sheet

var id = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
var gid = '1111111111111';
var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;

切一片

data.substring(47).slice(0, -2)

并解析 json

直接link

https://docs.google.com/spreadsheets/d/1n-rjSYb63Z2jySS3-M0BQ78vu8DTPOjG-SZM4i8IxXI/gviz/tq?tqx=out:json&tq&gid=0

gas 示例

function getEndpointJson(){
  var id = '1n-rjSYb63Z2jySS3-M0BQ78vu8DTPOjG-SZM4i8IxXI';
  var gid = '0';
  var txt = UrlFetchApp.fetch(`https://docs.google.com/spreadsheets/d/${id}/gviz/tq?tqx=out:json&tq&gid=${gid}`).getContentText();
  var jsonString = txt.match(/(?<="table":).*(?=}\);)/g)[0]
  var json = JSON.parse(jsonString)
  var table = []
  var row = []
  json.cols.forEach(colonne => row.push(colonne.label))
  table.push(row)
  json.rows.forEach(r => {
    var row = []
    r.c.forEach(cel => {
        try{var value = cel.f ? cel.f : cel.v}
        catch(e){var value = ''}
        row.push(value)
      }
    )
    table.push(row)
    }
  )
  return (table)
}

示例 html 页

例如在html页面上（你必须将它存储在外部服务器中）

<html>
<title>Google Sheets json endpoint V4</title>
<author>Mike Steelson</author>
<style>
table {border-collapse: collapse;}
th,td{border: 1px solid black;}
</style>
<body>
<div id="json">json here</div>
<script>
var id = '1n-rjSYb63Z2jySS3-M0BQ78vu8DTPOjG-SZM4i8IxXI';
var gid = '0';
var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
fetch(url)
  .then(response => response.text())
  .then(data => document.getElementById("json").innerHTML=myItems(data.substring(47).slice(0, -2))  
  );
function myItems(jsonString){
  var json = JSON.parse(jsonString);
  var table = '<table><tr>'
  json.table.cols.forEach(colonne => table += '<th>' + colonne.label + '</th>')
  table += '</tr>'
  json.table.rows.forEach(ligne => {
    table += '<tr>'
    ligne.c.forEach(cellule => {
        try{var valeur = cellule.f ? cellule.f : cellule.v}
        catch(e){var valeur = ''}
        table += '<td>' + valeur + '</td>'
      }
    )
    table += '</tr>'
    }
  )
  table += '</table>'
  return table
}           
</script>
</body></html>

您提供的sheet ID有误。

直接从客户端 JavaScript 访问 public google sheet 的数据

Accessing a public google sheet's data directly from client-side JavaScript

javascript

google-sheets

google-sheets-api

直接link

gas 示例

示例 html 页