logo
small logo
  • Продукты
  • Купить
  • Поддержка
  • Статьи
  • Клиентская панель Поддержка
  • Главная
  • /
  • Статьи
  • /
  • Как использовать WebReport в приложении Knockout.js
  • Как использовать объект WebReport в приложениях ASP .NET Core

    17 января 2018 г.

    Не так давно FastReport порадовал нас новой библиотекой - FastReport Core. Это специальная версия FastReport

    Подробнее
  • Как обновить веб отчет FastReport.Core

    21 сентября 2020 г.

    Иногда вам требуется обновлять отчет, например, если вы подаете на вход новое значение переменной, или

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

    21 июля 2021 г.

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

    Подробнее
  • Как делать автообновляемые веб - отчеты

    27 марта 2017 г.

    При наличии необходимости отражать текущее положение дел на предприятии с помощью веб - отчетов может

    Подробнее
  • Управление свойствами веб отчета внешними контролами

    16 августа 2017 г.

    В этой статье я хочу рассмотреть возможность работы с отчетом с помощью элементов управления веб

    Подробнее

Как использовать WebReport в приложении Knockout.js

29 июля 2019 г.

Библиотека Knockout.js применяется для создания веб приложений. Благодаря поддержке этой библиотеки в Microsoft Visual Studio, мы можем использовать TypeScript и бэкенд на основе ASP .NET Core MVC. Последнее означает, что мы сможем использовать отчеты FastReport .NET. Остается лишь вывести отчет в клиентском приложении. Чем мы и займемся в этой стате.

Для работы с knockout совместно с .NET Core у вас должен быть установлен .NET Core SDK 2.0 или MS Visual Studio. По умолчанию вам не доступен шаблон приложения с библиотекой knockout. Поэтому нужно установить ее при помощи одной лишь команды. В командной строке Windows вводим:

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

после этого можно создать spa приложение на основе knockout. В нужной папке открываем командную строку и вводим команду:

dotnet new knockout –o KnockWebReport

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

npm install

Теперь можно открыть созданный проект. Наша задача создать Web отчет FastReport. Поэтому устанавливаем пакеты FastReport. Для этого открываем менеджер пакетов и настраиваем локальный источник пакетов на папку Nuget в каталоге установки FastReport.Net. После этого нам доступен набор пакетов FastReport для установки. Устанавливаем FastReport.Core и FastReport.Web.

Добавляем папку App_Data в каталог wwwroot.  В него мы помести файл базы данных для отчетов:

 

Воспользуемся существующим контроллером 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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using FastReport.Web;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using System.IO;
 
namespace KnockWebReport.Controllers
{
 [Route("api/[controller]")]
 public class SampleDataController : Controller
 {
 private IHostingEnvironment _env;
 public SampleDataController(IHostingEnvironment env)
 {
 _env = env;
 }
 [HttpGet("[action]")]
 public IActionResult ShowReport(string name)
 {
 var webRoot = _env.WebRootPath;
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 WebReport.Report.Load(System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}", name)))); //Загружаем отчет в объект WebReport
 //WebReport.Report.Load(System.IO.Path.Combine(webRoot, "App_Data/Matrix.frx"));
 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"); //Регистрируем источник данных в отчете
 ViewBag.WebReport = WebReport; //передаем отчет во View
 
 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)));
 
 if (files[0].Length > 0)
 {
 using (var stream = new FileStream(filePath, FileMode.Create))
 {
 await files[0].CopyToAsync(stream);
 stream.Close();
 }
 }
 Task.WaitAll();
 return Content(Path.GetFileName(filePath));
 }
 }
}

Метод ShowReport загружает указанный шаблон отчета в объект WebReport и отображает его. А метод Upload получает файл от клиента, сохраняет его на сервере и возвращает имя сохраненного файла.

Для метода ShowReport создаем представление:

 

Со следующим кодом:

1
 @await ViewBag.WebReport.Render()

Теперь перейдем к клиентскому приложению. Оно расположено в папке ClientApp:

 

Воспользуемся домашней страницей для вывода отчета. Отредактируем код в файле home-page.html:

1
2
3
4
5
6
<div id="app">
 <input type="file" id="FileName" accept=".frx" data-bind="event: { change: upload($element.files[0]) }" />
</div>
<div data-bind="if: show">
 <iframe id="report" height="1000" width="1000" data-bind="attr: {src: url}"></iframe>
</div>

Мы выводим кнопку открывающее стандартное окно открытия файла. А также, в зависимости от значения логического параметра show, мы выводим фрейм с объектом веб отчета.

Теперь напишем скрипт для этого шаблона в файле 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
24
25
import * as ko from 'knockout';
 
class HomePageViewModel {
 public show = ko.observable(false);
 public url = 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.url("api/SampleData/ShowReport?name=" + data)
 });
 this.show(true);
 }
 }
}
 
export default { viewModel: HomePageViewModel, template: require('./home-page.html') };

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

Давайте запустим наше приложение и убедимся в этом.

Выбираем файл отчета в формате frx.

И получаем отчет на свою веб страницу.

Таким образом мы убедились, что вывести отчет FastReport .NET в веб приложении на основе knockout не составляет труда.

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

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

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

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