Visualizar PDF usando ajax y php

laureano59 · #1 (**permalink**) 12/04/2017, 08:40

Buen día Amigos.

Necesito visualizar un archivo pdf de la siguiente manera:

Tengo un archivo index.html y dentro de el tengo una tabla con varias filas y una columna pdf.
necesito que al dar click en cualquiera de las filas de la columna pdf se visualice el documento pdf perteneciente a la fila.
esta es la fila que llama a una función onclick="VerPdf({$es.numero_esc},{$es.ano_esc});

Ahí no hay problema, llama a la función y pasa los parametros.

Código HTML:

<td style="text-align: center;"><a href="#" onclick="VerPdf({$es.numero_esc},{$es.ano_esc});"><img src="styles/image/iconos/ojo.png" width="32" height="32"></a></td>

y esta es la funcion que contiene el AJAX el cual llama el php que debe cargar

java

barbel · #2 (**permalink**) 12/04/2017, 08:43

que utilizas AngularJS?, por cierto no has puesto la función Javascript

laureano59 · #3 (**permalink**) 12/04/2017, 08:50

Que raro no dejó poner la función javascript ni el php:

aqui las dejo:

Código HTML:

<script>

function creaObjetoAjax () { //Mayoría de navegadores
  var obj;
  if (window.XMLHttpRequest) {
    obj=new XMLHttpRequest();
    }else { //para IE 5 y IE 6
      obj=new ActiveXObject(Microsoft.XMLHTTP);
      }
      return obj;
}

function VerPdf(numero_esc, ano_esc){
  
  var form;
  form = 'numero_esc=' + numero_esc + '&ano_esc=' + ano_esc;
  objetoAjax=creaObjetoAjax();
  objetoAjax.open('POST','?view=abrirpdf',true);
  objetoAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  objetoAjax.setRequestHeader("Content-length", form.length);
  objetoAjax.setRequestHeader("Connection", "close");
  objetoAjax.onreadystatechange = recogeDatos;
  objetoAjax.send(form);
}

function recogeDatos(){
  if (objetoAjax.readyState==4 && objetoAjax.status==200){
    miTexto=objetoAjax.responseText;
    //console.log(miTexto);
  }
}

</script>

y este es el PHP:

Código PHP:

  if(isset($_SESSION['id'],$_SESSION['usuario'],$_SESSION['email'])){
  if(isset($_POST['numero_esc']) and isset($_POST['ano_esc'])){

    $ext = 'pdf';
    $pdf = $_POST['numero_esc'] . $_POST['ano_esc'];
    $ruta = 'uploads/escrituras/'.$pdf . '.' . $ext;
    //header('Content-type: application/pdf');
    //header('Content-Disposition: attachment; filename="'.$ruta.'"');
    //readfile($ruta);

    echo $ruta;
  }else{
    echo 2;
  }

}else{
    header('location: ?view=index');
}

La cuestión es la siguiente: el php recibe sin problema lo que manda el AJAX pero en el momento de abrir el PDF se queda pensando y en el ajax si muestro por consola lo que retorna el php es un codigo con un monton de signos y bloquea el navegador.

No se si me estoy complicando pero necesito abrir el pdf . Trabajo con MVC.

Gracias

Triby · #4 (**permalink**) 12/04/2017, 14:33

Todos esos símbolos son el contenido del PDF.

Ahora, en HTML no puedes mostrar directamente documentos y solo algunos navegadores incorporan visor de PDF, pero se tienen que abrir en otra ventana o pestaña.

X_fran · #5 (**permalink**) 13/04/2017, 10:54

Y por qué vía AJAX ?? devolver una respuesta con los headers adecuados ('Content-type: application/pdf') no hace que recargue tu página.

laureano59 · #6 (**permalink**) 13/04/2017, 11:40

Lo que pasa es que debo mandar unas variables a php que sería el nombre del archivo pdf, y no se de que otra manera hacerlo, de modo que pueda desde php abrir en una nueva pestaña el archivo PDF, recuerde que la pagina de donde mando las variables es html.

Aclaro algo del PHP : lo que está en comentarios no son comentarios lo que pasa es que sin querer lo pegue así.

X_fran · #7 (**permalink**) 13/04/2017, 11:46

Pues entonces en el href del vínculo pasa la url de donde proviene el PDF junto con las varibles que necesites del lado del servidor y obtenlas vía GET.

#8 (**permalink**) 13/04/2017, 12:23

Por parte del servidor obtener la ruta del archivo y muestras..

Código HTML:

Ver original<html>
    <head>
        <script type="text/javascript">
        function seePdf(){
        //todo tu ajax aca...
        document.getElementById("pdf").setAttribute("src", respuestaAjax);
        }
        </script>
    </head>
    <body>
        <embed src="RESPUESTA RUTA ACA" id="pdf" width="ancho" height="alto" />
    </body>
</html>

Por php:

Código PHP:

Ver original<?php
 
$ruta = "tu/ruta"; // ruta completa sin / final
 
$pdf = $_POST["recurso"];
//o get no se cual usas...
$pdf = $_GET["recurso"];
 
/*
 
aca toda progra...
 
*/
 
echo "$ruta/$retornoDeTuProgra";
 
?>

Yo probé esto:

Código HTML:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>AJAX</title>
        
        <script type="text/javascript">
        
        
        function createREQ() {
                try {
                req = new XMLHttpRequest(); /* p.e. Firefox */
                }
                catch(err1){
                    try {
                    req = new ActiveXObject('Msxml2.XMLHTTP'); /* algunas versiones IE */
                    }
                    catch (err2) {
                        try {
                        req = new ActiveXObject("Microsoft.XMLHTTP"); /* algunas versiones IE */
                        }
                        catch (err3) {
                        req = false;
                        }
                    }
                }
        return req;
        }
        
        
        function mostrarpdf(){
        var pdf = document.getElementById("pdf");
            if(pdf.value == "0"){ alert("elija!!"); return false; }
        var http = new createREQ();
        http.open("POST", "seePdf.php", true);
        http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        var archivo = document.getElementById("pdf").value;
        http.send("archivo="+archivo);  
        
        http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200){
                var response = http.responseText;
                document.getElementById("emb").setAttribute("src", response);
                }
            };
        }
        </script>
    
    </head>
    <body>
        <select id="pdf" onchange="mostrarpdf();">
            <option value="0">Elejir</option>
            <option value="cotizacion.pdf">Pdf cotizacion</option>
            <option value="tarea.pdf">Pdf tarea</option>
            <option value="certificado.pdf">Pdf certificado</option>
        </select>
        <br/><br/><br/>
        <embed src="" width="500" height="500" id="emb"/>
    </body>
</html>

PHP:

Código PHP:

Ver original<?php
 
$ruta = "archivos/pdf"; //ruta sin / final
 
$archivo = $_POST["archivo"];
 
echo "$ruta/$archivo";
 
?>

y tengo un escritorio con los pdf...

usa eso como ejemplo, no se si es lo mejor, este es mi template de ajax