Javascript: abre PDF en una nueva pestaña desde una matriz de bytes

2 minutos de lectura

Avatar de usuario de Jeremy Wagner
jeremy wagner

Estoy usando AngularJS con un recurso HTTP para llamar a una API externa y mi respuesta es una matriz de bytes. Necesito convertir esta matriz de bytes en un PDF en una nueva ventana. No he visto ninguna solución muy buena aquí que funcione en varios navegadores o que sea javascript puro. ¿Hay alguna forma de hacer esto?

Aquí está mi código:

JavaScript

Document.preview({id: $scope.order.id}, function(data){

    // Open PDF Here
    var file = new Blob([data], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);

});

  • mozilla.github.io/pdf.js tener una buena referencia aquí

    – AAH-Dispara

    28 de enero de 2015 a las 16:24


  • Lo he estado mirando, pero no veo ningún buen ejemplo usando una matriz de bytes. También estuve mirando stackoverflow.com/questions/21628378/… pero recibo el error “Error al cargar el documento PDF”

    –Jeremy Wagner

    28 de enero de 2015 a las 16:32

  • ¿Hay algún complemento propietario o algo para hacer esto? Varias páginas abren pdf, ¿cómo puedo?

    –Jeremy Wagner

    29 de enero de 2015 a las 15:29

avatar de usuario de aniltilanthe
aniltilanthe

Debería pasar el tipo de respuesta en su llamada de servicio

$http.post('/Service-URL', dataTO, {responseType: 'arraybuffer'});

luego, en el éxito de su llamada de datos, esto debería abrir un pdf en una nueva ventana: –

    getDocument()
        .success(function(data) {
            var file = new Blob([data], { type: 'application/pdf' });
            var fileURL = URL.createObjectURL(file);
            window.open(fileURL);
    })

De esta respuesta: – https://stackoverflow.com/a/21730535/3645957 por https://stackoverflow.com/users/2688545/michael

  • @ihodonald Es un atributo opcional ‘nombre’. Fue un error tipográfico en la respuesta. Pero es opcional, por lo que no es necesario. como desde aquí w3schools.com/jsref/met_win_open.asp -> lo eliminé de la respuesta.

    – aniltilanthe

    6 de enero de 2020 a las 15:31


  • Amigo, esta cosa: {responseType: ‘arraybuffer’} salva mi vida. ¡Muchos gracias! 😊

    – Sérgio Danilo

    23 de enero de 2021 a las 18:08


Si alguien todavía busca eso, esto es lo que estoy haciendo (y trabajando):

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

Donde byteArray son los datos que recibe. Tal vez no sea una buena solución (la matriz de bytes está visible en la URL), pero funciona…

  • Los URI de datos no funcionan en todos los navegadores. Especialmente incluso las versiones recientes de IE.

    – programador deus

    17 de febrero de 2017 a las 22:04

  • ahora Chrome v60 no permite abrir archivos desde byteArray usando window.open, se ha depreciado en Chrome v60

    – Sayjad Ali Khan

    10 de agosto de 2017 a las 13:26


  • probé con v94 y funcionó

    – Mahmud Hboubati

    5 oct 2021 a las 10:57

  • Bonito. funciona con la versión Chrome 108. Necesito verificar rápidamente un bytearray y este método es útil

    – primer postcomentarista

    12 de enero a las 12:51


¿Ha sido útil esta solución?