时间戳

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

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

问题描述

链接在这里：

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>

标签： javascripthtmlgoogle-sheetsgoogle-sheets-api

解决方案

如果您只想使用 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

推荐阅读