1

me encuentro con esta duda, estoy haciendo 60 firmas de correo, y a la hora de entregarlas por obvia comodidad use angularjs con su evento repetir, por lo cual la listas de personas las volvi un json, en un solo archivo donde solo se tendra que copiar, pero ahora me piden que cada firma este en un archivo o sea serian 60 html, hay una forma de automatizar el proceso ?

Tenia pensado hacerlo desde angular 6 pero quedo en el mismo problema.

   <table ng-repeat="persona in listado" width="700px" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;margin: auto; margin-bottom: 2rem">
    <tr>
        <td>

            <table class="content" align="center" style="table-layout:fixed;" cellpadding="0" cellspacing="0"
                border="0">
                <tr>
                    <td height="133px" width="125px" class="logo" rowspan="2" align="center">
                        <img style="height:133px; width: 125px; " src="http://img110.xooimage.com/files/f/4/9/logo-stoller-02-557d057.jpg">
                    </td>

                    <td rowspan="1" colspan="2" width="50%" class="contact" valign="center">
                        <div class="name">{{persona.nombre}}</div>
                        <div>{{ persona.cargo }}</div>
                    </td>

                    <td class="branding" rowspan="2" valign="center">
                        <div align="left" style="padding-top: 5px;font-size: 11px;">SOMOS LA <b>ÚNICA</b> EMPRESA
                            DEL
                            AGRO PREMIADOS POR:</div><br>
                        <img style="height:67px; width: 200px; " src="http://img110.xooimage.com/files/7/b/0/logo-great-place-to-work-03-557d049.jpg" />
                    </td>
                </tr>
                <tr>
                    <td class="dates contact" ng-class="offpadding" valign="center" rowspan="1">
                        <div><span style="color:#3da035;">M:</span><a href="mailto:{{mail}}" style="text-decoration: none; color: #fff;">{{
                            persona.correo }}</a><br></div>
                        <div ng-style="estilos" class="secondlabel">
                            <span style="color:#3da035;">M:</span><a href="mailto:{{m}}" style="text-decoration: none; color: #fff;">{{
                                mailextra }}</a>
                        </div>
                        <div><span style="color:#3da035;">C:</span><span style="color: #fff;"> +{{ persona.telefono }}</span></div>
                    </td>
                    <td class="contact social" style="font-size:9px;color:#fff" valign="center" align="right">
                        <span style="padding-top:10px"><a style="text-decoration: none; color: #fff;" href="https://www.stoller.com.ar">www.stoller.com.ar</a></span><br>
                        <table style="padding-top:3px">
                            <tr>
                                <td style="padding-right:5px;">
                                    <a href="https://www.linkedin.com/company/stoller-argentina/"><img src="http://img110.xooimage.com/files/9/0/7/g1005-5576e1f.png"></a>
                                </td>
                                <td style="padding-right:5px;">
                                    <a href="https://www.facebook.com/StollerArgentina/">
                                        <img src="http://img110.xooimage.com/files/c/2/9/g1013-5576e20.png"></a>
                                </td>
                                <td>
                                    <a href="https://www.instagram.com/stollerargentina/"><img src="http://img110.xooimage.com/files/6/0/6/g1021-5576e25.png"></a>
                                </td>
                            </tr>
                        </table>
                    </td>

                </tr>
            </table>

        </td>
    </tr>
</table>

<script>
    var generador = angular.module('correos', [])

    generador.controller('correos-lista', ['$scope', function ($scope) {

        $scope.listado = [

            {
                "nombre": "Ing. Agr. Gustavo Spicchiali",
                "cargo": "Asesor Técnico Comercial",
                "correo": "[email protected]",
                "telefono": 5492995950407
            },
            {
                "nombre": "Ing. Agr. Matías Emanuel Picca",
                "cargo": "Asesor Técnico Comercial - Stoller Uruguay",
                "correo": "[email protected]",
                "telefono": 5980975423567
            },
            {
                "nombre": "Ing. Agr. Lucila Ladrón de Guevara",
                "cargo": "Asesora Técnica Comercial",
                "correo": "[email protected]",
                "telefono": 5490351157052698
             }
        ]



    }])
</script>

El json es mas largo solo que lo recorte.

4
  • No se entiende mucho lo de 60 HTML... podrías incluir el código con el que trabajaste? Commented el 14 dic. 2018 a las 16:36
  • El codigo es muy largo amigo, la cosa es que genera 60 placas de firma html en un solo archivo, entonces cada placa tiene que quedar en archivos diferentes, pero yo no hice 60 placas, yo hice mi componente de firma, use un json con los datos, y listo se repite 60 veces en un archivo. Ellos quieren que cada placa quede en archivos diferentes que en total serian 60 archivos.
    – Agustin
    Commented el 14 dic. 2018 a las 16:41
  • No es muy claro lo que quieres. Comenzando ¿Por que te van a pedir hacer 60 archivos html que contiene la misma estructura y solo cambia la info del JSON?, lo que te piden no es nada eficiente. Si nos puedes colocar mas en contexto del por qué, podríamos ayudarte. La pregunta es muy básica y no tiene mucho detalle. Commented el 14 dic. 2018 a las 19:06
  • 1
    Quizá deberías usar Protractor. En el léeme de la versión 5.0 aparece un ejemplo de cómo obtener el código HTML generado por Angular en github.com/angular/protractor/blob/master/CHANGELOG.md#500 sería let o = browser.executeScript("return arguments[0].outerHTML;", element(locator)); donde locator sería un método de localización del <body> o <html>. Por ejemplo By.tagName('body').
    – franmost
    Commented el 31 mar. 2020 a las 21:06

1 respuesta 1

0

He hecho una script para descargar todas las tablas basándome en este ejemplo:

https://es.stackoverflow.com/a/229000/41813

Por cada tabla genera la descarga de un archivo con el nombre formado por su id y la extensión .html.

function descargar(blob, nombre) {
  var a = document.createElement('a');
  /* Vamos a cargar los datos (siendo o no blob) en una matriz 
    y forzamos la creación de un nuevo blob */
  var url = window.URL.createObjectURL(
    new Blob([ blob ], { type: 'text/html' })
  );
  a.href = url;
  a.download = nombre + '.html';
  a.click();
  window.URL.revokeObjectURL(url);
}
tablas = document.querySelectorAll('table');
i = 0;
function guardar() {
    if (i < tablas.length) {
        descargar(tablas[i].outerHTML, tablas[i].id);
        i++;
    }
}
<button onclick="guardar()">Descargar siguiente archivo HTML</button>    <table id="negro" style="border: 1px solid black; color: black;"><tr><th>Tabla 1</th></tr><tr><td>Dato 1</td></tr></table>
<table id="rojo" style="border: 1px solid red; color: red;"><tr><th>Tabla 2</th></tr><tr><td>Dato 2</td></tr></table>
<table id="naranja" style="border: 1px solid orange; color: orange;"><tr><th>Tabla 3</th></tr><tr><td>Dato 3</td></tr></table>
<table id="azul" style="border: 1px solid blue; color: blue;"><tr><th>Tabla 4</th></tr><tr><td>Dato 4</td></tr></table>

PD: debido a que el explorador saca una advertencia de muchas descargas hay que hacerla una a una pulsando varias veces el botón.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.