none
Abrir PDFs en un visor dependiendo de boton RRS feed

  • Pregunta

  • Hola, estoy desarrollando un portal web donde realizo una consulta a una base de datos y muestro un array con información de archivos PDF, adicional mente le agrego a cada linea un botón donde quiero que abra dicho PDF en un visor que he creado en el margen derecho.

    Me podrían ayudar con el código que debo insertar en el botón? tengo el siguiente código pero no se como hacer que el PDF se abra en dicho visor

    Codigo del visor:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css"> 
    #portapdf { 
    	;
    	top: 200px;
    	right: 0;
        width: 500px; 
        height: 500px; 
        border: 1px solid #484848; 
        margin: 0 auto; 
    } 
    </style> 
    </head>
    <body>
    <div id="outer">
    <div id="content">
    	<div id="portapdf"> 
    		<object data="PdfInicial.pdf" type="application/pdf" width="100%" height="100%"/>
    	</div> 
    	<div class="clear"></div>
      </div>
    </div>
    </body>
    </html>

    El botón esta dentro de una tabla pero básicamente tengo esto nada mas:

    			<td>
    				<div class="container-pdfbuttom">
    					<button class="pdfbuttom">
    						
    					</button>
    				</div>
    			</td>

    Se puede realizar desde HTML? o es mejor realizarlo con javascript?

    Muchas gracias,

    Saludos.

    miércoles, 23 de mayo de 2018 20:45

Todas las respuestas

  • Yo agregaría un atributo al botón que indica el URL del PDF que corresponde a dicho botón.  No nos dice cómo genera el HTML, pero imagino que con un bucle de algún tipo en algún lenguaje de programación.  Cuando ese bucle genere el botón, genere el atributo data-url e iguálelo al URL del PDF que le corresponde.

    Luego con jQuery puede agregar el evento click que lee dicho URL y lo asigna al elemento object.

    Yo le podría ID al elemento object, pero bueno, voy a respetar su HTML:

    $(function() {
        var objeto = $('#portapdf > object');
        $('.pdfbuttom').click(function(ev) {
            ev.preventDefault();
            var boton = $(this);
            objeto.attr('data', boton.data('url'));
        });
    });


    Jose R. MCP
    My GIT Repositories | Mis Repositorios GIT

    jueves, 24 de mayo de 2018 8:11
    Moderador
  • Yo agregaría un atributo al botón que indica el URL del PDF que corresponde a dicho botón.  No nos dice cómo genera el HTML, pero imagino que con un bucle de algún tipo en algún lenguaje de programación.  Cuando ese bucle genere el botón, genere el atributo data-url e iguálelo al URL del PDF que le corresponde.

    Luego con jQuery puede agregar el evento click que lee dicho URL y lo asigna al elemento object.

    Yo le podría ID al elemento object, pero bueno, voy a respetar su HTML:

    $(function() {
        var objeto = $('#portapdf > object');
        $('.pdfbuttom').click(function(ev) {
            ev.preventDefault();
            var boton = $(this);
            objeto.attr('data', boton.data('url'));
        });
    });


    Jose R. MCP
    My GIT Repositories | Mis Repositorios GIT

    Hola, Si me falto agregar eso...

    Lo hago con PHP, genero una consulta a una base de datos y con eso creo una tabla con un botón para cada linea que tiene el atributo data URL del PDF.

    Lo que me falta es que al presionar los botones se envié la url al Object y abra el archivo.

    Voy a probar lo que me decis, gracias


    jueves, 24 de mayo de 2018 14:42