it-swarm.com.de

PDF Blob - Popup-Fenster zeigt keinen Inhalt an

Ich habe in den letzten Tagen an diesem Problem gearbeitet. Ich hatte kein Glück beim Versuch, den Stream im <embed src>-Tag anzuzeigen, und habe ihn gerade in einem neuen Fenster angezeigt.

Das neue Fenster zeigt PDF nur Steuerelemente enter image description here)

Irgendeine Idee, warum der Inhalt des pdf nicht angezeigt wird?

CODE:

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

Sie müssen responseType auf arraybuffer setzen, wenn Sie aus Ihren Antwortdaten eine blob erstellen möchten:

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

weitere Informationen: Senden_und_Receiving_Binary_Data

88
michael

Wenn Sie { responseType: 'blob' } einstellen, müssen Sie Blob nicht selbst erstellen. Sie können einfach URLs mit Antwortinhalten erstellen:

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

Ich verwende AngularJS v1.3.4

HTML:

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

JS-Controller:

'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-Dienste:

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

Java REST Web Services - 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

Ich habe seit Tagen Schwierigkeiten, endlich die Lösung zu finden, die für mich funktioniert hat. Ich musste die window.print() für PDF in neuem Fenster machen, muss funktionieren.

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

Einige Hinweise zum Laden von PDF und zum Drucken in einem neuen Fenster.

  • Das Laden von pdf in einem neuen Fenster über einen iframe wird funktionieren, aber der Druck funktioniert nicht, wenn es sich bei der URL um eine externe URL handelt.
  • Browser-Popups müssen erlaubt sein, dann funktioniert es nur.
  • Wenn Sie versuchen, iframe von einer externen URL zu laden und window.print() zu versuchen, erhalten Sie einen leeren Ausdruck oder Elemente, die iframe ausschließen. Sie können den Druck jedoch manuell auslösen, was funktionieren wird.
0
Krishnadas PC

Am Ende habe ich nur mein PDF mit dem folgenden Code heruntergeladen

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

das Problem ist, dass es nicht in das richtige Format konvertiert wird. Verwenden Sie die Funktion "printPreview (binaryPDFData)", um den Druckvorschau-Dialog für binäre PDF-Daten zu erhalten. Sie können einen Skriptteil kommentieren, wenn das Druckdialogfeld nicht geöffnet werden soll.

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;
};
0
Manoj