Estoy trabajando en una aplicación en la que tengo que mostrar PDF en el navegador. Recibo una matriz de bytes PDF de un tercero a través de webAPI. Una de las formas en que descubrí que se muestra el pdf es la siguiente.

var pdfAsDataUri = "data:application/pdf;base64,"+byteArray;
window.open(pdfAsDataUri);

No me gusta este enfoque porque muestra el formato codificado en base64 en la URL, ¿hay alguna otra forma de convertir la matriz de bytes en PDF y mostrarla en una página HTML junto con el cuadro de diálogo de impresión (window.print())?

6
Manish Makkad 9 dic. 2016 a las 14:40

1 respuesta

La mejor respuesta

En los navegadores modernos, puede usar un Blob para crea una URL de objeto que luego se puede usar en lugar de una URL base64 (que tiene algunas limitaciones en diferentes navegadores, como límites de longitud).

Aquí hay un ejemplo práctico que hace eso. Esta muestra muestra el PDF dentro de un iframe, pero realmente puedes hacer lo que quieras con ese objectURL como abrirlo en una nueva pestaña o lo que sea.

var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.onload = function() {

    // Create the Blob URL:
    var buffer = xhr.response;
    var blob = new Blob([buffer], {
        type: 'application/pdf'
    });
    var objectURL = URL.createObjectURL(blob);

    // Create an iframe to demonstrate it:
    var iframe = document.createElement('iframe');
    iframe.className = 'sample-iframe';
    iframe.src = objectURL;
    document.body.appendChild(iframe);
    console.log(objectURL);
};
xhr.open('GET', 'https://cors-anywhere.herokuapp.com/http://www.xmlpdf.com/manualfiles/hello-world.pdf', true);
xhr.send();
html, body {
  width: 100%;
  height: 100%;
}  
.sample-iframe {
  width: 90%;
  height: 90%;
}

Por supuesto, la función de impresión incorporada del navegador para el PDF también funcionará.

11
Alexander O'Mara 15 ago. 2018 a las 00:42
Ese fragmento de código no funciona, al menos no en Chrome. Muestra una página en blanco.
 – 
lukegf
21 dic. 2017 a las 18:50
Además, el pdf no está disponible en esta url.
 – 
Stephan
6 jul. 2018 a las 09:45
Desafortunadamente, parece que crossorigin.me tiene problemas para atender la solicitud en este momento.
 – 
Alexander O'Mara
6 jul. 2018 a las 09:57