Salidas Gráficas SIGPAC

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Test-WcMsg</title>
    <link rel="shortcut icon" href="#" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Test page for WcMsg component">
    <meta name="keywords" content="WcMsg, Test, SIGPAC, Component">

<style>

body{
            font-family: Helvetica;
            font-size: small;
            background-color: lightgrey;
            margin: 0;
            padding: 0;
        }

.centrar {
            display: flex;
			justify-content: center;
			font-size: 0.9rem;
            margin-top: 10px;
        }

.izquierda {
            top: 6%;
            left: 1px; 
            bottom: 1px; 
            width: 30%; 
            position: absolute;
            background: #3CB371;
            padding: 10px 0px 0px 10px;
            vertical-align: middle;
            overflow: auto;
        }

.derecha {
            border: 1px solid #aaa; 
            bottom: 1px; 
            top: 6%; 
            left: 31%; 
            right: 1px; 
            position: absolute; 
            background: white;
        }

input {
			text-align: center;
			background-color: #E0E0E0;
			color: #282828;
			text-decoration: none;
			border: none;
			padding: 10px 10px;
			min-width: 25%;
			margin-bottom: 10px;
			font-weight: bold;
            border-radius: 8px;
            width: 84%;
            display: inline-block;
            margin-left:7px;
		}

.button {
			background-color: grey;
			border: none;
			color: white;
			padding: 10px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 12px;
			margin: 5px 5px;
			cursor: pointer;
			width: 85%;
            border-radius: 8px;
            border: solid rgb(202, 202, 202) 2px;
		}

.listado-parametros{
            list-style:none;
            padding-left:0;
            font-size:14px;
            margin-left:10px;
            margin-bottom:40px;
        }

.listado-parametros li{
         padding:5px;
        }

</style> 
<script type="text/javascript" defer="defer" src="https://sigpac-hubcloud.es/salidasgraficassigpac/wc-msg.js"></script>

</head>

<body>
    <div class="centrar">
    Componente Salidas Gráficas SIGPAC
    <div id="my-app" class="izquierda">

<ul class="listado-parametros" ;">
        <p><strong style="font-size:16px; class="centrar">Parámetros de entrada:</strong></p>
        <li><label><strong >Provincia:</strong></label> <code>12</code></li>
        <li><label><strong >Municipio:</strong></label> <code>26</code></li>
        <li><label><strong >Agrupación:</strong></label> <code>0</code></li>
        <li><label><strong >Zona:</strong></label> <code>0</code></li>
        <li><label><strong >Polígono:</strong></label> <code>5</code></li>
        <li><label><strong >Parcela:</strong></label> <code>156</code></li>
        <li><label><strong >Recinto:</strong></label> <code>1</code></li>
    </ul>
 
    <input id="refRecinto" value="12:26:0:0:5:156:1" />
    <button title="Abre PDF Salida gráfica en nueva ventana" class="button" onclick="generaPDFTab()">ABRE PDF</button>
    <button title="Incrusta PDF Salida gráfica en componente" class="button" onclick="generaPDFFrame()">INCRUSTA PDF</button>
    <button title="Descarga archivo PDF Salida gráfica" class="button" onclick="generaPDFFile()">DESCARGA PDF</button>
    <button title="Manejando el Evento 'wc-msg-generaPdf'" class="button" onclick="lanzaEventoPDF()">EVENTO</button>

</div>

//Generar PDF del recinto correspondiente en un frame de la aplicación anfitriona.
    function generaPDFFrame() {
        if (window && $msg) {
            let refRecinto = document.getElementById("refRecinto").value;     
            window.$msg.generaPDFFrame(refRecinto);
        }
    }

//Descargar la salida gráfica del recinto correspondiente como un archivo PDF.
    function generaPDFFile() {
        if (window && $msg) {
            let refRecinto = document.getElementById("refRecinto").value;     
            window.$msg.generaPDFFile(refRecinto);
        }
    }

//Generar PDF del recinto correspondiente en una nueva ventana del navegador mediante evento.
    function  lanzaEventoPDF() {
        let refRecinto = document.getElementById("refRecinto").value;  
        const event = new CustomEvent("wc-msg-generaPdf", { detail:refRecinto });
        dispatchEvent(event);
    }

</script>
</html>

Salidas Gráficas SIGPAC - Recinto