google-sheets - 您可以在嵌入 Google 表格时从底部删除底部部分（导航箭头和表格名称）吗？

Question

我将 Google 表格的单页发布到网络上，并且正在使用嵌入选项。我正在尝试摆脱底部的灰色导航栏。我发现的其他建议说，在 URL 末尾添加“&rm=minimal”应该可以去掉它，但这似乎在这里不起作用。

嵌入工作表在浏览器上的外观

这里是谷歌表格提供的代码，我添加了一些编辑：

<iframe width="600px" height="350px" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSX-LmmuDoGXvJrAJ--r0sCXBuRkJ9IOhMSRGE-R0mPSdqnYC6OHPMe40UEhJAET8GS0cIc7QWMGrSk/pubhtml?gid=902947501&amp;single=true&amp;widget=true&amp;headers=false&chrome=false&rm=minimal"></iframe>

标签： google-sheetsiframe

Answer 1

替代嵌入。

嵌入的选项非常有限，据我所知，没有删除页脚部分的选项。也就是说，有一种方法可以让简单的表格数据显示在您的数据上，尽管它确实比简单的嵌入需要更多的代码，但优点是您可以完全自定义其外观。

在获得嵌入链接的同一菜单中，您还可以将工作表发布为 CSV 文件：

这会给你一个这样的链接：

https://docs.google.com/spreadsheets/d/e/[ID_NUMBER]/pub?gid=1417861555&single=true&output=csv

您可以像这样在 HTML 中使用它：

<!--Some basic Styling-->
<style>
  table {
      border-collapse: collapse;
      border: 2px black solid;
      font: 12px sans-serif;
  }

  td {
      border: 1px black solid;
      padding: 5px;
  }
</style>

<script>
  let url = "[LINK]"; // <<--- PASTE LINK HERE

  // Get the data
  fetch(url)
    .then((resp) => resp.body)
    .then((stream) => new Response(stream))
    .then((response) => response.blob())
    .then((blob) => {
      blob.type = "text/csv";
      return blob.text();
    })
    // turn csv into 2D array
    .then((text) => csvTo2DArray(text))
    // make a table
    .then((tableArray) => makeTable(tableArray))
    .catch((err) => console.error(err));

  // turn the csv into a two-dimensional array
  function csvTo2DArray(csv){
    const rows = csv.split("\n")
    const output = rows.map(col => col.split(','))
    return output
  }
  
  // use the two dimensional array to append a table to the web page.
  function makeTable(tableArray){
    const headers = tableArray.shift();
    const rows = tableArray;

    let table = document.createElement('table')
    let tableHeader = document.createElement('tr')
    
    headers.forEach(header => {
      let headerElement = document.createElement('th')
      headerElement.innerText = header
      tableHeader.appendChild(headerElement)
    })

    table.appendChild(tableHeader)

    rows.forEach(row => {
      let rowElement = document.createElement('tr')
      row.forEach(data => {
        let dataElement = document.createElement('td')
        dataElement.innerText = data
        rowElement.appendChild(dataElement)
      })
      table.appendChild(rowElement)
    })
    
    document.body.appendChild(table)
  }
</script>

通过将以上内容准确粘贴到 HTML 文件中，然后在电子表格中包含此数据：

它将呈现这样的网页：