HTML set a blob (PDF) url in an iframe doesn't work on mobile

Question

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]

Suffragette

I've had success with mozilla's pdf.js just works everywhere for me – Carving

Second vote for pdf.js – Diaz

@Carving you should post an answer, so you can get credit for this bounty - you were the first to suggest pdf.js. – Kathe

@Kathe - nah, all good. I let others handle simple answers :p – Carving

Answer 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.

Diaz

Answer 2

Chrome Desktop uses a bundled Foxit collaborative true PDF Viewer plug-in. where as other lighter external viewers or lighter .js pdf lookalike image/html viewers as used in Firefox may work if external to Chrome or web side embedded as a service. Google Docs use a lighter weight js hybrid viewer like Mozilla PDF.js

From OP link

Alex Russell
Works at Google Chrome
, former Senior Software Engineer at Google
Author has 89 answers and 581.6K answer views8y

What is the difference between Chrome and Chrome for Android?
They're built from the same codebase, so it'd be wrong to say they're very different. That said, there has historically been some divergence related to things that can more easily consume memory and CPU, leading to chrome-for-android to start fewer processes, make do without plugins, etc. But web content should, for the most part, Just Work (TM) on Chrome-for-Android if it works on Chrome.

Selfdeception