I use an API to get generated PDF or stored PDF on private directory (only accessible if the user is logged in).
My endpoint send a http response with Content-Type : application/pdf.
I receive it on React.js app that do URL.createObjectURL(blob) from response.blob() using fetch.
When I push it in an iframe <iframe src={blobUrl} type="application/pdf"></iframe>, it works on desktop browsers but not on mobile browsers.
It doesn't even work on chrome inspector in responsive mode.
But, when I download it with that code, it works on mobile :
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style = 'display: none';
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
And, when I do console.log(blobUrl), the url is well on https : blob:https://{domain}.com/00457da4-a423-44ea-a26b-a65f7ec17e42
Did somebody know how to display PDF in an iframe for a preview on mobile ?
[EDIT] it surprisingly works on safari mobile (IOS)
[EDIT 2] I inspected on chrome desktop and I found this :
<embed type="application/x-google-chrome-pdf" src="chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/602420b2-c69b-486d-99f9-ece26af579be" original-url="blob:https://{domain}.com/c6c6af4f-554d-4c65-8ab3-1a2de6c39bd9" javascript="allow">
So I thought the ability to view PDF comme from a "shadow" extension in chrome desktop and thats's why we can't see it on mobile. Chrome mobile hasn't extension compatibility.
Confirmation here : https://www.quora.com/Why-does-Chrome-on-Android-not-open-PDF-files-like-Chrome-on-Windows-Linux-can
// screenshot has been lost in the edit
[![enter image description here][1]][1]
I expect you’re running into some weird security issue. Rather than use an iFrame, you might instead try using viewer.js or pdf.js in your main page.