Saltar al contenido

Activar vista previa de impresión de PDF codificado en base64 desde javascript

Solución:

Aquí hay una solución para el punto n. ° 3:

Abra una nueva ventana con solo un elemento iframe como el del n. ° 2 y solicite una impresión en toda la ventana. Esto también muestra una página en blanco.

En su caso, está arrojando un error CORS porque parece que para iframe src le está dando base64String, no la URL. Esto es lo que puedes hacer

  1. Tome su base64String, conviértalo en un Blob
  2. Genera una URL a partir del Blob
  3. Proporcione la URL generada al iframe.
  4. Después de esto, puede imprimir el contenido usando iframe.contentWindow.print();

Aquí está el código para convertir base64 a Blob

'use strict';

const b64toBlob = (b64Data, contentType="", sliceSize = 512) => {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize),
            byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, { type: contentType });
    return blob;
}


const contentType = "application/pdf",
    b64Data = "YourBase64PdfString", //Replace this with your base64String
    blob = this.b64toBlob(b64Data, contentType),
    blobUrl = URL.createObjectURL(blob);

Utilizar blobUrl al src de Iframe, una vez hecho, puede llamar print() en iframe como se muestra a continuación

const iframeEle = document.getElementById("Iframe");
if (iframeEle) {
    iframeEle.contentWindow.print();
}

Espero que esto ayude…

Más detalles sobre base64 a Blob está aquí Creando un Blob a partir de una cadena base64 en JavaScript

puedes usar esto,

función “printPreview (binaryPDFData)” para obtener el cuadro de diálogo de vista previa de impresión de datos binarios en PDF.

printPreview = (data, type="application/pdf") => {
    let blob = null;
    blob = this.b64toBlob(data, type);
    const blobURL = URL.createObjectURL(blob);
    const theWindow = window.open(blobURL);
    const theDoc = theWindow.document;
    const theScript = document.createElement('script');
    function injectThis() {
        window.print();
    }
    theScript.innerHTML = `window.onload = ${injectThis.toString()};`;
    theDoc.body.appendChild(theScript);
};

b64toBlob = (content, contentType) => {
    contentType = contentType || '';
    const sliceSize = 512;
     // method which converts base64 to binary
    const byteCharacters = window.atob(content); 

    const byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);
        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    const blob = new Blob(byteArrays, {
        type: contentType
    }); // statement which creates the blob
    return blob;
};
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

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