Due to recent updates in Chrome version >=60, the ability to view PDF files through top-frame navigation options such as
<A HREF=”data:…”>
window.open(“data:…”)
window.location = “data:…”
has been blocked by Google. Discussions regarding this can be found on Google Groups. The issue now is how to display PDFs on the web without forcing them to download. Previously, I used window.open to view PDF data like this:
dataFactory.getPDFData(id, authToken)
.then(function(res) {
window.open("data:application/pdf," + escape(res.data));
},function(error){
//Some Code
}).finally(function(){
//Some Code
});
In the above code snippet, I fetched and displayed PDF data from the server. However, since Chrome now blocks window.open, I followed suggestions from an expert on here to use <iframe> for displaying PDF data, but it's not working as expected. It consistently shows "Failed to Load PDF Data" message.
The updated JavaScript code using <iframe> is as follows:
dataFactory.getPDFData(id, authToken)
.then(function(res) {
$scope.pdfData = res.data;
},function(error){
//Some Code
}).finally(function(){
//Some Code
});
And the corresponding HTML looks like this:
<iframe src="data:application/pdf;base64,pdfData" height="100%" width="100%"></iframe>
I am struggling to bring back the original functionality of viewing PDFs. I have searched other stack questions but haven't had any success yet. It seems like there might be a mistake or missing detail in the iframe implementation that I need to fix.