Chrome blocking PDF views on web redirection to new tab via Top-Frame Navigations

As per the Chrome version >=60 the PDF view functionality by any top-frame navigations options like

<A HREF=”data:…”>
window.open(“data:…”)
window.location = “data:…”

has been blocked by Google for which the discussion can be found at Google Groups. Now the problem is how to display the PDF on web without explicitly or forcibly making PDF to download. My old code looked as below via window.open to view the PDF data

dataFactory.getPDFData(id, authToken)
.then(function(res) {
    window.open("data:application/pdf," + escape(res.data));
},function(error){
    //Some Code
}).finally(function(){
    //Some Code
});

In above I extract the PDF data from server and display it. But since window.open is blocked by Chrome and as suggested by one of the expert over here to use <iframe> to open the PDF data and I tried but it's not working. It always says Failed to Load PDF Data as below

The updated JS code for the <iframe> looks as below:

dataFactory.getPDFData(id, authToken)
.then(function(res) {
    $scope.pdfData = res.data;
},function(error){
    //Some Code
}).finally(function(){
    //Some Code
});

And the HTML looks as below:

<iframe src="data:application/pdf;base64,pdfData" height="100%" width="100%"></iframe>

How can I proceed and bring back the original PDF view functionality? I searched over other stack questions but out of luck on how to resolve this. May be I did something wrong or missed something with the iframe code but it's not working out.