2

Hola estoy intentando exportar ciertos elementos HTML a word para generar un reporte y que el usuario se descargue el documento. Después de investigar un poco y de ver la misma pregunta en el foro Ingles he dado con esta respuesta:

just keep following code in top of the page need to convert:

<? header("Content-Type: application/vnd.ms-word");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("content-disposition: attachment;filename=Report.doc");
?>

No entiendo muy bien donde tengo que colocar este código y como hago para que se descargue la pagina cuando se hace click en un botón.

Aún así añado que no tendría ningún problema en usar alguna librería de JavaScript y hacerlo con ella.

Edicion

Otra de la soluciones que he podido encontrar es este jsfiddle pero cuando lo uso en mi codigo en vez de exportarme el contenido me exporta todo el html como tal.

Yo tengo la siguiente tabla:

        <table id="test" class="table table-striped table-custom table-responsive">
            <thead id="tablahead">
                <tr>
                    <th class="col-xs-1 col-sm-2 col-md-2" id="TRPANUM"><?php echo $lang["ORDEN"]?></th>
                    <th class="col-xs-4 col-sm-3 col-md-4" id="PARCOD"><?php echo $lang["CODIGO"]?></th>
                    <th class="col-xs-4 col-sm-3 col-md-4" id="PARDESE"><?php echo $lang["PARADA_CAS"]?></th>
                    <th class="col-xs-4 col-sm-3 col-md-4" id="CLLDESE"><?php echo $lang["CALLE_EUS"]?></th>
                    <th class="col-xs-4 col-sm-3 col-md-4" id="TRPANPAS"><?php echo $lang["NUMERO_PASAJEROS"]?></th>                    
                </tr>
            </thead>
            <tbody id="tablabody">                
                <tr>
                    <td><?php echo $key["TRPANUM"]; ?></td>
                    <td><?php echo $key["PARCOD"]; ?></td>
                    <td><?php echo $key["PARDESE"]; ?></td>
                    <td><?php echo $key["CLLDESE"].", ".$key["PARCLLN"]; ?></td>
                    <td><?php echo $key["TRPANPAS"]; ?></td>                        
                </tr>
                <?php 
                    }else{                        
                ?>
                <tr>
                    <td><?php echo $key["TRPANUM"]; ?></td>
                    <td><?php echo $key["PARCOD"]; ?></td>
                    <td><?php echo $key["PARDESE"]; ?></td>
                    <td><?php echo $key["CLLDESE"].", ".$key["PARCLLN"]; ?></td>
                    <td><?php echo $key["TRPANPAS"]; ?></td>                        
                </tr>
                <?php
                    }
                }?>
<?php 
    $aux = NULL;
    $valor = NULL;
    foreach ($resultado as $key) {
        $valor = $key["TRECCOD"];
        if ($valor != $aux){
            $aux = $valor;
            ?>                
            </tbody>
        </table>

El php que hay simplemente es un foreach, que comienza asi:

$aux = NULL;
    $valor = NULL;
    foreach ($resultado as $key) {
        $valor = $key["TRECCOD"];
        if ($valor != $aux){
            $aux = $valor;
            ?>

Y para exportar lo hago pulsando un bóton que llama al siguiente metodo:

function creaWord(){    
    texto = window.test.innerHTML; //texto a guardar


  blob = new Blob(['\ufeff', texto], {
    type: 'application/msword'
  });
  url = URL.createObjectURL(blob);
  link = document.createElement('A');
  link.href = url;

  link.download = "Documento"; //nombre del archivo
  document.body.appendChild(link);
  if (navigator.msSaveOrOpenBlob) navigator.msSaveOrOpenBlob(blob, 'Document.doc'); // IE10-11
  else link.click(); // other browsers
  document.body.removeChild(link);
}

El problema es que con el ejemplo se exporta sin etiquetas html a mi se me exporta el siguiente resultado:

<thead id="tablahead">
                <tr>
                    <th class="col-xs-1 col-sm-2 col-md-2" id="TRPANUM">XXX</th>
                    <th class="col-xs-4 col-sm-3 col-md-4" id="PARCOD">XXX</th>
                    <th class="col-xs-4 col-sm-3 col-md-4" id="PARDESE">XXX</th>
                    <th class="col-xs-4 col-sm-3 col-md-4" id="CLLDESE">XXX</th>
                    <th class="col-xs-4 col-sm-3 col-md-4" id="TRPANPAS">XXX</th>                    
                </tr>
            </thead>
            <tbody id="tablabody">                
                <tr>
                    <td>XXX</td>
                    <td>XXX</td>
                    <td>XXX</td>
                    <td>XXX</td>
                    <td>XXX</td>                        
                </tr>
            </tbody>
7
  • Dices que te exporta el HTML como tal. puedes mostrar como lo haces? a él le exporta la tabla porque usa innerHTML
    – lois6b
    Commented el 25 abr. 2017 a las 8:07
  • @lois6b Comprueba la edicción Commented el 25 abr. 2017 a las 8:16
  • @lois6b como ves yo tambien uso el innerHTML pero en mi caso tengo una tabla mas compleja, no se si podría ser eso. Commented el 25 abr. 2017 a las 8:19
  • @lois6b Es el mismo codigo que se exporta pero no he querido mostrar los datos. Pero la estructura html es la misma. Commented el 25 abr. 2017 a las 8:29
  • Prueba con el ejemplo de mi respuesta. Lo he completado con el código javascript que genera el archivo. Commented el 25 abr. 2017 a las 9:03

1 respuesta 1

7

Lo que estás haciendo con esas líneas en PHP es informar al navegador mediante las cabeceras HTTP que el contenido que va a ser generado es un documento Word y su nombre, nada más.

Para generar el documento en sí necesitas conocer el formato interno de los documentos Word o bien usar una biblioteca de funciones que te ayuden a generarlo. Por ejemplo PHPWord.

El "truco" que intentan usar con esos códigos javascript es guardar un documento HTML con extensión .doc para forzar que sea Word quien lo abra y genere un documento Word a partir de la página HTML. Este truco funciona también con LibreOffice/OpenOffice/WPS Writer.

El conjunto de estilos CSS que soporta Word es reducido, por lo que olvídate de bootstrap o enlazar JavaScript o CSS externos. Todo debe ir en el mismo HTML empotrado para que el truco funcione.

Parece que el documento que te iba a enviar ha sido eliminado de la web de Microsoft, pero éste podría servirte igualmente de guía: http://sebsauvage.net/wiki/doku.php?id=word_document_generation

Este es un ejemplo de documento básico basado en el que muestra dicho enlace agregando tu código javascript ligeramente modificado:

function creaWord(){
  var html = document.documentElement.outerHTML;
  var blob = new Blob(['\ufeff', html], {
    type: 'application/msword'
  });
  var href = URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.href = href;
  a.download = "documento.doc";
  document.body.appendChild(a);
  if (navigator.msSaveOrOpenBlob) {
    navigator.msSaveOrOpenBlob(blob, 'documento.doc');
  } else {
    a.click();
  }
  document.body.removeChild(a);
}

window.onload = function() {
  creaWord();
}
<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
<head><title>Ejemplo Microsoft Office HTML</title></head>
<body>
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<p>Texto en nivel 3</p>
<h2>2º título 2</h2>
<h3>Otro título 3</h3>

<table width="100%">
<thead style="background-color:#A0A0FF;"><td nowrap>Columna A</td><td nowrap>Columna B</td><td nowrap>Columna C</td></thead>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2 Prueba con texto laaaargo: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed sapien 
ac tortor porttitor lobortis. Donec velit urna, vulputate eu egestas eu, lacinia non dolor. Cras lacus diam, tempus 
sed ullamcorper a, euismod id nunc. Fusce egestas velit sed est fermentum tempus. Duis sapien dui, consectetur eu 
accumsan id, tristique sit amet ante.</td><td>C2</td></tr>
<tr><td>A3</td><td>B3</td><td>C3</td></tr>
</table>


<p>Listas:</p>
<ul>
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
  <ul>
  <li>elemento 4</li>
  <li>elemento 5</li>
  <li>elemento 6</li>
      <ul>
      <li>elemento 7</li>
      <li>elemento 8</li>
      </ul>
  </ul>
<li>elemento 9</li>
<li>elemento 10</li>
</ul>
</body>
</html>

He probado el ejemplo en Ubuntu 14.04 usando un navegador Google Chrome, en Windows 10 usando Windows Edge y Office 2016 y en Android 6.0.1 con el navegador Chrome y WPS Office.

4
  • Entonces, mi problema es que el word no soporta los estilos de mi pagina? Que deberia hacer quitar las clases a lo que vaya a exportar? Commented el 25 abr. 2017 a las 8:34
  • El PHP que debes crear para generar el documento Word HTML debe tener todo "empotrado" en la página, sin enlazar hojas de estilos externas ni javascripts ni nada de eso. Sigo buscando la página de referencia de microsoft sobre ese tema, pero todo lo que encuentro en google enlaza a una página que ha sido eliminada (o ya no existe o bien ha sido movida a otra URL). Commented el 25 abr. 2017 a las 8:37
  • Dale a ejecutar a mi ejemplo, ahora es capaz de generar el documento documento.doc de manera correcta para que sea abierto por Word (u OpenOffice/LibreOffice Writer). Commented el 25 abr. 2017 a las 8:53
  • Funciona bien, muchas gracias. Commented el 25 abr. 2017 a las 9:20

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.