我需要使用带有奇怪 Google 电子表格链接的 Javascript 创建一个 HTML 表。我该怎么做呢？答案

【问题标题】：I need to create an HTML table using Javascript with a weird Google Spreadsheet link. How do I do this?我需要使用带有奇怪 Google 电子表格链接的 Javascript 创建一个 HTML 表。我该怎么做呢？
【发布时间】：2019-12-24 16:12:58
【问题描述】：

这里是链接：

https://docs.google.com/spreadsheets/d/e/2PACX-1vT4FtWYHA0bhVipKSIk5dZ1nygeSUWsAnI1e2s32915_J0g8KjQU_XRJ3dk4s2hmYWlkddtg-ZM2kXJ/pubhtml?gid=89211736&single=true&widget=false&headers=false

我不能使用除了 html 或 javascript 之外的任何东西。

我知道如何通过常规的可共享链接执行此操作，但这是某种 api 链接。我不知道。但是这个链接不允许我以简单的方式做到这一点。 :(

这是我尝试过的

<body onload="doStuff()">

    <div id="content">


    </div>



    <script type="text/javascript">

    function doStuff(){

        $.ajax({
            url:'https://docs.google.com/spreadsheets/d/e/2PACX-1vT4FtWYHA0bhVipKSIk5dZ1nygeSUWsAnI1e2s32915_J0g8KjQU_XRJ3dk4s2hmYWlkddtg-ZM2kXJ/pubhtml?gid=89211736&single=true&widget=false&headers=false',
            type:'GET',
            success: function(data){
            $('#content').html($(data).find('#waffle').html());
        }
        });

    }

    </script>

</body>

【问题讨论】：

也许您可以将 url 作为字符串加载并检索表格，文档已经包含？请记住，这将与 CORS 冲突
我如何只定位表格标签

标签： javascript html google-sheets google-sheets-api

【解决方案1】：

如果您只想使用 JavaScript，则需要使用 Sheets API 并按照快速入门进行请求[1]。您可以执行电子表格.values.batchGet 请求 [2] 来检索您想要的值，然后您可以使用 appendchild() [3] 等 JS 函数操作 html DOM 以使用您检索的值创建 html 表 [4]之前。

[1]https://developers.google.com/sheets/api/quickstart/js

[2]https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/batchGet

[3]https://www.w3schools.com/jsref/met_node_appendchild.asp

[4]https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics

【讨论】：