Tilda · 6 мин чтения

Скачивание файлов на Тильде: какой блок выбрать и как отдать PDF

Скачивание файлов на Тильде решается по-разному в зависимости от задачи: один документ на кнопке, список прайсов и презентаций или PDF-бонус после подписки на форму. У каждого варианта своя логика, и путаница обычно возникает из-за того, что PDF в браузере открывается вместо того, чтобы скачаться. Разберу, какой блок брать под каждый сценарий и почему с PDF так происходит.

Какие блоки Тильды отдают файлы на скачивание

На практике под задачу «дать пользователю файл» в Тильде подходят три инструмента, и выбор зависит от того, один это документ или несколько, и нужно ли что-то получить взамен (например, email).

Блок Для чего использовать Особенности
Кнопка Один файл, разовая ссылка на скачивание Вместо ссылки на страницу указываешь ссылку на загруженный файл, кнопка ведёт себя как обычно
Блок «Файлы» (T067) Список из нескольких документов: прайс, каталог, презентация Сам подставляет иконку по типу файла и показывает его вес, оформлять список руками не нужно
Форма Файл выдаётся как бонус после отправки заявки или подписки Ссылка на файл встраивается в сообщение после отправки или на странице, куда идёт редирект

Дальше по каждому варианту подробнее, с нюансами, которые обычно не видно, пока не столкнёшься на реальном проекте.

Кнопка со ссылкой на файл: самый быстрый способ

Если нужно отдать один документ, например прайс-лист или договор оферты, кнопка решает вопрос за пару минут:

  • Добавляю на страницу блок с кнопкой (подойдёт практически любой блок из категории «Кнопки»)
  • В настройках кнопки вместо обычной ссылки на страницу нажимаю на иконку загрузки файла и подгружаю PDF, DOCX или ZIP
  • Тильда сама генерирует прямую ссылку на файл и хранит его на своём CDN, отдельно ничего размещать не нужно
  • Проверяю текст кнопки: «Скачать прайс» работает лучше, чем безликое «Подробнее», это сразу задаёт ожидание пользователю

Этот же приём работает и в текстовом блоке: выделяешь фразу, ставишь ссылку, а вместо URL страницы вставляешь загруженный файл. Удобно, когда файл нужно упомянуть внутри абзаца, а не выносить отдельной кнопкой.

Бесплатный материал

🎁 Полезный скрипт в подарок

Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.

Без спама. Отписка в 1 клик.

Блок «Файлы» для списка документов

Когда файлов больше одного, кнопки на каждый документ превращают страницу в мешанину. Для таких случаев в Тильде есть отдельный блок «Файлы» (T067), заточенный именно под список для скачивания.

Что он даёт по сравнению с рядом кнопок:

  • Автоматически показывает иконку по расширению файла (PDF, DOC, XLS, ZIP выглядят по-разному)
  • Указывает вес файла рядом с названием, пользователь сразу понимает, тяжёлый документ или нет
  • Позволяет задать читаемое название файла отдельно от имени, под которым он лежит физически
  • Не требует верстать список руками через текстовый блок с ссылками

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

Как отдать PDF, чтобы он скачивался, а не открывался в браузере

Это главный источник вопросов в поддержку. Пользователь жмёт кнопку «Скачать PDF», а вместо загрузки файла браузер открывает документ в новой вкладке. Дело не в Тильде: у Chrome, Edge и Firefox есть встроенный просмотрщик PDF, и по умолчанию браузер открывает такой файл, а не скачивает, если сервер не прислал заголовок, явно требующий скачивания. Файлы, загруженные в блоки Тильды, хранятся на CDN-домене платформы, и настроить заголовки ответа для конкретного файла там нельзя, это не функция редактора блоков, а особенность самого хостинга статики.

Атрибут download у ссылки в HTML эту проблему решает только частично: спецификация браузеров гарантирует принудительное скачивание лишь для ссылок в пределах одного домена. Файл на CDN Тильды физически лежит на чужом домене относительно вашего кастомного домена, поэтому браузер атрибут download в таком случае может проигнорировать и всё равно открыть PDF во вкладке. Это ограничение самого HTML5, а не недоработка Тильды.

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

  • Упаковать в ZIP. У архивов нет встроенного просмотрщика в браузере, поэтому ZIP всегда уходит на диск, даже если внутри лежит один PDF на 200 килобайт. Быстрее всего для разовых случаев.
  • Забрать файл через JavaScript и отдать как Blob. Скрипт качает файл через fetch, оборачивает его в Blob и создаёт временную ссылку с принудительным скачиванием. Работает надёжно, если сервер с файлом отвечает без ограничений CORS, а для файлов, загруженных прямо в блок Тильды, так обычно и есть.
  • Перенести файл на свой сервер или в облачное хранилище с настройкой заголовка Content-Disposition. Здесь уже нужен контроль над сервером отдачи, и кнопка на Тильде просто ссылается на внешний URL.

Пример кода для второго варианта, вставляется в настройках страницы в поле дополнительного JS-кода или в блок с HTML-кодом:

document.querySelectorAll('.t-btn[href$=".pdf"]').forEach(function (btn) {
  btn.addEventListener('click', function (e) {
    e.preventDefault();
    var url = btn.getAttribute('href');
    fetch(url)
      .then(function (res) { return res.blob(); })
      .then(function (blob) {
        var objectUrl = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = objectUrl;
        a.download = url.split('/').pop();
        document.body.appendChild(a);
        a.click();
        a.remove();
        URL.revokeObjectURL(objectUrl);
      });
  });
});

Селектор .t-btn это класс, который Тильда навешивает на кнопки блоков, менять его не нужно, скрипт сам найдёт все кнопки со ссылкой на PDF на странице.

Лид-магнит: выдаём файл после отправки формы

Если PDF это чек-лист или гайд в обмен на email, кнопка на видном месте не подходит, файл должен появляться только после отправки формы. В Тильде для этого использую сценарий с редиректом: в настройках формы указываю действие после отправки «Переход на страницу» и веду на отдельную непроиндексированную страницу сайта, где стоит кнопка или блок «Файлы» с нужным документом.

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

Когда без доработки не обойтись

Штатных блоков хватает для восьми случаев из десяти. Доработка нужна, когда встают вопросы вроде «сколько раз скачали файл», «как ограничить доступ по одноразовой ссылке» или «как сразу уведомлять менеджера о новой заявке с прикреплённым файлом». Тильда не считает скачивания файлов и не показывает эту статистику в аналитике блока, поэтому для подсчёта вешаю на кнопку JS-обработчик клика, который отправляет событие в счётчик метрики или дёргает вебхук n8n, а тот уже пишет уведомление в Telegram-бота о том, какой файл и с какой страницы скачали.

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

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

Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.

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

Почему PDF на Тильде открывается в браузере вместо скачивания?

Потому что у Chrome, Firefox и Edge есть встроенный просмотрщик PDF, и по умолчанию файл открывается во вкладке, если сервер не прислал заголовок, требующий скачивания. Файлы на CDN Тильды такой заголовок не отдают, поэтому нужен один из обходных способов: упаковать файл в ZIP, забрать его через JavaScript как Blob или перенести на сервер с настройкой заголовков.

Можно ли ограничить количество скачиваний одного файла на Тильде?

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

Какой максимальный размер файла можно загрузить в Тильду?

Лимит на вес файла и на общий объём хранилища проекта привязан к тарифу и со временем меняется, поэтому точную цифру смотрю в личном кабинете перед загрузкой, а не по памяти с прошлых проектов.

Как найти прямую ссылку на файл, уже загруженный в блок Тильды?

Открываю страницу с этим файлом, кликаю правой кнопкой мыши по кнопке или ссылке на скачивание и выбираю «Копировать адрес ссылки». Ссылка будет вести на CDN Тильды, её можно использовать в другом блоке или передать в скрипт для скачивания через Blob.

Есть задача?

Обсудим в мессенджере

Расскажите, что нужно сделать — отвечу в течение 4 часов в рабочее время. Первая консультация бесплатно.

Продолжая пользование настоящим сайтом Вы выражаете своё согласие на обработку Ваших персональных данных (файлов куки) с использованием Yandex.Metrika.
Понятно