アプリに応じてIframeでダウンロードまたはレンダリングAngular JSのロジック

Question

私はpdfファイルをダウンロードし、そこからブロブを作成する角型JSアプリケーションを持っています。このように：

vm.fileData = new ApiDownloadFile({fileId: 1}); 
    return vm.fileData.$query() 
    .then(function(response) { 

     try{ 

     console.log("Try..." + new Date()); 
     $log.log(response); 
     var arrayBufferView = new Uint8Array(response.Body.data); 
     $log.log(arrayBufferView); 
     var file = new Blob([arrayBufferView], {type: response.ContentType}); 
     var link = document.createElement('a'); 
     link.href = window.URL.createObjectURL(file); 
     link.download = response.fileName; 
     link.click(); 
     console.log("After..." + new Date()); 
     console.log("GENERATED LINK: "+link.href); 
     //PDFObject.embed(link.href, "#my-container"); 
     } 
     catch(e) { 

     console.log("Execption..."); 
     // TypeError old chrome and FF 
     window.BlobBuilder = window.BlobBuilder || 
      window.WebKitBlobBuilder || 
      window.MozBlobBuilder || 
      window.MSBlobBuilder; 

     if (e.name == 'TypeError' && window.BlobBuilder) { 
      var bb = new BlobBuilder(); 
      bb.append(response.Body.data); 
      var file = bb.getBlob("image/jpeg"); 
      var link = document.createElement('a'); 
      link.href = window.URL.createObjectURL(file); 

      link.download = "1.jpg"; 
      //link.click(); 

     } 
     else if (e.name == "InvalidStateError") { 
      // InvalidStateError (tested on FF13 WinXP) 
      var jpeg = new Blob(response.Body.data, {type: "image/jpeg"}); 
     } 
     else { 
      // We're screwed, blob constructor unsupported entirely 
     } 

     } 
    },function(err) { 
     $log.log(err); 
    }); 
}; 

「a」要素を作成してクリックすると、ファイルを簡単にドローロードできます。しかし、私はそれをブラウザ上でダウンロードしたり、私の見解にあるIframe上でレンダリングすることができるようにしたいと考えています。

if download == true: 
    create the <a> element and click it to download file. 
else: 
    render the pdf on an iframe and don´t download on browser. 

しかしインラインフレーム上でレンダリングされるブロブURLを取得することができません - 私：ロジックは次のようなものでなければなりません。私はPDFObjectを使ってPDFを視覚化しています。誰も私がこれを達成するのを手助けできますか

Answer 1

あなたのコントローラに続いて、あなたのページに

<iframe ng-if="IframeManager.Url" ng-src="{{ IframeManager.Url }}"></iframe> 

これを行うには、ファイルを表示したいのであれば、あなたのプレビュールーチンブロブ変換を行うと、URL

を取得

$scope.Download = true; 

$scope.IframeManager = { 
    Show: function (url) { 
     $scope.IframeManager.Url = url; 
     }, 
    Hide: function() { 
     $scope.IframeManager.Url = null; 
    } 
}; 

を追加します

if ($scope.Download) { 
    var link = document.createElement('a'); 
    link.href = window.URL.createObjectURL(file); 
    link.download = response.fileName; 
    link.click(); 
    console.log("After..." + new Date()); 
    console.log("GENERATED LINK: "+link.href); 
} else { 
    $scope.IframeManager.Show(window.URL.createObjectURL(file)); 
}