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>