Cómo utilizar informes FastReports en una aplicación PHP. Parte 3

Es la última parte del artículo que trata de cómo utillizar FastReport.Net con una aplicación PHP.

En el artículo anterior echamos un vistazo a cómo crear parte del servidor en ASP.Net Core. Permítame recordarles que esto le da posibilidad de mostrar informe, mostrar diseñador de informe con los informes cargados en este para editar, descargar informes en un formato establecido.

Ahora tenemos que implementar una aplicación PHP. Para hacerlo, debe tener un servidor web instalado, por ejemplo, Apache, así como PHP instalado en este.

No vamos a considerar los principios de la creación de las aplicaciones PHP como parte de este artículo.

Simplemente vamos a decidir que estructura tendrán las páginas. Necesitamos tres modelos de página web:

• Home muestra un informe web;

• Designer muestra el diseñador de informe;

• Downloads es un botón para descargar el informe.

Cada página tendrá el mismo título con el mismo menú. De esta manera, tiene sentido colocarlo en un archivo separado, header.php. Vamos a crearlo en la carpeta htdocs en el directorio de Apache preinstalado.

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>
 
Además, en cada página habrá una lista desplegable con los informes y botón de acción. Este módulo también lo movemos a un archivo separado, 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>

Aquí se utiliza el método de recibir contenido para cargar la lista de informes en .json. El hipervínculo apunta a al archivo de depuración local en el que se basa nuestro parte del servidor. A continuación, utilizando código PHP, completamos la lista desplegable con los datos recibidos del servidor.El botón Get arranca la función seleccionada () que será única en cada página.

Todos sabemos que el archivo index.php normalmente se utiliza para la página principal de un sitio web. Vamos a crearlo.

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>

El modelo de página incluye cabecera y cuerpo. El título, como siempre, incluye un título, datos metadatos, un hipervínculo a los estilos. En el cuerpo de la página incluimos archivos con una cabecera y una lista desplegable. Recuerde que el botón Get en el módulo reportslist.php invoca la función Get ().

Vamos a examinar la implementación de esta función en javascript. En primer lugar, tiene que obtener el nombre del informe seleccionado, luego paralo como parámetro a la hora de invocar el método ShowReport en el motor. Para cargar un objeto eternal(WebReport) vamos a utilizar la pestaña iframe. De nuevo, JavaScript nos ayuda insertar dinámicamente ifame en la pestaña <div>. En el hipervínculo a la fuente utilizabamos una variable que es el nombre del informe.

El archivo de estilos stylesite.css también es bastante simple:

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;
}

Vamos a arrancar nuestro servidor web y echar un vistazo a la página index:

Tenemos una lista desplegable y un botón. Seleccione el informe y haga clic en el botón:

Resulta que obtenemos un objeto de informe web. Además, el botón en la barra de herramientas no ha perdido su funcionalidad: puede exportar en un formato que quiera y imprimir.

Ahora implementamos la página Dedigner.php. Créela en el mismo directorio con 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>

Como puede ver, el modelo de página HTML no se diferencia a index.php. La única diferencia está en el métodoGet (). Obtenemos el nombre del informe seleccionado en la lista desplegable. A continuación, inserte iframe con una referencia al método Design en el motor. En el parámetro pasamos el nombre del del informe. Como resultado, veremos una página similar a index:

Pero, si hacemos clic en el botón Get ():

... obtenemos un diseñador con un modelo de informe cargado. Podemos editar y guardarlo:

El método guardado en el marco verde nos dice que el informe se ha guardado. Ahora solo queda implementar la tercera página, Downloads. Cree un archivo downloads.php:
Nos queda implementar la tercera página Downloads. Cree el archivo 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>

El modelo de informe, aparte de la lista desplegable, contiene dos botones de radio: pdf y html. Son los dos métodos de exportación que hemos implementado en el motor. El método Get () esta vez es bastante diferente. En lugar del nombre, obtenemos el index del informe seleccionado en la lista desplegable. En el script creamos la pestaña <a> y establecemos el hipervínculo al motor donde, utilizando WebApi obtenemos el informe en el index en el formato especificado. Después de formarse el hipervínculo, inmediatamente hacemos clic en este programáticamente. De esta manera descargamos el archivo. Así funciona:


Haga clic en el botón Get. Obtenemos el archivo:

 

Podría mostrar el informe en el objeto WebReport, como en la primera página, y luego realizar la exportación. La página downloads muestra un método alternativo de obtener la exportación de un informe, es decir, directamente desde el servidor.

Con esto terminamos la tercera parte del artículo que nos ayuda trabajar con informes FastReport.Net  desde una aplicación PHP.

Part 1.

Part 2.

about product comprar
FastReport ASP.NET Core PHP
Add comment
Trustpilot