Convertir base64 a PDF, Excel o Word con Angular

Facebook
Twitter
LinkedIn
WhatsApp

En este POST vamos a ver cómo podemos convertir un elemento de base64 a su fichero correspondiente (base64 a PDF,base64 a Excel,base64 a Word,…etc).

¿Qué es un elemento de base64?

Base64 es un algoritmo de codificación que permite transformar cualquier carácter de cualquier idioma en un alfabeto que consta de letras, dígitos y signos latinos.Podemos convertir caracteres especiales de otros idiomas como logogramas chinos, emojis e incluso imágenes en una secuencia “legible” (para cualquier ordenador), que se puede guardar y/o transferir en cualquier otro lugar.

A menudo se utiliza para transmitir datos binarios por medio de transmisiones que tratan sólo con texto, como para enviar imágenes y archivos adjuntos por correo electrónico.

Paso 1: Convertimos los bits de base64 a un Array

Partimos que tenemos en algún lugar el elemento de base64 (por base de datos, API, etc). Se representa como un elemento de texto (técnicamente string) Por ejemplo:

base64 a PDF
Convertir PDF a Base64

Este documento pdf en base64 es el siguiente código:

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

Vamos a convertir este string de base64 a un array, y lo haremos con esta función:

public base64ToArrayBuffer(base64String: string){
    let binaryString = window.atob(base64String);
    let binaryLength = binaryString.length;
    let bytes = new Uint8Array(binaryLength);
    for (let i=0; i

Paso 2: Convertimos el elemento de base64 a un fichero:

[icon name="triangle-exclamation" prefix="fas"] Atención : Hay que seguir el paso anterior, ya que se utiliza la función base64ToArrayBuffer en la función que vamos a mostrar.

En la función se crea un diccionario documentTypeAvailable para añadir las extensiones que vamos a usar en nuestro proyecto y poder reutilizar esta función. Más abajo de este artículo os dejo dos tablas con las extensiones más utilizadas.

¿Qué hace blob?

Representa un objeto tipo fichero de datos planos inmutables. Los Blobs representan datos que no necesariamente se encuentran en un formato nativo de JavaScript. La interfaz File se encuentra basada en un Blob, heredando y expendiendo la funcionalidad de un Blob para soportar archivos en el sistema del usuario.

public downloadDocument (filename: string, documentType: string, base64String: string): void {
    let documentTypeAvailable = new Map();
    documentTypeAvailable.set('excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    documentTypeAvailable.set('word','application/vnd.openxmlformats-officedocument.wordprocessingml.document');
    documentTypeAvailable.set('pdf','');

    let bytes = this.base64ToArrayBuffer(base64String)
    let blob = new Blob([bytes], { type: documentTypeAvailable.get(documentType)});
    let objURL : string = URL.createElement('a') as HTMLAnchorElement;

    a.href = objURL;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

    URL.revokeObjectURL(objURL);
}

Tipos de MIME genéricos

ExtensiónTipo de MIME
Texto planotext/plain
.xmltext/xml
.pdfapplication/pdf
.zipapplication/zip, application/octet-stream, application/x-zip-compressed, multipart/x-zip
.rarapplication/vnd.rar, application/x-rar-compressed, application/octet-stream

Tipos de MIME del paquete de Microsoft Office

ExtensiónTipo de MIME
.docapplication/msword
.dotapplication/msword
.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document
.dotxapplication/vnd.openxmlformats-officedocument.wordprocessingml.template
.docmapplication/vnd.ms-word.document.macroEnabled.12
.dotmapplication/vnd.ms-word.template.macroEnabled.12
.xlsapplication/vnd.ms-excel
.xltapplication/vnd.ms-excel
.xlaapplication/vnd.ms-excel
.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xltxapplication/vnd.openxmlformats-officedocument.spreadsheetml.template
.xlsmapplication/vnd.ms-excel.sheet.macroEnabled.12
.xltmapplication/vnd.ms-excel.template.macroEnabled.12
.xlamapplication/vnd.ms-excel.addin.macroEnabled.12
.xlsbapplication/vnd.ms-excel.sheet.binary.macroEnabled.12
.pptapplication/vnd.ms-powerpoint
.potapplication/vnd.ms-powerpoint
.ppsapplication/vnd.ms-powerpoint
.ppaapplication/vnd.ms-powerpoint
.pptxapplication/vnd.openxmlformats-officedocument.presentationml.presentation
.potxapplication/vnd.openxmlformats-officedocument.presentationml.template
.ppsxapplication/vnd.openxmlformats-officedocument.presentationml.slideshow
.ppamapplication/vnd.ms-powerpoint.addin.macroEnabled.12
.pptmapplication/vnd.ms-powerpoint.presentation.macroEnabled.12
.potmapplication/vnd.ms-powerpoint.presentation.macroEnabled.12
.ppsmapplication/vnd.ms-powerpoint.slideshow.macroEnabled.12

Paso 3: Llamemos a downloadDocument

this.downloadDocument('lacodigoteca','pdf','aqui ponemos el string de base64')

¡Listo! ya tenemos nuestro fichero que hemos convertido de base64 a la extensión que necesitemos.

[icon name="triangle-exclamation" prefix="fas"] Atención : Si la base64 es de un PDF, no podemos convertirlo a otra extensión como un documento Excel o Word.

Si os ha gustado este artículo, os dejo más sobre Angular 😉

Facebook
Twitter
LinkedIn

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio