Cómo exportar de HTML a MS Word mediante Javascript

Generalmente, solemos hacer uso de la opción de exportar para descargar contenido de una página web a un fichero, para poder utilizarlo de forma offline. El formato .doc (MS Word) es ideal para exportar contenido HTML a un fichero. Además, la funcionalidad de exportar de HTML a doc se puede realizar facilmente sin interacción del lado del servidor. En este artículo te mostraré cómo exportar contenido HTML a un documento Word mediante Javascript.

El hecho de utilizar programación del lado del cliente hará que nuestra aplicación sea más usable para el usuario. Este, podrá exportar una parte específica de la página sin tener que refrescar el navegador.

Exportar de HTML a MS Word mediante Javascript

En el código veremos cómo convertir contenido HTML a un documento de Word y cómo guardarlo en un fichero .doc.

Codigo Javascript

La función Export2Doc() convierte contenido HTML a Word o exporta una parte específica de una página web con imágenes, y lo guarda en un fichero .doc.

  • element – Obligatorio. Define el ID del elemento de la página que queremos exportar al doc
  • filename – Opcional. Define el nombre del fichero d enuestro documento .doc.
function Export2Doc(element, filename = ''){
    var preHtml = "<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><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
    var postHtml = "</body></html>";
    var html = preHtml+document.getElementById(element).innerHTML+postHtml;

    var blob = new Blob(['ufeff', html], {
        type: 'application/msword'
    });
    
    // Specify link url
    var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
    
    // Specify file name
    filename = filename?filename+'.doc':'document.doc';
    
    // Create download link element
    var downloadLink = document.createElement("a");

    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob ){
        navigator.msSaveOrOpenBlob(blob, filename);
    }else{
        // Create a link to the file
        downloadLink.href = url;
        
        // Setting the file name
        downloadLink.download = filename;
        
        //triggering the function
        downloadLink.click();
    }
    
    document.body.removeChild(downloadLink);
}

Contenido HTML

Mete el contenido HTML que quieras exportar a MS Word (.doc) en un contenedor.

<div id="exportContent">
    <!-- Tu contenido va aqui -->
</div>

Necesitamos un elemento que ejecute la función Export2Doc() y exporte nuestrro contenido HTML a un fichero .doc utilizando Javascript.

<button onclick="Export2Doc('exportContent');">Export as .doc</button>

Si quieres exportar el contenido a un fichero .doc con un nombre personalizado, tendrás que pasarle dicho nombre a la función Export2Doc.

<button onclick="Export2Doc('exportContent', 'word-content');">Export as .doc</button>

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.