web-dev-qa-db-fra.com

PDF Blob - Fenêtre contextuelle ne montrant pas le contenu

Je travaille sur ce problème depuis quelques jours. N'ayant aucune chance d'essayer d'afficher le flux sur la balise <embed src>, j'ai simplement essayé de l'afficher dans une nouvelle fenêtre.

La nouvelle fenêtre affiche PDF contrôles uniquement enter image description here)

Avez-vous une idée de la raison pour laquelle le contenu du fichier pdf n'est pas affiché?

CODE:

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

Vous devez définir responseType sur arraybuffer si vous souhaitez créer une blob à partir de vos données de réponse:

$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);
});

plus d'informations: Sending_and_Receiving_Binary_Data

88
michael

Si vous définissez { responseType: 'blob' }, inutile de créer vous-même Blob. Vous pouvez simplement créer une URL basée sur le contenu de la réponse:

$http({
    url: "...",
    method: "POST",
    responseType: "blob"
}).then(function(response) {
    var fileURL = URL.createObjectURL(response.data);
    window.open(fileURL);
});
14
Alena Kastsiukavets

J'utilise AngularJS v1.3.4

HTML: 

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

Contrôleur JS: 

'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();
            });
        };
});

Services JS: 

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

Services Web Java 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;
    }
8
sgrillon

Je me bats depuis des jours, enfin la solution qui a fonctionné pour moi est donnée ci-dessous. Je devais faire le window.print() pour PDF dans la nouvelle fenêtre doit fonctionner.

 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();

Quelques notes sur le chargement PDF et l’impression dans une nouvelle fenêtre.

  • Le chargement de pdf dans une nouvelle fenêtre via un iframe fonctionnera, mais l’impression ne fonctionnera pas si l’URL est une URL externe.
  • Les popups du navigateur doivent être autorisés, alors seulement cela fonctionnera.
  • Si vous essayez de charger iframe à partir d'une URL externe et essayez window.print(), vous obtiendrez une impression vide ou des éléments excluant iframe. Mais vous pouvez déclencher une impression manuellement, ce qui fonctionnera.
0
Krishnadas PC

J'ai fini par télécharger mon pdf en utilisant le code ci-dessous

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();

}

0
Thakhani Tharage