> Manuales > Taller de PHP

Hace unos días me enfrentaba al problema de generar informes en PDF a partir de información guardada en una base de datos, y lo hice sin inconvenientes gracias a FPDF Library.

Pero, mientras lo hacía, no dejaba de pensar en las veces que tuve que explicarle a uno que otro cliente que para leer los informes en PDF debía bajarse el Acrobat Reader, y me dije: "tiene que haber algo mejor"...

Segundos más tarde, Google me llevaba a unipage y a algunos sitios que hablaban de pdf mejorado... Luego, fue cuestión de estudiar el código fuente de unipage, traducir artículos de wikipedia y otros lugares, de consultar a un par de foros amigos y sacar variadas e interesantes conclusiones que compartiré con ustedes.

La primera sorpresa con la que me encontré fue la existencia de una manera de incrustar archivos externos (imágenes, swf, estilos, códigos javascript, etc.) diferente de la que yo conocía y manejaba y, para colmo, estandar: el esquema data: URI, que permite la inclusión de pequeños elementos de datos en línea, como si fueran referenciados hacia una fuente externa, y cuyo formato es el siguiente:

data:[<MIME-type>][;base64],<datos>

Donde ;base64 es la codificación.
Veamos un ejemplo de cómo mostraríamos una imagen con el esquema data: URI:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA AAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/ xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB 0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZ SBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C 7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+E rXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0r ZigAAAABJRU5ErkJggg" alt="Red dot" />

Hasta aquí todo bien, utilizando este esquema podía generar contenidos en un html sin depender de una conexión a internet ni de imágenes externas, sólo tenía que codificar la imagen en base64 con la ayuda de php* (ver cómo al final de la página) y luego generar un htm o un html descargable, todo perfecto y completamente standalone... pero había un problema... y bastante serio: El fucking Internet Explorer no soporta el esquema data: URI!

Cuando me di cuenta de esto, tomé el siguiente vuelo Google disponible, visité a varios amigos gurúes del Nuevo y El Viejo Continente y, lamentablemente, en todos lados me encontré con la misma respuesta que, ya antes que ellos, me había suministrado el Maestro Po cuando le planteé mis tribulaciones: "Si quieles que funcione en Intelnet Explolel, Pequeño Saltamontes, debelás usal, en lugal del esquema Data: ULI, el folmato MIME HTML".

No podía creerlo. Mientras miraba los muertos ojos del anciano (como diría Faulkner: semejantes a dos coágulos de flema), mi cerebro funcionaba a toda prisa: "Pero Maestro, salvo el cada vez menos repugnante Ópera, el resto de los navegadores no soporta el formato mhtml", le dije. El maestro hizo un gesto cansino. Finalmente dijo: "En efecto, si quieles que funcione en todos los navegadoles tu influctuoso expelimento, debelás cleal 2 alchivos, uno con extensión mhtml y folmato MIME pala IE, y otlo con extensión htm o html para los navegadoles selios".

Finalmente le hice caso. El archivo MHTML quedó con este código:

MIME-Version: 1.0
Content-Type: multipart/related; boundary="==boundary-1"; type="text/html"

Su navegador no admite este formato
--==boundary-1
Content-Type: text/html; charset=us-ascii
Content-Transfer-Encoding: 7bit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD><TITLE>Test message no. 1</TITLE>
</HEAD>
<BODY>

<img src="cid:pepe"><br>
<img src="cid:pepe2">
</BODY></HTML>

--==boundary-1
Content-Type: image/jpeg
Content-ID: <pepe>
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="red-test-image.jpg"

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
--==boundary-1
Content-Type: image/jpeg
Content-ID: <pepe2>
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="red-test-image.jpg"

/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAMQAA/+4AIUFkb2JlAGTAAAAAAQMAEAMDBgkAAAOlAAA H+AAACvD/2wCEAAgGBgYGBggGBggMCAcIDA4LCAgLDhANDQ4NDRARDA4ODg4MERATFBUUExAZGRsbGRklJCQkJSkpKS kpKSkpKSkBCQgICQoJCwoKCw4MDgwOEg4ODg4SFA4ODw4OFBoSEBAQEBIaFxgVFRUYFxwcGhocHCMjIiMjKSkpKSkpK SkpKf/CABEIAFAAUAMBIgACEQEDEQH/xAC6AAADAQACAwAAAAAAAAAAAAAGBwgFAwQAAQIBAQAAAAAAAAAAAAAAAAAA AAAQAAICAgEDBAMAAAAAAAAAAAQFAQMCBgAREhMQQBYHIiMVEQACAQMCAwUFBgQHAAAAAAABAgMAEQQhEjFBE1FhIj IFEHGBkRShscFSYjNCoiMVIHKSwlMkRBIBAAAAAAAAAAAAAAAAAAAAQBMBAQACAgICAgMBAAAAAAAAAREAITFBUWFxgZGh QLHB0f/aAAwDAQACEQMRAAAAfnz66JnodbdMNt4HxSqmBEW4WH4HF56XLCCiY3cLMI4MVkZQhw+h18D1bxfSp2UA+5U HPu/TiAxdMoWFmOUzPoPU9NzICKc6kQwQ0NKdEHAtWSvjvpzaxznYa6a4x5jrRciMIhDRHoLqnw5PWlmH1UAk2z//2g AIAQIAAQUB9z//2gAIAQMAAQUB9z//2gAIAQEAAQUB5142dAJBjN+clTnsex2QJub8etPt61lXjMZY+ppdS8M869mZ 3xwF4QAFXn2x3xlxczYKrEGwDvaPTeTMxNfXLCGhIf10vwwn6/1/KCfrcOeMtPeKuV2ZTxK4ySsab6SqI5uMifHtRN GCujeFNeCt+sc4sNvSLb/n6ictmgE4yuevNJIm9Cy2TJfDt4yeEactuIAp0u4u1NrwCUr+OPsTtjrBiyPGUJEYeLmr BSvU7ZXdUurjOI+v74wDjhLzIUpQ9HsbN7qRK37KWJOWONtGuPmI9uzvFpWuV98TqRcCNjTxl2OWwraiq9ogJmzYLm 1Nsdcsc/16Vn1e7AZSoYOmAzVsFfIl1FNTPMmhyLB9T2Srcp8uc9cunbXoAWVhWxKDGtBIVolvkiMRXp6winfwM4ab pcVVjZPbHXObcpwnV5vzVFt1oPGRywhJhE5RFvYNE/nPXmNfjowiIn4aRerppwop/9oACAECAgY/AU//2gAIAQMCBj 8BT//aAAgBAQEGPwH2fUZr6n9uFdXc/pH41bCWPCj5G3Vf4lxt/loN/cJShNtyqF1428C1t6sOZ+qZNR8Yyt/jQTLd cPLGjxyGyHvRzofdxoMhDKeBGo/wT5037cCFyBxNuQ99TZ2USZJmJHYo5KL8hwFG1ZOAkSNDl/uOd4k4bbqysAPl7/ ZbiOYoSenzsgU3aA3MTdzJwpiB0cuH9+A8v1Kean2yKi7vqnWFj+UG7k/y2qPAwlDSvqWY2VQOJY0DnZcssvPpWRR3 ahiasHyF7w6/ihq+HnyR90qCT7V6f3UZkj+qhHGSC7ED9Seb7K++k9QCdRbdOdOZjYi9u8WqPJx23wzKHjbtB1Hsyx lm26wgtxMt7pa/2916yJ5Ttgw4DJIwF2YkhbCg2Tj5MG7yXj4jtvepTgOWeHV4yNre8A0cWdpGlXzqi329xvbWlMWN klb/ANSSwG0fBjeo/UcBhbKuNyCwZhzI7asaWI/+WV4Qe0A7x9jVII/TMqVxcRyFAkJtYbi5N1XXiRVsoqsMB8GNH5 A3C5P8RHb8q9SyYgjTOyxRB9Vug36/Eio8r1/LfImV7yqDuR4/4Y18pTXjapZcJHHVWxLtuNr7rDuFZuT6ik0QD2Xp flQdMBrjThQjiZmdyTYkWZL2Gg5ioospCsatvVT8RpRLaaXFLATdy5eXS3iezcbkMLW1FT+oRMjLHE0c0EoJRkkIBtY +YG1qHGxrMwj5kl6g9zAA/d7J4/7dkywwW3ZUY3LfS4sNdL1Jj5EU+HkZJO6NwO mWLWS1tQeRq7WY8TuOtu6l/wCOMbE/yiomPmQbZB3Dgai9NSE5kO3aiXs0aqdbaG4F6mx+sPrMjan0YN5UkD gsjoNRttY3rp8COIPIjkaJbySJZ/iQPxpDPcmQ7Yo1F2bmflSZWZnx46GEbcQHe4J8V5AgNja2lZeRD0s7FyJC8Rttl jvppcUnqCSsvmQY7aEHm7d3ZRN9O3kaWwAIBB79bipI21V8dvgyshBrB9Tkw1kx7suZlIimVLgLFdrX28ayM3Fh6UTW UH89rjqEaWLUs6cgQR3GvTvU5239OCRfpnUePqWG63ZYV0/RPTMEY1j/AE3G039ylRrS5XqvpmP4QNvTQMq257rmpAv Akmw4a1a2lbu37qyvVTpCi9CLvYkO3ysPnSj07J+mnGkm6+yRPyuBe9jw0owl45WDMN0V9vgO0tqBpu0HfX+2sKRW68 MCbYlbnEfNHftU6V/WgeM87eL5cKaHHiCxtxL8bUb8TqT20PxorLytde7jqK62RCsBnkZ0RBYFTba1hwuBX/YyVDco1 8T/AOlbmvUoPTsI6C7XAW53B76EnQ62oG1jX08kKuu/erm+5SbAgd2lEAVoL0X2at4deQqNeRYDjt4m3m5VHi5bwtl 7zuyCXcxQk7tsd7biLc7cajx4tI4lCIO5RYV//9oACAECAwE/EP5P/9oACAEDAwE/EP5P/9oACAEBAwE/ELvHaHOak 6kgnSpx2tHnHXLwD2/0jC6cSKSXXIDZ4xlMFBRKaP245qMMFp4UHy043yjlGrEHsTnLlxYzBNWK2jS2qtGC8Aqq31Q 4UAINhIw8eMunywSsRoFPIpRh+Q0QwLKT8sw87E/KoeR2ROnI8UVXbj/uA6elHELcJrThQcn8XzluTKjVEHR6FzTiq L7sa95p8YYQe6/U/WIwociX5Y/LASDXvIqAOKog84AJ8o4+5ivFZtIFbKBLhjQBpHSMT4dmXU684hoIkMofcnDA/U0 tcM285tgB2jxIYFPKeLxyAusOi3fku9HpgGrBDI7ZovGsXAuakWo6895el2iw61m+3q+I/wBR+sY1tOEyygnJ/eCFJ bNKk7FrpzoOf5HwKRYlWGnkiliA6OGE5xqBa4MRQKHLXA5xCieQeW6YlNn5hiQDlcW45odgkdY8CEUYo75zSXiOCiSB g1OMarts0UK71cqLUOlm+tZrBge38NIzpuGP4mAXQw8V4HzxvBiwwYE3MrTVwxA2Aiujv8Y8AI14OjrEivnVSN9Y+F EVhKWmcZxOjICY3IW2acBeuTEGrYaOhB3zjaqb2bX6RiFN6KBoPA2rowuwiLm+kY5ZfeL1Oibs58uP6zSYtbdacOck uxYOC+OcVdkHvYj8cYRK9juDL0m44f6LF2PkWtj8gJ9Whrb0RAlP93g5N9LfX2YYFHXFdSjo8YNdk+Vdxw3vBKW9acf LhSADIIE614zUZHF/v1kuOYXUNtv6wOlFk5qj6lgbLfcFkQ2UuXzjKk7rUE7um7CYIbqG1qjjB0QeR9AbGa+fXE426d sr/cJaCTX5zY2z/sYQhGujsrN5LoWlEI4aGesKksgaATACB1nz9VZda/rZkpqZwvdnupxhoEb7J1lS53Aep4qHjOSBO X+8q/QP8wUqUCAIcJzb3lxDsU9G0Mb5msGeIha6epDQVzDC0r9tCbvgz//Z
--==boundary-1--


Y este enlace, que no podrán ver en Explorer pero sí en navegadores respetables, corresponde al archivo html cuyo código es el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAARgAA/+4 ADkFkb2JlAGTAAAAAAf/bAIQABAMDAwMDBAMDBAYEAwQGBwUEBAUHCAYGBwYGCAoICQkJCQgKCgwMDAwMCgwMDQ0MDBE RERERFBQUFBQUFBQUFAEEBQUIBwgPCgoPFA4ODhQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQ UFBQUFBQUFBQU/8AAEQgARgBGAwERAAIRAQMRAf/EAHQAAAIDAAMBAAAAAAAAAAAAAAYHBAUIAAIDAQEBAAAAAAAAA AAAAAAAAAAAABAAAgEDAwIDBwIEBwEAAAAAAQIDEQQFABIGIQcxIhNBUWFxMhQIgUJSIyQVkaGxwTNDJhcRAQAAAAA AAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AHbBF5A8hO1oIlAHTxTQXNgskZW4LigQqR8vjoPl/k4bdmyF0USyx8ct1 LK3TasKFySfdQaDFeH77crxGfyOYNtb5q0yrtcS4+RftkSUncskckYLjp0INQdBPyn5e90LBbhOM43EYOa6orXnoy 3sw6ez12CA/HZoK3h/5id58DlluOT5GHlmEmJS+x15bwwSmJqhjDPCisjD9taj36DXnbu+tsv2jx2atWEljeNLcWf qnwR5CQDTpUVofjoLXEf1MyxmiSLGzMnsNOnQ6CDLC5ykHgJQD5feChGg8knYQQqgonpx1Na18o0Fz6oNoCVKKU8z n29fAAaBYfkNyFsJ2zvbe1kCXufeLGQr7RCxDzE/AqoX9dBjm4t2W1SMTiFkAHkHUVHXQCt/GBG3831AGqjGu7/A6C qPj00G7vxPzkmZ7CXWCdxJLx7OXVoFc/Tb3aJcxAH5l9A5eLQwRyymf61VhGp6sK1J0EWS5QZaFgPKWKsCOtdp8NA E815FecT4PecmxtnFeX+Pgt5Ta3BdYjGzIjs3p+byg16aAHxP5XcBlENlzDG5DjV4EqZ4kGSsHHgWjkj2ybfmtRoKH vDzPi3cK8wMPE8pb5qxhtXl+4hLhBLLJ1R43CkMoUV3CvXQKC/tbVIazqFnuGdRFFQsNvjWnUddAEXECujER7WBIqQ aMAadK6Cgnt2N36ESFpXICRL1ck+4aB2doe72S7L8T5JhZuPDI3ecvrW+t/uLn7aKEW8LRNuCBmcncKAGmgtbb8xO 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"><br />
<img src="data:image/jpeg;base64,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" />
</body>
</html>

Como ven, en ambos casos las imágenes se definen dentro del mismo archivo en lugar de apuntar a archivos externos, como hacemos normalmente.

*Para terminar este tedioso artículo, les muestro el código php con que codifiqué las imágenes en base64:

<?php
echo base64_encode(file_get_contents('img01.jpg'));
?>

Andrés Fernández

Manual