Google sheets html view

Данные из Google Таблиц на вашем сайте

Для тех, кто пользуется Google Таблицами, есть хорошая новость — ниже описано решение, которое позволит импортировать данные из таблицы на ваш сайт.

1. Открываем Таблицу Google

Для примера, я возьму таблицу, в которую падают результаты из Google Формы.

2. Открываем меню Tools — Script Editor…

3. Добавляем скрипт

var ss = SpreadsheetApp.getActiveSpreadsheet(), // spreadsheet s = ss.getActiveSheet(); // sheet function getData() < var result = [], range = 'A:E', // диапазон ячеек, который хотим выгружать values = s.getRange(range).getValues(), last_row = parseInt(s.getLastRow()); for (var i = 1; i < last_row; i++) < result.push(values[i]); >return result; > function doGet() < var data = getData(); if(!data) < data = ''; >return ContentService.createTextOutput( JSON.stringify()).setMimeType(ContentService.MimeType.JSON); > 

При необходимости переопределите переменную “range”.

Если вы захотите доработать скрипт, ссылки на документацию:

4. Публикация как Web Application

Открываем меню Publish — Deploy as web app…

Вводим название новой версии проекта (например 1).
Меняем значение для “Who has access to the app” на “Anyone, even anonymous”
Нажимаем “Deploy”.

При первом деплое, нужно пройти процесс авторизации. Описывать не буду, покажу скриншотами.

Далее вам будет показан попап с ссылкой на ваш web app:

Вам нужно скопировать эту ссылку.

Можете сразу открыть её в браузере. Приложение должно вернуть содержание выбранного диапазона таблицы в формате JSON:

То есть любым GET-запросом к этому веб-приложению вы можете получить данные Таблицы. Можно с бекенда или фронтенда, в зависимости от потребностей бизнеса.

Пример работы на фронтенде

Ссылка на l.englishdom.com/google-s.html
Для простоты восприятия скрипта, я не стал делать дополнительное оформление выводимой информации.

На странице используются:

(function () < var app = "https://script.google.com/macros/s/AKfycbzngb-5a3tDdHJ445o5LxqeN63V_ihhF_Nxlkz3gxLyMeG3MA/exec", output = '', xhr = new XMLHttpRequest(); xhr.open('GET', app); xhr.onreadystatechange = function() < if (xhr.readyState !== 4) return; if (xhr.status == 200) < try < var r = JSON.parse(xhr.responseText), result = r["result"]; for (var i = 0; i < result.length; i++)< var obj = r["result"][i]; output += obj.join("
") + "
"; > > catch(e) <> > document.getElementById('info').innerHTML = output; > xhr.send() >)() 

Бонусы для читателей

Мы дарим бесплатный доступ на три месяца изучения английского с помощью наших онлайн-курсов. Для этого просто перейдите по ссылке до 31 декабря 2017 года.

Будем рады видеть вас на индивидуальных занятиях курса «Английский для IT-специалистов».
Пройдите бесплатный вводный урок и получите комплексную обратную связь по своему уровню знаний, затем выбирайте преподавателя и программу обучения себе по душе!

Источник

Google sheets html view

В предыдущих постах я рассматривал возможность отправки результатов обработки списка акций в зависимости от требуемых критериев:

Акции, стоимость которых ниже 70% от максимальной годовой

с последующей отправкой этих результатов на личную почту.

А что если сделать эту информацию публичной?

То есть чтобы она была видна, допустим, даже на этом сайте.

В этом нам поможет развёртывание Гугл веб-аппа с последующей интеграцией его в тело поста или страницы.

Шаг 1 — получаем необходимые данные в массивы

Тут все просто, составляющие кода ниже я разбирал уже неоднократно в предыдущих постах

const url = «https://docs.google.com/spreadsheets/d/1PlQFPaH86ZaEhJo-ymsn41grJ4qzb3HdOTFP8LOwtZc/»;
const ws = SpreadsheetApp.openByUrl(url);
const ss07Stock = ws.getSheetByName(’07ToMaxStock’);
const ss3DaysStock = ws.getSheetByName(‘3DaysFall’);

function get07Stock() const stockArr = ss07Stock.getDataRange().getValues();
return stockArr;
>

function get3DaysStock() const stockArr = ss3DaysStock.getDataRange().getValues();
return stockArr;
>

Где function get07Stock() возвращает массив с акциями ниже 70% от максимальной стоимости этих акций за год, а function get3DaysStock() возвращает массив с акциями, цена которых падает на протяжении последних трёх дней.

Шаг 2 — конечно же doGet

f unction doGet()const stockTemplate = HtmlService.createTemplateFromFile(‘index’);
const resultArr = get07Stock();
const resultArr1 = get3DaysStock();

Пока какая-то аброкадабра, не правда ли?

Но, если разбираться построчно, то:

ровно то же самое, только столбцов на один больше.

а дальше идёт возврат объекта HtmlService через stockTemplate.evaluate()

в данном виде все будет и так уже работать. Однако только по гугл ссылке и с предупреждением, что этот веб апп создан третьим лицами, а не гуглом.

Чтобы была возможность встроить его в сторонний сайт требуется .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

Шаг 3 — html со встроенными переменными

Шаг 4 — deploy as web app

и больше ничего. Здесь нужна только ссылка на веб апп:

Шаг 5 — встраиваем в сайт при помощи

Здесь так же не сильно много кода:

И в результате:

Вам также может понравиться

Счёт на оплату: Шаг 4. Заполняю шаблон, создаю pdf

Запускаем Google apps script в Visual studio

Способы публикации гугл таблицы в интернете

У этой записи 6 комментариев

Ошибку пишет в коде
stockTemplate.resultTable07Stock = resultArr.map(row=>`$$$$`).join(»);
stockTemplate.resultTable3DaysStock = resultArr1.map(row1 =>`$$$$$`).join(»);

А можно ли как-то опубликовать во фрейме и чтобы правки можно было вносить?
я подготовил страницу, поставил защиту на лист, оставил только нужные пару ячеек, надо генерить доку и сохранять

Добрый день, Алексей.
Можно, конечно, заморочиться и сделать все как полноценное приложение.
Но, можно намного проще — посмотрите в сторону google forms, которые позволяют сохранять данные в google sheets, откуда с ними можно дальше делать все, что пожелаете.

Дмитрий, добрый день.
Подскажите, почему после публикации формы на гугл-сайте, пользователи могут видеть только главную страницу, а страничку с формой (добавленную через iframe) не видят.
Сайт выдает ошибку. Может нужно дать доступ к файлам формы на гугл-диске?

Источник

How to embed HTML in Google sheet? [Various Methods]

Google sheets is the spreadsheet software owned by Google. It is part of Google’s workspace productivity suite. It is like Microsoft Excel and Apple’s Numbers. Google spreadsheet is compatible with excel’s file format. Google sheets is a flexible application. It allows users to enter and manipulate the data using formulas. We can also create graphs and charts and also collaborate with other people in real time. Another interesting feature of Google spreadsheet is it can manipulate some of the HTML data in the spreadsheet as well.

Formulas available for HTML

So you might be curious, why do we need any formulas related to HTML in spreadsheets?

One of the reasons is to get the content of the web in the spreadsheet for manipulation. We can also provide the link to the other websites using the formula. Web Scraping is also possible using the «=IMPORTHTML()» formula.

• =IMAGE()
• =HYPERLINK()
• =ISURL()
• =IMPORTHTML()
• =IMPORTFEED()
• =IMPORTXML()
• =IMPORTDATA()

Fact: = is used at the beginning of the formula in the spreadsheet applications

Embed Html into Google Sheet using Formula

We will learn to use some of the formulas mentioned above.

=IMAGE()

This formula is used in sheets to embed or insert images available on the web. The general syntax of this formula is

=IMAGE(URL, Mode, Height, Width) 

Here Mode, Height, and Width are optional arguments.

To insert an image follow the following steps.

1. Open a spreadsheet and click on the cell where you want to insert the image.
2. Then on the formula tab or on the cell type =IMAGE (). The suggestion will be displayed for the formula.

Note: Be sure to keep the URL inside a double quotation i.e. “ ”

Did you know?: To open a new spreadsheet you can type spreadsheet.new in the URL bar.

=IMPORTHTML()

This formula is used to extract or scrape a specific table or list of the web. The general syntax of this formula is

=IMPORTHTML(URL, query, index, locale)

The first parameter is the website link from where we want the data. The second parameter specifies whether we need a table or list from that website. The third parameter is for specifying which table or list. The last parameter is used to specify the region or language. The last parameter is optional if not used it uses the default locale.

Web Scraping using IMPORTHTML

Here we will be learning basic web scraping using the formula IMPORTHTML. To do so, follow the following steps.

1. Click on the cell from where you want to present the data got from web Scraping.
2. In the cell or in the formula box start typing =IMPORTHTML. By doing so you should get a suggestion box. The box will specify the general syntax. After filling in all required parameters. Click enter then you see your data.

Note: Be sure to keep the URL and query inside a double quotation i.e. “ ”. The index is the number. Also, try out the same formula but use the list in place of a table in the query. Try it and find what you will get.

=HYPERLINK

This formula is used to embed a link in the sheets. You might be wondering if you plainly paste the URL link, you can get the link there so why use this function? This function is used to embed the URL link to the label. The general syntax of this formula is

Click on the + Add icon in the upper left corner, choose HTML, and name it ‘index’ and then paste down your html content into the main screen on the right. Conclusion

Google spreadsheets provide flexibility for the manipulation of data. Here we learned some of the formulas and Google App Script to make our work with spreadsheets easier. These formulas and Google App Scripts will surely come in handy when you are performing analysis on the data available on the web. For more content stay tuned.

Article by: Prashant Raj Bista

Источник

How to Embed Excel (or Google Sheets) Tables into HTML

Excel on Office Live can be more flexible, as it creates a link.

1. Log onto Office 365 in the browser with Office Live and select the Excel Icon.

1. Fill in the worksheet as needed, and then, in the Ribbon, select File > Share > Embed.

A form will open showing the layout of the embedded Excel worksheet. Amend accordingly, and the copy the Embed Code (which is in JavaScript) into the required web page to embed the Excel file into that web page.

Embed Google Sheets Tables Into HTML

Once you’ve created a Google Sheets file, you can publish it to the web and share the sheet with multiple users by sending the users a link to the sheet itself.

You can now send the generated link to any users you want to open the file on the web.

1. To remove the file from the web, select Published content and settings > Stop publishing.

1. Click OK on the Google message that pops up to remove the document from the web.

Note: If you had selected Embed, it would have generated HTML code to included in your own web site or blog. This HTML code would then embed the Google Sheets data into your website.

Источник