He estado trabajando en este problema para los últimos días. Sin suerte en el intento de mostrar la secuencia en <embed src> etiqueta, sólo traté de mostrar en una ventana nueva.

La nueva ventana muestra PDF controles sólo PDF Blob - ventana no muestra contenido)

Alguna idea de por qué el contenido de los pdf no se está mostrando?

CÓDIGO:

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

5 Comentarios

  1. 94

    Que usted necesita para establecer el responseType a arraybuffer si desea crear un blob de sus datos de respuesta:

    $http.post('/fetchBlobURL',{myParams}, {responseType: 'arraybuffer'})
       .success(function (data) {
           var file = new Blob([data], {type: 'application/pdf'});
           var fileURL = URL.createObjectURL(file);
           window.open(fileURL);
    });

    más información: Sending_and_Receiving_Binary_Data

    • No funciona para mí. Al escribir la dirección URL en la ventana del navegador, funciona, pero no a través de la $http.método post. ¿Hay algo más a tener en cuenta? La configuración de seguridad? Tipo y versión de navegador?
    • Se está trabajando ahora. Parece que el arrayBuffer se aplicó v. 1.1 en angularjs. Tuve v. 1.08. Cuando la actualización de angularjs, todo funcionó muy bien.
    • Esto casi que funciona para mí. Necesito hacer lo mismo, pero tengo que poner un user-friendly URL o nombre de archivo. El UUID que juegos de navegadores no funciona para mí. ¿Sabes si hay una forma para abrir un archivo PDF en una nueva pestaña y establecer el nombre de archivo en la URL? Gracias!
    • Que hace el trabajo. Pero cómo establecer el nombre del archivo?
  2. 16

    Si establece { responseType: 'blob' }, no hay necesidad de crear Blob por su propia cuenta. Usted puede simplemente crear url basado en la respuesta de contenido:

    $http({
        url: "...",
        method: "POST",
        responseType: "blob"
    }).then(function(response) {
        var fileURL = URL.createObjectURL(response.data);
        window.open(fileURL);
    });
    • Excelente! Esto funcionó para mí después de pasar muchas horas tratando de mostrar el contenido del pdf.
    • ncaught TypeError: Error al ejecutar ‘createObjectURL’ en ‘URL’: Sin función se encontró que coincide con la firma proporcionada. en el Objeto.el éxito (de investigación.js:68) j (jquery.js:2) en el Objeto.fireWith [como resolveWith] (jquery.js:2) en x (jquery.js:4) en XMLHttpRequest.<anonymous> (jquery.js:4)
    • ¿qué navegador usas? Verificar tabla de la compatibilidad
    • ningún nombre de archivo///
  3. 8

    Puedo usar AngularJS v1.3.4

    HTML:

    <button ng-click="downloadPdf()" class="btn btn-primary">download PDF</button>

    JS controlador:

    'use strict';
    angular.module('xxxxxxxxApp')
        .controller('MathController', function ($scope, MathServicePDF) {
            $scope.downloadPdf = function () {
                var fileName = "test.pdf";
                var a = document.createElement("a");
                document.body.appendChild(a);
                MathServicePDF.downloadPdf().then(function (result) {
                    var file = new Blob([result.data], {type: 'application/pdf'});
                    var fileURL = window.URL.createObjectURL(file);
                    a.href = fileURL;
                    a.download = fileName;
                    a.click();
                });
            };
    });

    JS servicios:

    angular.module('xxxxxxxxApp')
        .factory('MathServicePDF', function ($http) {
            return {
                downloadPdf: function () {
                return $http.get('api/downloadPDF', { responseType: 'arraybuffer' }).then(function (response) {
                    return response;
                });
            }
        };
    });

    Java, Servicios Web REST – Spring MVC:

    @RequestMapping(value = "/downloadPDF", method = RequestMethod.GET, produces = "application/pdf")
        public ResponseEntity<byte[]> getPDF() {
            FileInputStream fileStream;
            try {
                fileStream = new FileInputStream(new File("C:\xxxxx\xxxxxx\test.pdf"));
                byte[] contents = IOUtils.toByteArray(fileStream);
                HttpHeaders headers = new HttpHeaders();
                headers.setContentType(MediaType.parseMediaType("application/pdf"));
                String filename = "test.pdf";
                headers.setContentDispositionFormData(filename, filename);
                ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);
                return response;
            } catch (FileNotFoundException e) {
               System.err.println(e);
            } catch (IOException e) {
                System.err.println(e);
            }
            return null;
        }
  4. 0

    He estado luchando durante días, finalmente, la solución que funcionó para mí, es la siguiente. Tuve que hacer el window.print() para PDF en una ventana nueva necesita para trabajar.

     var xhr = new XMLHttpRequest();
          xhr.open('GET', pdfUrl, true);
          xhr.responseType = 'blob';
    
          xhr.onload = function(e) {
            if (this['status'] == 200) {          
              var blob = new Blob([this['response']], {type: 'application/pdf'});
              var url = URL.createObjectURL(blob);
              var printWindow = window.open(url, '', 'width=800,height=500');
              printWindow.print()
            }
          };
    
          xhr.send();

    Algunas notas sobre la carga de PDF & impresión en una nueva ventana.

    • Carga de archivo pdf en una nueva ventana a través de un iframe va a funcionar, pero la impresión no funcionará si la url es una dirección url externa.
    • Navegador pop ups debe ser permitido, entonces sólo va a trabajar.
    • Si intenta cargar iframe de url externa y tratar window.print() obtendrá impresión vacío o elementos que excluye iframe. Pero puedes activar la impresión manualmente, lo cual va a trabajar.
    • Este no me funciona tengo consulta.js:85 Uncaught TypeError: No se puede leer la propiedad ‘print’ de null en XMLHttpRequest.xhr.onload
    • De qué trata la nueva ventana que se abre? En este ejemplo se ha trabajado para mí antes.
    • Nop no
    • URL del pdf debe ser desde el mismo servidor. De lo contrario, se mostrará CORS de error.
    • Ver la muestra de trabajo de enlace pdf-print-pckrishnadas88.c9users.io/hello-world.html. Tenga en cuenta que estará disponible para unas pocas horas, ya que es una cuenta gratuita.
    • imprimir? simplemente abra el archivo PDF.

  5. -1

    Terminé de descargar mi pdf utilizando a continuación el código

    function downloadPdfDocument(fileName){
    
    var req = new XMLHttpRequest();
    req.open("POST", "/pdf/" + fileName, true);
    req.responseType = "blob";
    fileName += "_" + new Date() + ".pdf";
    
    req.onload = function (event) {
    
        var blob = req.response;
    
        //for IE
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {
    
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
            link.click();
        }
    };
    
    req.send();

    }

    • se comienza la descarga.
    • Que es lo que yo quería, por Eso es en función de lo que me puede llamar cuando estoy listo para hacer la descarga. No sé por qué usted votada abajo

Dejar respuesta

Please enter your comment!
Please enter your name here