web-dev-qa-db-ja.com

PDF Blob-コンテンツを表示しないポップアップウィンドウ

私はここ数日間 この問題 に取り組んでいます。 <embed src>タグでストリームを表示しようとしても運がなく、新しいウィンドウで表示しようとしました。

新しいウィンドウには、PDFコントロールのみが表示されます enter image description here）

PDFの内容が表示されない理由は何ですか？

コード：

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

応答データからresponseTypeを作成する場合は、arraybufferをblobに設定する必要があります。

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

詳細： Sending_and_Receiving_Binary_Data

95
michael

{ responseType: 'blob' }を設定した場合、自分でBlobを作成する必要はありません。応答コンテンツに基づいてURLを簡単に作成できます。

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

私はAngularJS v1.3.4を使用しています

HTML：

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

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

JSサービス：

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サービス-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

私は数日間苦労してきましたが、最終的に私のために働いた解決策を以下に示します。新しいウィンドウでPDFのwindow.print()を機能させる必要がありました。

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

PDFの読み込みと新しいウィンドウでの印刷に関する注意事項。

  • Iframeを介して新しいウィンドウにPDFをロードすることはできますが、URLが外部URLの場合、印刷は機能しません。
  • ブラウザのポップアップを許可する必要があり、それのみが機能します。
  • 外部URLからiframeをロードしてwindow.print()を試みると、空の印刷またはiframeを除外する要素が得られます。ただし、手動で印刷をトリガーすることもできます。
0
Krishnadas PC

以下のコードを使用してpdfをダウンロードするだけになりました

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

問題は、適切な形式に変換されないことです。関数"printPreview（binaryPDFData）"を使用して、バイナリPDFデータの印刷プレビューダイアログを取得します。印刷ダイアログを開きたくない場合は、スクリプト部分をコメントできます。

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