Как использовать отчеты FastReport в PHP приложении. Часть 3
Это заключительная часть статьи об использовании FastReport.Net совместно с PHP приложением.
В предыдущих статьях мы рассмотрели, как создать серверную часть на ASP.Net Core. Напомню, она позволяет получать отображение отчета, отображение дизайнера отчета с загруженным в него отчетом для редактирования, скачивать отчеты в заданном формате.
Теперь нам предстоит реализовать php приложение. Для этого, у вас должен быть установлен веб сервер, например, Apache и установлен на нем PHP.
Мы не будем рассматривать в рамках этой статьи принципы создания php приложений.
Давайте просто определимся со структурой страниц. Нам необходимо 3 шаблона веб страниц:
- Home - отображает веб отчет;
- Designer - отображает дизайнер отчетов;
- Downloads - кнопка на скачивание отчета.
Каждая страница будет иметь одинаковый заголовок с меню. Поэтому имеет смысл вынести его в отдельный файл - header.php. Давайте создадим его в папке htdocs в директории установленного Apache.
1 2 3 4 5 6 7 8 9 10 |
<div id="header"> <div class="menu" > <h1>FastReports</h1> <ul > <li><a href="index.php">Home</a></li> <li ><a href="designer.php">Designer</a></li> <li ><a href="downloads.php">Downloads</a></li> </ul> </div> </div> |
Также, на каждой странице будет располагаться выпадающий список с отчетами и кнопка действия. Этот модуль тоже выносим в отдельный файл - reportslist:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php $info = file_get_contents('https://localhost:44346/api/reports/'); $res = json_decode($info, true); ?> <div id="dropdown"> <select name="reports" id="reports" > <?php foreach ($res as $key => $value) { echo '<option value='.$key.'>'.$value['reportName'].'</option>'; } ?> <input type="button" name="submit" value="Get" onclick=get()'> </div> |
Здесь используется метод получения контента для загрузки списка отчетов в формате json. Ссылка указывает на локальный отладочный iis, на котором "поднята" наша серверная часть. Далее, с помощью php кода мы заполняем выпадающий список, используя полученные от сервера данные. Кнопка Get запускает функцию selected(), которая на каждой странице будет своя.
Все мы знаем, что обычно для главной страницы сайта используется файл index.php. Создадим его.
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 |
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>FastReports</title> <meta name="title" content="FastReports" /> <link rel="stylesheet" href="stylesite.css" type="text/css" media="screen, projection" /> </head> <body> <div id="main"> <?php include ("header.php"); ?> <?php include ("reportslist.php"); ?> <script type="text/javascript" language="javascript"> function get(){ var name = document.getElementById('reports').options[document.getElementById('reports').value].text document.getElementById('forFrame').innerHTML = '<iframe id="frame" src="https://localhost:44346/api/reports/ShowReport?name='+name+'" width="1000" height="1000" />'; }; </script> <div id="forFrame"></div> </div> </body> </html> |
Шаблон страницы включает в себя заголовок и тело. В заголовке, как водится, включает в себя тайтл, мета данные, ссылку на стили. В теле страницы мы включили файлы с заголовком и выпадающим списком. Помните, что кнопка Get в модуле reportslist.php вызывает функцию get().
Рассмотрим реализацию этой функции на javascript. Прежде всего нужно получить имя выбранного отчета, чтобы затем передать его в качестве параметра при вызове метода ShowReport на бекенде. Чтобы загрузить внешний объект (WebReport) мы воспользуемся тегом iframe. JavaScript снова помогает нам динамически вставить ifame внутрь тега div. В ссылке на источник мы использовали переменную - имя отчета.
Файл стилей тоже достаточно прост stylesite.css:
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 |
* { margin: 0; padding: 0; } #main{ background-color:#fff; width: 1000px; margin:0 auto; overflow:hidden; } #header { height:70px; background-color: #FFCC33; text-align: center; } #header li { list-style: none; display: inline; padding: 10px 20px 0px 10px; } #header li a { padding:3px; text-decoration: none; color: #000; } #header li a:hover { text-decoration: none; padding:3px; text-decoration: none; color: red; } #header H1 { font-family: Times, Tahoma, Arial,Verdana, sans-serif; } #dropdown { padding: 5px; } |
Давайте запустим наш веб сервер и посмотрим на страницу index:
Нам доступен выпадающий список и кнопка. Выберем отчет и нажмем кнопку:
В итоге мы получаем объект веб отчета. Причем кнопки на панели инструментов не потеряли функциональности - вы можете делать экспорт в желаемый формат и печатать.
Теперь реализуем страницу Dedigner.php. Создадим ее в том же каталоге где и index.php:
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 |
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>FastReports</title> <meta name="title" content="FastReports" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" href="stylesite.css" type="text/css" media="screen, projection" /> </head> <body> <div id="main"> <?php include ("header.php"); ?> <?php include ("reportslist.php"); ?> <script type="text/javascript" language="javascript"> function get(){ var name = document.getElementById('reports').options[document.getElementById('reports').value].text document.getElementById('forFrame').innerHTML = '<iframe id="frame" src="https://localhost:44346/api/reports/Design?name='+name+'" width="1000" height="1000" />'; }; </script> <div id="forFrame"></div> </div> </body> </html> |
Как видите, шаблон html страницы не отличается от index.php. Разница лишь в методе Get(). Мы получаем имя выбранного в выпадающем списке отчета. Затем, вставляем iframe с ссылкой на метод Design на бекенде. В параметре передаем имя отчета. В итоге мы увидим страницу, аналогичную index:
Но, если нажать на кнопку Get():
… получаем дизайнер с загруженным шаблоном отчета. Мы можем отредактировать его и сохранить:
О том, что отчет сохранен нам скажет всплывающее сообщение saved в зеленой рамке.
Осталось реализовать третью страницу - Downloads. Создадим файл downloads.php:
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 |
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>FastReports</title> <meta name="title" content="FastReports" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" href="stylesite.css" type="text/css" media="screen, projection" /> </head> <body> <div id="main"> <?php include("header.php"); ?> <?php include("reportslist.php"); ?> <p>Please select report format:</p> <div> <input type="radio" id="pdf" name="r" value="pdf"> <label for="pdf">pdf</label> <input type="radio" id="html" name="r" value="html"> <label for="html">html</label> </div> <script type="text/javascript" language="javascript"> function get(){ var number = document.getElementById('reports').value; number++ var type = ''; if (number > 0) { var inp = document.getElementsByName('r'); for (var i = 0; i < inp.length; i++) { if (inp[i].type == "radio" && inp[i].checked) { type = inp[i].value; } } var elem = document.createElement('a'); elem.setAttribute('href','https://localhost:44346/api/reports/'+number+'?format='+type); elem.setAttribute('download', 'download'); elem.click(); } } </script> </div> </body> </html> |
Шаблон страницы помимо выпадающего списка содержит две радио кнопки: pdf, html. Это два типа экспорта, которые мы реализовали на бекенде. Метод get() на этот раз значительно отличается. Вместо имени, мы получаем индекс выбранного в выпадающем списке отчета. В скрипте мы создаем тег "a" и задаем ссылку на бекенд, где с помощью WebApi получаем отчет по индексу в указанном формате. После формирования ссылки мы сразу же нажимаем на нее программным способом. Таким образом мы скачиваем файл. Вот как это работает:
Нажимаем Get. И получаем файл:
Вы могли бы отобразитесь отчет в объекте WebReport, как на первой странице, и потом сделать экспорт. Страница Downloads показывает альтернативный метода получения экспорта отчета - непосредственно от сервера.
На этом мы завершаем статью из 3х частей о работе с отчетами FastReport.Net из PHP приложения.
