Si deseas agregar la funcionalidad para exportar contenido html a un documento de Word en cualquier sistema web, para que el usuario de tu aplicación web pueda guardar fácilmente el contenido basado en la web como lo es un archivo .doc. En esta publicación, voy a compartir el plugin jQuery simple llamado jQuery-Word-Export, que te ayudará a habilitar la exportación de HTML e imágenes a un documento de Microsoft Word.
Este plugins aprovecha el hecho de que MS Word puede interpretar HTML como un documento. Específicamente, este complemento aprovecha el formato de archivo MHTML para insertar imágenes directamente en el archivo, de modo que se puedan ver fuera de línea. Desafortunadamente, LibreOffice y, probablemente, otros procesadores de texto similares leen el archivo de salida como texto plano en lugar de interpretar que es un documento, por lo que el resultado de este complemento solo funcionará con MS Word propiamente dicho.
Librerías: El plugin es dependiente de la biblioteca principal de jQuery y FileSaver.js, por lo tanto, se debe incluir primero esta biblioteca y luego agregue FileSaver.js
|
1 2 3 |
<script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="FileSaver.js"></script> <script src="jquery.wordexport.js"></script> |
Código HTML: A continuación el contenido HTML de muestra que debe exportarse como archivo .doc. y también crea un botón para guardar y exportar el contenido como archivo con extensión .doc.
|
1 2 3 4 5 6 7 |
<div id="content" style="width:70%"> <h1>Hello, world!</h1> <p>This jQuery plugin takes the HTML from any element on the page and converts it (all on the client-side) to MHTML (MIME-HTML) with .doc as the file extension. What this does is that it archives the HTML by embedding images into the file for offline viewing, and then Microsoft Word will open the file and automatically interpret it into a rich document with header and body styles as well as images. Go ahead and click the link on the right to try it out. Note that it won't work on a phone or tablet, and you'll need to open with Microsoft Word for it to correctly interpret the file (currently, the output file doesn't get handled properly by LibreOffice).</p> </div> <!-- Export to DOC button --> <button class="ExportToWord"> Exportar a Word(.doc) </button> |
Código JavaScript: Finalmente se debe inicializar el plugin y pasar el id del div que se muestra en el contenido, esto se necesita para poder exportar los datos como archivo de word.
|
1 2 3 4 5 |
$(function() { $(".ExportToWord").click(function(event) { $("#content").wordExport(); }); }); |
Mira la demostración y descarga el código fuente.
Visita el repositorio oficial de Github para más información y para futuras actualizaciones. No olvides leer la licencia para usar este plugin en tus proyectos.
