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

admin管理员组

文章数量:1022569

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}/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}/c6c6af4f-554d-4c65-8ab3-1a2de6c39bd9" javascript="allow">

So I thought the ability to view PDF me from a "shadow" extension in chrome desktop and thats's why we can't see it on mobile. Chrome mobile hasn't extension patibility.

Confirmation here :

// screenshot has been lost in the edit

[![enter image description here][1]][1]

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}./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}./c6c6af4f-554d-4c65-8ab3-1a2de6c39bd9" javascript="allow">

So I thought the ability to view PDF me from a "shadow" extension in chrome desktop and thats's why we can't see it on mobile. Chrome mobile hasn't extension patibility.

Confirmation here : https://www.quora./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]

• javascript
• html
• iframe
• mobile
• blob

Share Improve this question Follow edited Nov 23, 2022 at 10:42 Geo Daz asked May 6, 2022 at 9:23 Geo DazGeo Daz 18422 silver badges1414 bronze badges 4

• 3 I've had success with mozilla's pdf.js just works everywhere for me – Bravo Commented May 6, 2022 at 10:06
• Second vote for pdf.js – David Bradshaw Commented Nov 20, 2022 at 7:56
• @Bravo you should post an answer, so you can get credit for this bounty - you were the first to suggest pdf.js. – Shmack Commented Nov 23, 2022 at 6:25
• @Shmack - nah, all good. I let others handle simple answers :p – Bravo Commented Dec 16, 2022 at 3:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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.

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}/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}/c6c6af4f-554d-4c65-8ab3-1a2de6c39bd9" javascript="allow">

So I thought the ability to view PDF me from a "shadow" extension in chrome desktop and thats's why we can't see it on mobile. Chrome mobile hasn't extension patibility.

Confirmation here :

// screenshot has been lost in the edit

[![enter image description here][1]][1]

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}./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}./c6c6af4f-554d-4c65-8ab3-1a2de6c39bd9" javascript="allow">

So I thought the ability to view PDF me from a "shadow" extension in chrome desktop and thats's why we can't see it on mobile. Chrome mobile hasn't extension patibility.

Confirmation here : https://www.quora./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]

• javascript
• html
• iframe
• mobile
• blob

Share Improve this question Follow edited Nov 23, 2022 at 10:42 Geo Daz asked May 6, 2022 at 9:23 Geo DazGeo Daz 18422 silver badges1414 bronze badges 4

• 3 I've had success with mozilla's pdf.js just works everywhere for me – Bravo Commented May 6, 2022 at 10:06
• Second vote for pdf.js – David Bradshaw Commented Nov 20, 2022 at 7:56
• @Bravo you should post an answer, so you can get credit for this bounty - you were the first to suggest pdf.js. – Shmack Commented Nov 23, 2022 at 6:25
• @Shmack - nah, all good. I let others handle simple answers :p – Bravo Commented Dec 16, 2022 at 3:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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.

本文标签： javascriptHTML set a blob (PDF) url in an iframe doesn39t work on mobileStack Overflow