Файл с отчётом через Devexpress

Идея

В качестве средства просмотра отчётов использовать компоненты DevExpress.

 

Реализация

В некую папку выкладывается html файл с отчётом и data.js к нему.

Эта папка может быть как рядом с Юпитером, так и на клиентской машине, если работаем через RDP.

При открытии файла в него подтягивается data.js и открывается отчёт, заполненный данными (см. приложенный файл "пример.rar")

 

Трудности 

В норме одним файлом не обойтись - есть внешние  js, css, fonts, etc.

Нам множество файлов не очень интересно, хочется обойтись одним. 

 

Как сделать один файл

Скачиваем пример для jQuery, например отсюда: https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RecordGrouping/jQuery/Light/

При этом у нас получаются следующие файлы:

index.html

styles.css

index.js

data,js

И в файле index.html tcnm ссылкb на внешние css (которые тоже ссылаются на внешние шрифты) и библиотеки js.

 

Теперь, как сделать из этого всего один файл html:

Редактировать удобно через Sublime, Notepad++ и т.п. 

1. Запускаем index.html, проверяем что всё работает как надо.
2. Вместо всех подключаемых js библиотек вставляем текст этих библиотек
   1. Создаём тэг <script type="text/javascript">...</script> ниже загрузки внешней библитеки
   2. Открываем ссылку загрузки внешней библиотеки в другой вкладке, копируем текст
   3. Вставляем текст внутрь созданного тэга script (как правило вставляется как одна строка и редактированию не мешает)
   4. Комментарим загрузку внешней библиотеки.
3. Теперь как подменить CSS со всеми подгружаемыми шрифтами. 
   1. Устанавливаем расширение SingleFile (https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle/related?hl=ru)
   2. Открываем index.html через любой веб-сервер (если открывать как файл, то ничего не получится)
   3. Через расширение SingleFile сохраняем страницу. Расширение при этом сильно ужимает css и шрифты, оставляя только то, что нужно. (При этом правда может удалить что-то не видное в данный момент, но нужное - типа иконок развёртывания на скрытых уровнях).
   4. Открываем полученный html файл, находим в нём кучу непонятного текста в тэгах <style>. Копируем вместе с открывающим и закрывающим тэгами <style>.
   5. Вставляем в наш index.html вместо <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.3/css/dx.light.css" />
4. Всё. Теперь наш index.html работает автономно, даже без интернета. При этом вся его функциональность сохраняется.