CODEWITHSUNDEEP
javascripthtmliframemobileblob
Geo Daz
Geo Daz

Reputation: 184

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

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]

Upvotes: 7

Views: 6223

Answers (2)

K J
K J

Reputation: 11731

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.

Upvotes: 1

David Bradshaw
David Bradshaw

Reputation: 13077

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.

Upvotes: 1

Related Questions