Export html to word

2

Hello, I am trying to export certain HTML elements to word to generate a report and the user to download the document. After doing some research and seeing the same question in The English forum I found with this answer:

  

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");
?>

I do not understand very well where I have to place this code and how do I download the page when I click on a button.

Even so, I add that I would not have any problem using a JavaScript library and doing it with it.

Edition

Another solution that I could find is this jsfiddle but when I use it in my code instead of exporting the content I export all the html as such.

I have the following table:

        <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>

The php that there is simply is a foreach, which starts like this:

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

And to export I do it by pressing a button that calls the following method:

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);
}

The problem is that with the example exported without html tags, the following result is exported to me:

<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>
    
asked by Lombarda Arda 25.04.2017 в 08:43
source

1 answer

6

What you are doing with those lines in PHP is to inform the browser through the HTTP headers that the content that is going to be generated is a Word document and its name, nothing more.

To generate the document itself you need to know the internal format of Word documents or use a library of functions that help you generate it. For example PHPWord .

The "trick" that they try to use with these javascript codes is to save an HTML document with extension .doc to force Word to open it and generate a Word document from the HTML page. This trick works also with LibreOffice / OpenOffice / WPS Writer.

The set of CSS styles that Word supports is small, so forget about bootstrapping or linking external JavaScript or CSS. Everything must go in the same embedded HTML for the trick to work.

It seems that the document that was going to send you has been deleted from the Microsoft website, but this could also serve as a guide: link

This is an example of a basic document based on the one that shows this link adding your slightly modified javascript code:

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>

I tried the example in Ubuntu 14.04 using a Google Chrome browser, in Windows 10 using Windows Edge and Office 2016 and in Android 6.0.1 with the Chrome browser and WPS Office.

    
answered by 25.04.2017 / 10:26
source