Excel на сайте в 2026: как вывести таблицу и собирать заявки

Эксель и сайт связываются в обе стороны: данные из таблицы можно показать на странице, а заявки со страницы отправлять обратно в таблицу. Дальше четыре рабочих способа и то, на чём спотыкаются чаще всего: кириллица в CSV и лишние данные в открытом доступе.

Что именно вы хотите связать

Связка таблицы и сайта распадается на четыре разные задачи, и решения у них почти не пересекаются. Полезно сразу понять, какая ваша.

• Показать посетителям данные, которые вы ведёте в таблице (прайс, расписание, наличие), причём так, чтобы страница обновлялась вместе с ней.
• Один раз перенести готовый файл в вёрстку: состав, характеристики, тарифы, которые меняются раз в полгода.
• Собирать в таблицу то, что люди заполняют на сайте: заявки, записи, ответы анкеты.
• Отдать сам файл на скачивание или заменить таблицу калькулятором на странице.

Вёрстку таблицы (шапка, границы, сортировка, поведение на телефоне) объясняет отдельная статья про таблицу на странице сайта. Здесь речь про файл и таблицу как источник и приёмник данных.

Показать таблицу на сайте: публикация ссылкой

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

1. Откройте таблицу и выберите «Файл» → «Опубликовать» → «Опубликовать в интернете».
2. Укажите, что публикуете: всю книгу или один лист, и выберите формат публикации.
3. Перейдите на вкладку встраивания и скопируйте готовый код <iframe>.
4. Вставьте код в то место страницы, где должна стоять таблица, и задайте width="100%".
5. Проверьте страницу на телефоне: если таблица шире экрана, оберните <iframe> в блок с overflow-x: auto, чтобы ездила она, а не вся страница.

Изменения в исходной таблице автоматически попадают в опубликованную копию, автопубликацию можно отключить, а саму публикацию отменить в разделе «Опубликованные материалы и настройки» (справка Google). Если аккаунт рабочий или учебный, публикацию файлов может запретить администратор.

У Microsoft есть похожая кнопка: у книги, которая лежит в OneDrive, в веб-интерфейсе появляется пункт встраивания с генерацией <iframe> (инструкция Microsoft). Из России путь неудобный: оплатить подписку российской картой не выйдет; корпоративные аккаунты компания отключала от облачных сервисов ещё в 2024 году (РБК).

Данные из таблицы своим кодом: ссылка на CSV

Встроенная таблица так и выглядит на странице: вставкой со своими шрифтами и рамками. Если данные должны быть частью дизайна, забирайте их в формате CSV и рисуйте таблицу своей вёрсткой.

У таблицы Google есть служебный адрес выгрузки листа:

https://docs.google.com/spreadsheets/d/ИДЕНТИФИКАТОР/export?format=csv&gid=0

Идентификатор берётся из адреса таблицы, gid это номер листа (он тоже виден в адресе). Чтобы ссылка открывалась без входа в аккаунт, у таблицы должен быть доступ по ссылке или публикация.

Разбирать полученный текст руками не нужно, это делает библиотека Papa Parse: она скачивает файл по адресу и отдаёт готовый массив строк (papaparse.com).

Papa.parse(url, {
  download: true,
  header: true,
  complete: function (res) {
    render(res.data); // ваша функция отрисовки таблицы
  }
});

Если исходник это именно файл .xlsx, а не CSV, его читает SheetJS: библиотека разбирает книгу Excel прямо в браузере и отдаёт содержимое листов в виде обычных объектов. Открытая версия распространяется под лицензией Apache 2.0, а браузерная сборка раздаётся с собственного CDN проекта, а не из npm (репозиторий SheetJS).

Писать код с нуля не обязательно: задача формулируется одним абзацем, ИИ-агент собирает страницу целиком:

Есть ссылка на CSV с колонками: Товар, Цена, Наличие.
Сделай на странице таблицу: заголовки из первой строки,
поиск по названию, сортировка по цене, адаптив под телефон.
Данные грузить один раз при открытии, пока грузятся показывать
надпись «Загружаем». Если ссылка недоступна, показать сообщение,
а не пустую таблицу.

По теме: Как сделать сайт с таблицей в 2026: вставить таблицу и взять данные

Файл превратить в готовую таблицу один раз

Когда данные меняются раз в полгода, тянуть их скриптом незачем: проще один раз получить готовую разметку и вставить её в страницу.

• Десктопный Excel умеет сам: «Файл» → «Сохранить как» → тип «Веб-страница». Разметка получается тяжёлой, со служебными стилями Office, которые приходится чистить.
• Скопировать диапазон и вставить в чат нейросети с просьбой сверстать таблицу. Рабочий вариант для нескольких десятков строк.
• Отдать нейросети сам файл: современные модели читают .xlsx и .csv, ограничения по объёму и форматам мы собирали в разборе работы нейросети с файлами.

У разового переноса есть плюс: такая таблица это обычный текст страницы, поисковики видят её содержимое. Внутри <iframe> данные для них чужая страница.

Обратный путь: заявки с сайта попадают в таблицу

Вторая половина задачи зеркальна: человек заполняет форму на сайте, а строка появляется у вас в таблице. Четыре способа по возрастанию сложности.

1. Google Форма. В редакторе на вкладке ответов привяжите таблицу (новую или существующую), дальше каждый ответ падает отдельной строкой. Форма встраивается на страницу тем же <iframe>.
2. Яндекс Формы. Ответы видны в интерфейсе, выгружаются файлом и складываются на Яндекс Диск, а в интеграциях настраивается HTTP-запрос на ваш адрес (справка Яндекс Форм).
3. Своя форма на сайте плюс обработчик в Google Apps Script: скрипт с функцией doPost публикуется как веб-приложение и получает данные формы обычным POST-запросом (документация Apps Script).
4. Готовые интеграции конструктора или сервиса автоматизации: если форма уже стоит на платформе, у неё обычно есть отправка вебхука или прямая связка с таблицами.

Обработчик для третьего варианта помещается в несколько строк:

function doPost(e) {
  const sheet = SpreadsheetApp.openById('ID_ТАБЛИЦЫ').getSheets()[0];
  const data = JSON.parse(e.postData.contents);
  sheet.appendRow([new Date(), data.name, data.phone, data.comment]);
  return ContentService.createTextOutput('ok');
}

Заведите отдельный лист для сырых строк, куда скрипт пишет данные как есть, и второй для формул и сводок. Через месяц захочется поменять расчёты, и приём заявок при этом не сломается.

Таблица хороша как архив, но она молчит: о заявке вы узнаете, только когда откроете файл. Дублируйте каждую заявку письмом или сообщением в мессенджер. О надёжных схемах приёма рассказывает статья о том, куда уходят заявки с формы.

По теме: Как сделать ссылку на документ на сайте: открыть или скачать

Скачать файл и калькулятор вместо таблицы

Иногда от сайта нужно отдать файл: прайс, шаблон, бланк. Часть простая, но и в ней есть мелочи.

• Положите файл рядом со страницами (например, в папку /files/) и поставьте ссылку <a href="/files/price.xlsx" download>Скачать прайс</a>. Атрибут download просит браузер сохранить файл, а не пытаться его открыть.
• Подпишите рядом формат и вес («xlsx, 240 КБ»): с мобильного интернета по этой строке решают, качать сейчас или нет.
• Публичная ссылка Яндекс Диска годится как временное решение, но без платного тарифа у неё есть суточный лимит скачиваний (справка Яндекс 360).
• Обновляя файл, меняйте имя (price-2026-08.xlsx), иначе часть посетителей получит старую версию из кэша браузера.

Отдельная развилка: если таблица нужна человеку только чтобы посчитать (стоимость доставки, метраж, платёж), показывать её незачем. Формула переносится в форму с полями и результатом, и разбираться в чужих ячейках не приходится. Такую страницу ИИ-агент собирает за один заход:

Собери калькулятор стоимости на одной странице: поле «площадь»
и выбор покрытия из трёх вариантов с разной ценой за метр.
Результат пересчитывается сразу при вводе, без кнопки.
Цены вынеси в один объект в начале скрипта, чтобы я правил их сам.

Кириллица, кодировка и лишние данные

Почти все проблемы этой связки приходятся на две вещи: кодировку файла и данные, которых в открытом доступе быть не должно.

• Русский Excel по умолчанию сохраняет CSV в кодировке Windows-1251 и с разделителем «точка с запятой». Скрипт на странице ждёт UTF-8 и запятую, поэтому кириллица превращается в нечитаемые символы. При сохранении выбирайте вариант с UTF-8 (разбор кодировок в Excel).
• Обратная сторона: файл в UTF-8 без BOM сам Excel открывает как Windows-1251, и кириллица ломается уже у получателя. Файл для людей сохраняйте в UTF-8 с BOM, файл для скрипта без него.
• Разделитель задавайте в коде явно, а не надейтесь на угадывание.
• Персональные данные (телефоны, адреса, ФИО клиентов) в опубликованную таблицу класть нельзя: публикация открывает файл любому по ссылке, а такие страницы попадают в индекс поисковиков. Публичные ссылки на чаты нейросетей находились в поиске ровно поэтому (пример).
• Публикуйте отдельный лист-витрину, а не рабочий файл: в опубликованный лист попадает всё, что на нём есть, включая черновые строки внизу и колонку с себестоимостью.
• Если сайт принимает данные людей, нужны согласие на обработку и политика конфиденциальности, это объясняет статья про регистрацию и формы на сайте.

Частые вопросы

Можно ли вставить сам файл xlsx, чтобы он открывался прямо на странице?

Нет, файл .xlsx браузер скачивает, а не показывает. На странице открывается либо опубликованная онлайн-копия, либо таблица, которую нарисовал ваш код по данным из файла.

Данные на сайте будут обновляться сами?

Через публикацию и через ссылку на CSV, да: вы правите исходник, страница показывает новые значения. Через разовую вставку разметки, нет: таблицу придётся переносить заново.

Нужен ли для этого хостинг, сервер и база данных?

Нет. Встроенная таблица работает на любой странице, куда вы можете вставить код, а выгрузка CSV и калькулятор считаются в браузере посетителя. Сервер понадобится позже: когда данных станет много или показывать их всем будет нельзя.

Что делать, если сервисами Google пользоваться нельзя?

Ведите данные в Яндекс Документах или в обычном файле, выгружайте .csv в UTF-8 и кладите его рядом с сайтом. Скрипт на странице читает такой файл по адресу вида /data/price.csv точно так же, а обновление данных превращается в замену одного файла.