HTML pdf not showing in safari - javascript

i have a php page which shows a list of invoices. clicking on any of those invoices shows its pdf file. When the user clicks on any invoice, the src of the embed tag is changed by jQuery to the appropriate pdf file.
Works very well, but strangely enough it behaves differently in safari then in firefox for instance.
In firefox i can just click on an invoice -> the pdf shows. if i right after that click on another invoice and after that click on the first invoice again -> the pdf shows again.
Safari: If i re-click an invoice, i get a blank pdf (embed tag). And downloading of that pdf results in a 0kb file.
Seems to only happen in safari.
Has anyone encountered this before and maybe know a solution to this issue?
i have googled and tried a lot but it's still not working.
Html:
<div class="card-body">
<embed id="invoice_scan" src="" type="application/pdf" width="100%" height="400px" />
</div>
jQuery:
$('#invoice_scan').attr('src', '/docs/pdf_file1.pdf );


I had this issue showing a pdf in an object tag using angular.
The fix was to remove type="application/pdf" from the object tag.


I have a similar issue with Safari 15.5 with <object> tag. As soon as PDF gets loaded, it was crashing the browser. I removed type="application\pdf" conditionally for safari. That seems to be working.
Alternate option would be use iFrame for PDF's.
Why is this code failing on MacOS Big Sur Safari?

Related

embed and iframe doesnt view a pdf file

Im trying to view a pdf file using html. But whenever i try to open it, the browser download the file instead of viewing it.. I dont know whats wrong. I tried embed and iframe and both results the same thing. It downloads the file.
Thing is when i see other websites, it works. so i know for sure its not because extension problems. checked the pdf viewer extension and its on.
Here is my code. how is this happening??
<div class="row">
<div class="col-sm">
<p><span class="fw-bold">DOKUMEN : </span></p>
<iframe src="http://127.0.0.1:8000/docs/testpdf.pdf" width="100%" height="100%" style="border: none;"></iframe>
<embed src="http://127.0.0.1:8000/docs/testpdf.pdf" type="application/pdf" width="100%" height="600px" />
</div>
</div>

Some browsers like IE dosent have the proper plug-in to render embedded PDF. You better work with browsers like firefox or chrome. Here is a page that answered your question before.
downloading PDF embedded file instead of viewing it

HTML PDF embedding blocks controls in html modal

I'm using <embed src="<%= path %>" type="application/pdf" /> to preview pdf file on the page. It works great until I open my custom modal window with position fixed covering pdf preview area. Modal window has buttons and I cannot click on any. It seems modal is covered by something invisible. I tried to play around with z-indexes but it didn't work out. Embedding with tag <object data="" type="application/pdf"></object> caused the same problem - I cannot click on the button.
The main problem of the issue is that it can be reproduced at particular computers in spite of the same Chrome version (version: 69.0.3497.100 64-bits) Did anyone face such pdf rendering issues in Chrome?
Here is the link to test this issue https://fatuk.github.io/test-pdf-render

Anchor tags in PDF are not clickable in firefox and safari

I have an iframe which loads PDF. It loads PDF successfully in all browsers. But anchor tags inside those PDFs are not clickable in Firefox and safari.
In works fine in google chrome.
Is there any way to solve this issue?

It looks working when used Embeddable Google Document Viewer (http://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html).
Working:
<iframe src="https://docs.google.com/gview?url=http://www.realtimecases.com/system/cases_offereds/media/000/000/009/original/Public_Relations_Communications_Overview.pdf?1453309175&embedded=true" width="100%" height="900"></iframe>

Not able to display pdf in browser without toolbar

I am using this code to display pdf in browser
<embed src="D:\Books\Git\Scott.pdf#toolbar=0&scrollbar=0&statusbar=0&navpanes=0" width="500" height="500">
I want only simple pdf in browser to display without giving any option like download, print to the user. This code is not working for me. Please help

PDF embed not working in IE11, but it WORKS when edit the HTML in DOM Explorer (F12 - debug tool of IE)

Here is the Fiddle link "http://jsfiddle.net/Z99gr/2/" which similar to my code, I have created a Image slider using Galleriffic. In the image slider along with images I am showing PDF embedded.
The Fiddle link and my image slider works fine in Chrome and Firefox, but in IE I its not loading. I am testing in IE 11
In IE, when I open the "DOM Explorer (F12 - debug tool of IE)" and selects the <div> which contains the <embed> tag for PDF, it show below code.
<div id="pdf">
<embed width="500" height="375" src="https://www.adobe.com/products/pdfjobready/pdfs/pdftraag.pdf" type="application/pdf">
</embed>
</div>
And when I just edit anything in this HTML TAG within the "DOM Explorer (F12 - debug tool of IE)", it loads the PDF.
This is a very weird nature of this issue.
I don't understand how to fix this issue.
Please suggest!
I am getting below results inm IE11:
Where as the results should be something like this (its a screencapture from Chrome):

I was now able to embed the PDF file IE using "<iframe>" tag.
I replaced "<object>" and "<embed>" tag with <iframe> and its working fine now with all 3 browsers, Firefox, Chrome and IE.
There are 2 ways of embedding PDF in IE.
1st way: Call PDF directly in <iframe>
Below is the updated code:
<div id="pdf">
<iframe src="https://www.adobe.com/products/pdfjobready/pdfs/pdftraag.pdf" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
<p>It appears your web browser doesn't support iframes.</p>
</iframe>
</div>
2nd way: if the browser doesn't have PDF reader the u can call an HTML in page <iframe> which contains <object> tag .
Below is the code for 2nd option
<div id="pdf">
<iframe src="pdf.html" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
<p>It appears your web browser doesn't support iframes.</p>
</iframe>
</div>
Code for "pdf.html"
<body>
<object data="lorem.pdf" type="application/pdf">
<p>It appears you don't have Adobe Reader or PDF support in this web browser. Click here to download the PDF. Or click here to install Adobe Reader.</p>
<embed src="lorem.pdf" type="application/pdf" />
</object>
</body>
This worked for me!!!
Here is the WORKING Fiddle : http://jsfiddle.net/Z99gr/9/
Hope it will be helpful for others in future!

To anyone that has this issues in the future, you have to turn off compatibility mode for intranet sites.
Tools > Compatibility View Settings > Uncheck "Display Intranet sites in Compatibility View"
Developer tools overrides the compatibility view and displays the page in IE11. Compatibility makes the page display as IE5

Found a fix that worked for me...
I was using IE11, Win7 enterprise, and latest version of adobe reader XI which I had just updated.
The website I had a problem with, was using <object></object> to do the imbedded PDF (it was a CQ5 component, if that matters).
I didn't have to modify the html -- this is what i did:
1) Go to internet options in IE
2) Go to Advanced
3) Click "Reset...". I also clicked "delete personal settings" since I mainly use IE for testing web development so there's no much there...
4) Requires computer restart, so do that.
5) When you are back in, open IE11.
6) It will prompt you if you want to use it's default settings/accelerators. I said YES (i usually always said NO to this, in the past).
7) Open site, and enjoy success.
It also fixed this example site for me, so I know something good happened.
http://acroeng.adobe.com/Test_Files/browser_tests/embedded/embed2.html
I tried doing the "TabProcGrowth" fix in the registry (some other solution i found earlier), but that didn't work either. Only resetting IE to scratch worked for me.

Solution: Install adobe acrobat reader.
It appears to me that IE uses whatever reader is installed to view embedded or natively opened PDFs, whereas chrome, edge and other modern browsers comes with a PDF viewer of sorts.

Categories

Resources