Экспорт компонентов в PNG

Вы можете экспортировать компоненты в формат PNG. Эта процедура не требует какой-либо дополнительной конфигурации компонентов.

Экспорт доступен как в стандартной, так и в pro версиях.

Чтобы экспортировать компонент в PNG файл, вызовите метод toPNG. Метод принимает следующие параметры:

  • id - (string, object) - ID или объект экспортируемого компонента, или ID любого HTML элемента
  • config - (string,object) - необязательный параметр. Набор конфигурационных опций или название для созданного PNG файла.

Например, если вы хотите экспортировать чарт в PNG, вам необходимо вызвать метод toPNG() и передать в его ID чарта в качестве параметра:

webix.ui({
    view:"chart",
    id: "myChart",
    // конфигурация чарта
});
 
webix.toPNG($$("myChart"));

Related sample:  Export to PNG

Экспорт данных офлайн

Зависимости, которые используются при экспорте содержаться в онлайн каталоге Webix CDN. Если вам необходимо добавить возможность экспорта данных в офлайн режиме, следуйте указаниям:

1. Скачайте пакет с CDN-файлами с ресурса https://github.com/webix-hub/cdn-extras.
2. Переименуйте папку в "extras" и переместите её в необходимую директорию.
3. Укажите путь к локальному CDN репозиторию:

webix.env.cdn = "/local_folder";

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

  • если вы указываете путь относительно текущей страницы, он должен иметь следующий формат:
webix.env.cdn = "../../../../local_folder";
  • абсолютный путь к репозиторию выглядит следующим образом:
webix.env.cdn = "http://localhost/local_folder";

Кастомизация экспорта в PNG

Некоторые общие моменты кастомизации экспорта можно применять к методу toPNG. Однако также существуют специальные настройки, описанные ниже.

  • Как указать имя выходного файла (имя по умолчанию - Data.png):
webix.toPNG($$("table"), "somefile");
// или
webix.toPNG($$("table"), {
    filename:"somefile"
});
Наверх