[解決済み] AngularJSアプリでブロブ(.pdf)を表示する方法

質問

からの blob として取得した pdf ファイルを表示しようとしています。 $http.post というレスポンスが返ってきます。この 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) blobをpdfに「準備/再構築」する。 (3) を使ってHTMLに渡します。 <embed> を使ってHTMLに渡します。

もう1日以上調べているのですが、なぜかAngularでこれがどう動くのか理解できないようです...。そして、そこにあるpdfビューアライブラリは選択肢になかったと仮定しましょう。

どのように解決するのですか？

まず最初に responseType を arraybuffer . これは、データのブロブを作成する場合に必要です。参照 バイナリデータの送信と受信 . ですから、あなたのコードは次のようになります。

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

次に、この部分を $sce サービスを使用して、アンギュラーにあなたのURLを信頼させることです。これは、この方法で行うことができます。

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

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

これですべて完了したら、pdfを埋め込むことができます。

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