logo
small logo
  • Продукты
  • Купить
  • Поддержка
  • Статьи
  • Клиентская панель Поддержка
  • Главная
  • /
  • Статьи
  • /
  • Как использовать Online Designer в приложении на основе библиотеки knockout.js
  • Отчёт из PostgreSQL в приложении .NET 5 под управлением Astra Linux

    4 декабря 2020 г.

    Сегодня мы поговорим о российской операционной системе Astra Linux. Эта система получила в последнее время

    Подробнее
  • Как использовать Online Designer в ASP .NET Core

    17 января 2018 г.

    Одной из новинок FastReport .NET 2018 стала адаптация OnlineDesigner под фреймворк .NET Core. В целом, онлайн

    Подробнее
  • Как использовать FastCube .NET в SPA приложении Knockout.js

    21 июля 2021 г.

    Для того чтобы вывести куб данных мы создадим SPA приложение с использованием Knockout.js (библиотека для

    Подробнее
  • Как загрузить отчет в Online Designer и скачать отредактированный отчет

    29 июля 2017 г.

    Один из первых вопросов, который встает перед пользователями Online Designer – как организовать загрузку отчетов

    Подробнее
  • Как обрабатывать ошибки при вызове WebReport

    29 июля 2017 г.

    Online Designer отличный инструмент для создания отчетов в сети Интернет. Вы создаете шаблон отчета, сохраняете

    Подробнее

Как использовать Online Designer в приложении на основе библиотеки knockout.js

30 июня 2019 г.

Библиотека knockout.js была достаточно популярна среди веб разработчиков до появления angular. Несмотря на явные преимущества последнего, knockout все еще остается востребованным. На нем написано множество веб приложений. Некоторые из них нуждаются в отчетности. Поэтому мы рассмотрим в этой статье, как внедрить онлайн дизайнер отчетов FastReport в приложение, с клиентской частью на knockout, а серверной на ASP.Net Core.

Прежде всего нам потребуется шаблон приложения Knockout для dotnet платформы. У вас должен быть установлен NET Core 2.0 SDK или MS Visual Studio 2017. Откроем командную строку Windows. Перейдем в каталог, где планируется создать приложение. Вводим команду:

dotnet new — install Microsoft.AspNetCore.SpaTemplates::*

В результате мы должны увидеть список доступных шаблонов одностраничных приложений:

В этом списке мы видим knockout – значит можно создать приложение по шаблону. Вводим команду:

dotnet new knockout –o KnockOnlineDesigner

Эта команда создает демонстрационное приложение с готовой структурой. После создания приложения нужно установить нужные пакеты. Поэтому переходим в папку с созданным приложением:

cd KnockOnlineDesigner

И устанавливаем пакеты:

npm install

Открываем созданный проект. Сейчас вы можете запустить приложение и увидеть три демонстрационные страницы. Но наша задача создать свою страницу с онлайн дизайнером. Прежде всего нужно установить пакеты FastReport .NET в диспетчере пакетов Nuget. Открываем менеджер и настраиваем локальный источник пакетов – папка Nuget в каталоге установки FastReport .NET.

Пакеты FastReport.Core и FastReport.Web установлены, теперь нужно включить использование FastReport в приложении. Редактируем файл Startup.cs. Добавляем в метод Configure строку:

  app.UseFastReport();

В папку wwwroot добавим папку App_Data, а в нее базу данных xml для отчетов:

 

Переходим к редактированию контроллера SampleDataController. Удаляем из него все методы и добавляем свои:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 [Route("api/[controller]")]
 public class SampleDataController : Controller
 {
 
 private IHostingEnvironment _env;
 
 public SampleDataController(IHostingEnvironment env)
 {
 _env = env;
 }
 
 // public string ReportPath;
 
 [HttpGet("[action]")]
 public IActionResult Design(string ReportName)
 {
 var webRoot = _env.WebRootPath;
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 Task.WaitAll();
 var path = System.IO.Path.Combine(webRoot, "App_Data/", ReportName);
 if (System.IO.File.Exists(path))
 {
 WebReport.Report.Load(System.IO.Path.Combine(webRoot, "App_Data/", ReportName)); //Загружаем отчет в объект WebReport
 }
 System.Data.DataSet dataSet = new System.Data.DataSet(); //Создаем источник данных
 dataSet.ReadXml(System.IO.Path.Combine(webRoot, "App_Data/nwind.xml")); //Открываем базу данных xml
 WebReport.Report.RegisterData(dataSet, "NorthWind"); //Регистрируем источник данных в отчете
 
 WebReport.Mode = WebReportMode.Designer; //Устанавливаем режим объекта веб отчет - отображение дизайнера
 WebReport.DesignerLocale = "en";
 WebReport.DesignerPath = @"WebReportDesigner/index.html"; //Задаем URL онлайн дизайнера
 WebReport.DesignerSaveCallBack = @"api/SampleData/SaveDesignedReport"; //Задаем URL представления для метода сохранения отчета
 WebReport.Debug = true;
 ViewBag.WebReport = WebReport; //передаем отчет во View
 return View();
 }
 
 [HttpPost("[action]")]
 // call-back for save the designed report 
 public IActionResult SaveDesignedReport(string reportID, string reportUUID)
 {
 var webRoot = _env.WebRootPath;
 ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID); //Задаем сообщение для представления
 
 Stream reportForSave = Request.Body; //Записываем в поток результат Post запроса
 string pathToSave = System.IO.Path.Combine(webRoot, @"App_Data/TestReport.frx"); //получаем путь для сохранения файла
 using (FileStream file = new FileStream(pathToSave, FileMode.Create)) //Создаем файловый поток
 {
 reportForSave.CopyTo(file); //Сохраняем результат запроса в файл
 }
 return View();
 }
 
 [HttpPost("[action]")]
 public async Task<IActionResult> Upload(List<IFormFile> files)
 {
 long size = files.Sum(f => f.Length);
 var webRoot = _env.WebRootPath;
 var filePath = System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}", files[0].FileName)));
 // full path to file in temp location
 
 if (files[0].Length > 0)
 {
 using (var stream = new FileStream(filePath, FileMode.Create))
 {
 await files[0].CopyToAsync(stream);
 stream.Close();
 }
 }
 return RedirectToAction("Design", "SampleData", new { ReportName = Path.GetFileName(filePath)});
 }
 
 }

Метод Design создает объект веб отчета и загружает в него шаблон отчета. Затем, этот веб отчет переключается в режим разработки, а по сути передается в онлайн дизайнер.

Метод SaveDesidnedReport нужен для сохранения отредактированного отчета на сервере.

Метод Upload служит для загрузки файла отчета на сервер.

Для методов Design и SaveDesignedReport нужно создать представления. Делаем правый клик по сигнатуре метода и выбираем Add view. Для представления Design.cshtml изменяем код на:

@await ViewBag.WebReport.Render()

А для SaveDesignedReport.cshtml - на:

@ViewBag.Message

В папке ClientApp располагается приложение на knockout.js. Давайте будем выводить наш дизайнер отчетов прямо на домашней странице. Разворачиваем папку ClientApp->components->home-page. Редактируем файл home-page.html:

1
2
3
4
<div id="app">
 <input type="file" id="FileName" accept=".frx" data-bind="event: { change: upload($element.files[0]) }" />
</div>
<div data-bind="html: designer"></div>

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

Теперь изменим файл скрипта home-page.ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import * as ko from 'knockout';
 
class HomePageViewModel {
 public designer = ko.observable('');
 
 upload(file: Blob) {
 var files = new FormData();
 files.append("files", file)
console.log(files);
 if (file != null) {
 fetch('api/SampleData/Upload', {
 method: 'POST',
 body: files
 })
 .then(response => response.text())
 .then(data => {
 this.designer(data);
 });
 }
 }
}
 
export default { viewModel: HomePageViewModel, template: require('./home-page.html') };

Метод Upload получает файл и передает его на сервер. В свою очередь контроллер на сервере загружает файл отчета в онлайн дизайнер и возвращает его клиенту. В методе Upload мы записываем ответ сервера в переменную designer.

Осталось исправить меню сайта nav-menu.html. Уберем из него ненужные страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class='main-nav'>
 <div class='navbar navbar-inverse'>
 <div class='navbar-header'>
 <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
 <span class='sr-only'>Toggle navigation</span>
 </button>
 <a class='navbar-brand' href='/'>KnockOnlineDesigner</a>
 </div>
 <div class='clearfix'></div>
 <div class='navbar-collapse collapse'>
 <ul class='nav navbar-nav'>
 <li>
 <a data-bind='attr: { href: router.link("/") }, css: { active: route().page === "home-page" }'>
 <span class='glyphicon glyphicon-home'></span> Home
 </a>
 </li>
 </ul>
 </div>
 </div>
</div>

А также отредактируем файл app-root.ts и исключим из него ненужные компоненты:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class AppRootViewModel {
public route: KnockoutObservable<Route>;
public router: Router;
 
constructor(params: { history: History.History, basename: string }) {
this.router = new Router(params.history, routes, params.basename);
this.route = this.router.currentRoute;
ko.components.register('nav-menu', navMenu);
ko.components.register('home-page', require('bundle-loader?lazy!../home-page/home-page'));
}
 
public dispose() {
this.router.dispose(); Object.getOwnPropertyNames((<any>ko).components._allRegisteredComponents).forEach(componentName => {
ko.components.unregister(componentName);
});
}
}
 
export default { viewModel: AppRootViewModel, template: require('./app-root.html') };

Запустим наше демонстрационное приложение. Выберем файл отчета в формате frx. Файл загрузится на сервер и передастся в дизайнер отчета:

Таким образом вы можете редактировать шаблоны отчетов из вашего knockout приложения.

О продукте Скачать Купить
avatar
Dmitriy Fedyashov
Технический писатель
Fast Reports Team: Dmitriy Fedyashov - Technical Writer at Fast Reports
.NET FastReport MVC Online Designer Core Knockout

Добавить комментарий
logo
  • +7(800)551-75-80
  • info@fastreport.ru
  • Ростов-на-Дону, Россия, 344082, ул.Обороны 24, офис 311
  • Купить
  • Загрузить
  • Документация
  • Отзывы
  • Как деинсталировать
  • Онлайн поддержка
  • FAQ
  • Видео уроки
  • Форум
  • Статьи
  • Наши Новости
  • Пресса о нас
  • Реселлеры
  • Нестандартное лицензирование
  • ВУЗам
  • Карьера
  • Контакты

© 1998-2022 ООО «Фаст Репортс»

  • Согласие с обработкой персональных данных
  • Не является публичной офертой