web-dev-qa-db-ja.com

角度付きアプリでBLOB（.pdf）を表示する

私は$http.postレスポンスからBLOBとして取得しているPDFファイルを表示しようとしています。 pdfは、例えば<embed src>を使用してアプリ内に表示する必要があります。

私はいくつかのスタックポストに出くわしましたが、どういうわけか私の例はうまくいかないようです。

JS：

によると このドキュメント 、私は続けてみました...

$http.post('/postUrlHere',{myParams}).success(function (response) {
 var file = new Blob([response], {type: 'application/pdf'});
 var fileURL = URL.createObjectURL(file);
 $scope.content = fileURL;
});

今私が理解していることから、fileURLはブログが参照として使用できる一時的なURLを作成します。

HTML：

<embed src="{{content}}" width="200" height="200"></embed>

Angularでこれを処理する方法がわかりません。理想的な状況は、（1）スコープに割り当てることです。（2）ブロブをPDFに '準備/再構築'する（3）<embed>を使ってHTMLに渡します。アプリ内で表示したいからです。

私は一日以上研究していますが、どういうわけかこれがAngularでどのように機能するのか理解できないようです…そしてpdfビューアライブラリがないことを仮定しましょう。

angularjspdfblob
99
Simo D'lo Mafuxwana

まず最初にresponseTypeをarraybufferに設定する必要があります。データのBLOBを作成したい場合はこれが必要です。 Sending_and_Receiving_Binary_Data を参照してください。だからあなたのコードはこのようになります：

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

次の部分は、角の信頼をあなたのURLにするために $ sce サービスを使う必要があることです。これはこのようにして行うことができます。

$scope.content = $sce.trustAsResourceUrl(fileURL);

$ sce サービスを注入することを忘れないでください。

これがすべて終わったら、あなたのpdfを埋め込むことができます。

<embed ng-src="{{content}}" style="width:200px;height:200px;"></embed>
199
michael

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

HTML：

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

JSコントローラー：

'use strict';
angular.module('xxxxxxxxApp')
    .controller('xxxxController', function ($scope, xxxxServicePDF) {
        $scope.downloadPdf = function () {
            var fileName = "test.pdf";
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display: none";
            xxxxServicePDF.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('xxxxServicePDF', 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;
    }
31
sgrillon

マイケルの提案は私にとって魅力的なように働きます:)あなたが$ http.postを$ http.getで置き換えるなら、.getメソッドは3の代わりに2つのパラメータを受け入れることを覚えていてください...これは私の時間を無駄にするところです...;）

コントローラ：

$http.get('/getdoc/' + $stateParams.id,     
{responseType:'arraybuffer'})
  .success(function (response) {
     var file = new Blob([(response)], {type: 'application/pdf'});
     var fileURL = URL.createObjectURL(file);
     $scope.content = $sce.trustAsResourceUrl(fileURL);
});

ビュー：

<object ng-show="content" data="{{content}}" type="application/pdf" style="width: 100%; height: 400px;"></object>
20
Jan Tchärmän

Operaブラウザで "window.URL"を使用すると "undefined"になるため、問題に直面しました。また、window.URLを使用すると、PDF文書はInternet ExplorerおよびMicrosoft Edgeで開かれることはありませんでした（これは永遠に待たされることになります）。私は、IE、Edge、Firefox、Chrome、およびOperaで動作する次のソリューションを思いついた（Safariではテストされていない）。

$http.post(postUrl, data, {responseType: 'arraybuffer'})
.success(success).error(failed);

function success(data) {
   openPDF(data.data, "myPDFdoc.pdf");
};

function failed(error) {...};

function openPDF(resData, fileName) {
    var ieEDGE = navigator.userAgent.match(/Edge/g);
    var ie = navigator.userAgent.match(/.NET/g); // IE 11+
    var oldIE = navigator.userAgent.match(/MSIE/g); 

    var blob = new window.Blob([resData], { type: 'application/pdf' });

    if (ie || oldIE || ieEDGE) {
       window.navigator.msSaveBlob(blob, fileName);
    }
    else {
       var reader = new window.FileReader();
       reader.onloadend = function () {
          window.location.href = reader.result;
       };
       reader.readAsDataURL(blob);
    }
}

それが助けになったかどうか私に知らせて！ :)

9
Manuel Hernandez

Angularから作成されたリクエストにresponseTypeを追加することは確かに解決策ですが、私にとってはresponseType toblobに設定するまでうまくいきませんでした。 、arrayBufferではなく。コードは自明です：

    $http({
            method : 'GET',
            url : 'api/paperAttachments/download/' + id,
            responseType: "blob"
        }).then(function successCallback(response) {
            console.log(response);
             var blob = new Blob([response.data]);
             FileSaver.saveAs(blob, getFileNameFromHttpResponse(response));
        }, function errorCallback(response) {   
        });
6
ancab

私はpdfと画像をダウンロードしようとしている過去2、3日の間苦労しました、私がダウンロードできたのは単純なテキストファイルだけでした。

質問の大部分は同じ構成要素を持っていますが、それが機能するように正しい順序を理解するのに時間がかかりました。

@Nikolay Melnikovありがとう、この質問に対するあなたのコメント/返信はそれがうまくいった理由です。

一言で言えば、これが私のAngular JSサービスバックエンドコールです。

  getDownloadUrl(fileID){
    //
    //Get the download url of the file
    let fullPath = this.paths.downloadServerURL + fileId;
    //
    // return the file as arraybuffer 
    return this.$http.get(fullPath, {
      headers: {
        'Authorization': 'Bearer ' + this.sessionService.getToken()
      },
      responseType: 'arraybuffer'
    });
  }

私のコントローラーから：

downloadFile(){
   myService.getDownloadUrl(idOfTheFile).then( (response) => {
      //Create a new blob object
      let myBlobObject=new Blob([response.data],{ type:'application/pdf'});

      //Ideally the mime type can change based on the file extension
      //let myBlobObject=new Blob([response.data],{ type: mimeType});

      var url = window.URL || window.webkitURL
      var fileURL = url.createObjectURL(myBlobObject);
      var downloadLink = angular.element('<a></a>');
      downloadLink.attr('href',fileURL);
      downloadLink.attr('download',this.myFilesObj[documentId].name);
      downloadLink.attr('target','_self');
      downloadLink[0].click();//call click function
      url.revokeObjectURL(fileURL);//revoke the object from URL
    });
}
0
Javier Carbajal