VGFilePreview

Модуль для быстрого просмотра файла

Документы и архивы

Текст и Markdown, PDF, Office-документы и содержимое ZIP.

Текст и Markdown

Контент загружается только после открытия. Markdown преобразуется в безопасную разметку, обычный текст сохраняет переносы.

HTML 
<div data-vg-filepreview="/files/readme.md" data-fields="icon,name,ext,preview,download">
  <div class="icon"></div><button class="name" type="button"></button><span class="ext"></span>
  <div class="preview"></div><div class="download"></div>
</div>
JavaScript 
import { VGFilePreview } from 'vgapp';

document.querySelectorAll('[data-vg-filepreview]').forEach((element) => {
  VGFilePreview.init(element, { lang: 'ru' });
});
CSS 
.document-list {
  display: grid;
  gap: 0.75rem;
}

PDF и Office

PDF открывается во встроенном iframe с навигацией и масштабом. Office использует внешний viewer для публичных URL и всегда оставляет скачивание как fallback.

HTML 
<div data-vg-filepreview="/files/YA-2327-9401-2420.pdf" data-fields="icon,name,preview,download">
  <div class="icon"></div><button class="name" type="button"></button><div class="preview"></div><div class="download"></div>
</div>
<div data-vg-filepreview="/files/VEGASAPP.docx" data-fields="icon,name,preview,download">
  <div class="icon"></div><button class="name" type="button"></button><div class="preview"></div><div class="download"></div>
</div>
JavaScript 
import { VGFilePreview } from 'vgapp';

document.querySelectorAll('[data-vg-filepreview]').forEach((element) => {
  VGFilePreview.init(element, { lang: 'ru' });
});
CSS 
.document-list {
  display: grid;
  gap: 0.75rem;
}

Содержимое ZIP

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

HTML 
<div data-vg-filepreview="/files/tradein.zip" data-fields="icon,name,size,preview,download" data-size="1.2 MB">
  <div class="icon"></div><button class="name" type="button"></button><span class="size"></span>
  <div class="preview"></div><div class="download"></div>
</div>
JavaScript 
import { VGFilePreview } from 'vgapp';

document.querySelectorAll('[data-vg-filepreview]').forEach((element) => {
  VGFilePreview.init(element, { lang: 'ru' });
});
CSS 
.document-list {
  display: grid;
  gap: 0.75rem;
}