Partiendo de mi anterior pregunta, me gustaria saber como puedo exportar una imagen de html a Word, o por lo menos saber si es posible o no.
Tengo la siguiente tabla:
<table id="test" class="table table-striped table-custom table-responsive">
<tbody id="tablabody">
<tr>
<td style="width:33.333333%">
<table class="table table-striped table-custom table-responsive">
<tbody>
<tr>
<td><img src="/html/images/chico64.png" /></td>
</tr>
<tr>
<td>Nombre: IKER</td>
<td>Apellido: IKER</td>
</tr>
</tbody>
</table>
</td>
<td style="width:33.333333%">
<table class="table table-striped table-custom table-responsive">
<tbody>
<tr>
<td><img src="/html/images/chico64.png" /></td>
</tr>
<tr>
<td>Nombre: ANDONI</td>
<td>Apellido: ANDONI</td>
</tr>
</tbody>
</table>
</td>
<td style="width:33.333333%">
<table class="table table-striped table-custom table-responsive">
<tbody>
<tr>
<td><img src="/html/images/chica64.png" /></td>
</tr>
<tr>
<td>Nombre: ERIKA</td>
<td>Apellido: ERIKA</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
La exporto con un botón que llama al siguiente método:
function creaWord(){
var html = document.getElementById("test").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);
}
Esto me exporta correctamente a word el formato de la tabla, pero las imágenes me las exporta de esta manera. No se ni si se puede exportar imágenes a word de esta manera. Pero por lo menos aclarar si es posible o no, y si es posible como debería hacerlo.
Edicion
Hay un jsfiddle que usa una librería externa y exporta imagenes. En un principio puede ser una solución valida pero me gustaría hacerlo sin usar librerías externas.
Por otra parte,he visto que en este jsfiddle convierte la imagen a base64 pero he probado ha hacer lo mismo (sin usar la librería) para ver si era cosa de la codificación pero sigue sin funcionar.
Edicion 2
Después de ver la baja calidad de mis resultados con javascript estoy probando a hacerlo con php.
Lo primero que he hecho es que el botón llame a la siguiente página php.
<?php
header("Content-type: application/vnd.ms-word");
header("Content-Disposition: attachment;Filename=documento.doc");
echo "<html>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Windows-1252\">
<style>
@page
{
size:21cm 29.7cmt; /* A4 */
margin:1cm 1cm 1cm 1cm; /* Margins: 2.5 cm on each side */
mso-page-orientation: portrait;
}
@page Section1 { }
div.Section1 { page:Section1; }
p.MsoHeader, p.MsoFooter { border: 1px solid black; }
</style>
<body>
<div class=Section1>
<table id='test' style=' border: 1px solid black;'>
<tr>
<td class='col-4' style=' border: 1px solid black;'>
<div class='row' style=' border: 1px solid black;'>
<div class='col-6' style=' border: 1px solid black;'>
<img id='img-0' src='/html/images/chico64.png' />
</div>
<div class='col-6' style=' border: 1px solid black;'>
<h1>1</h1>
</div>
</div>
<div class='row' style=' border: 1px solid black;'>
<div class='col-12' style=' border: 1px solid black;'>
Carrero Gomez, Iker
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>";
?>
Hasta aquí todo funciona relativamente bien pero tengo dos problemas.
- El word se abre con la vista de diseño web, me gustaria saber como evitar esto y que se abra como un word normal.
- Las imágenes siguen sin exportarse.
La documentación para saber que estilos debo aplicar estoy usando esta página pero aún así creo que algunos como el salto de página no me terminan de funcionar.