How to embed and display Google Sheets on Dash app excluding the menu and toolbar?

Question

My goal is to show only the first tab of the sheet and to hide the editing toolbar.

I found a few sources that were achieving this goal by adding &rm=minimal&single=true& to the end of the URL to do this but it is having no impact.

Is this possible?

from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div(
    html.Iframe(
        src='https://docs.google.com/spreadsheets/d/1d6BI55rBT83TX12GXFc8uRYt1ztsBeKqS-X5h1bI_BI/edit?usp=sharing?&rm=minimal&single=true&',
        width='1000px',
        height='500px'
    ),
)

if __name__ == "__main__":
    app.run_server(debug=True)

Link to the Google Sheet

Answer 1

I've done this in the past by adding some CSS to constrain the view.

  .container {
  overflow:hidden;
  display: flex;
  justify-content: left;
  height: 892px;
  width: 1217px;
   
}
.right-col iframe {
  position: absolute;
  height: 892px;
  width: 1217px;
  clip:rect(155px,1200px,800px,52px)
  
}

Here is an example of it.

Answer 2

You could switch to Preview mode by adding /preview at the end of the URL. For instance:

https://docs.google.com/spreadsheets/d/1d6BI55rBT83TX12GXFc8uRYt1ztsBeKqS-X5h1bI_BI/preview

If you need the spreadsheet being editable as well, you could add /edit?rm=minimal at the end of the URL instead. For example:

https://docs.google.com/spreadsheets/d/1d6BI55rBT83TX12GXFc8uRYt1ztsBeKqS-X5h1bI_BI/edit?rm=minimal

Answer 3

Hopefully, this is what you wanted to achieve. Try this link - https://codepen.io/vignesh-subash/pen/zYRqGod.

I have done the HTML code by

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTaN8rCDgY5AGNw0BMh3u4DPbM6ZkeHo4AwTn2whDpnKcvKzcq0uvIVpYKId9zj5avBHsyr01RLqTOA/pubhtml?gid=0&amp;range=A1:B18&amp;single=true&amp;widget=true&amp;headers=false"></iframe>

You can achieve this by following the steps.

1. Open a file in Google Sheets.
2. At the top, click File and then Share and then Publish to web.
3. In the window that appears, click Embed.
4. Click Publish.
5. Copy the code in the text box and paste it into your site or blog.
6. To show or hide parts of the spreadsheet, edit the HTML on your site or blog.

• gid=: The sheet ID.
• range=: The rows and columns that are published to the web. For example, A1:B18.
• widget=: True or false. If true, the sheet tab is displayed at the bottom.
• headers=: True or false. If true, row numbers and column letters are displayed.
• chrome=: True or false. If true, the title and footer are displayed.