The following code has been used to render the pdf in browser. It works fine in chrome browser but it doesn't work in Safari browser in ipad. It just renders the first page of pdf. Another observation is the first page is converted into image (as per the console)
<embed src={props.filePath} height="900" width="100%" type='application/pdf'/>
Related
I am pulling a 3rd party bookings system on a WordPress page. I used iFrame initially and it works fine on chrome browser and on Android phones, but it doesn't work on Safari (iPhone as well as mac). I tried as well as
This is what I currently have on my page:
<div><object style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;" data="https://www.ultimoht.net.au/webappointment/PatientDetails.aspx?DentalOfficeID=3614545" type="text/html" width="100%" height="800px"> </object></div>
The problem with safari is, it won't let user select a date on the page. May be the problem is the touch event.
When I open data link directly on the safari browser it works fine, it only causes an issue when it is inside an iframe or embed or object.
As far as I can see it works for me on both my mac and iPhone with no problem running Safari 12 on mac. The first time it took a few clicks on mobile but it is working.
I need to display an pdf file in iframe tag using JavaScript
Here is my iframe
<iframe id="iframeFile" name="iframeFile" src="" width="100%" height="100%" title="File" scrolling="auto" style="position:relative;"></iframe>
$('#iframeFile').attr('src', '');
pdf is displaying in chrome and firefox. But in internet explorer it shows white blank screen.
Does it show the option to download the file when you try to open it in IE 11?
Try to check the Adobe Shockwave add on is installed and enabled in Internet Explorer.
If it is not available or disabled than IE can show you the blank screen and prompt you to download the PDF file to view it locally.
If it is not available in your IE add on list than you can download it from Adobe website.
Adobe Shockwave Player
I am using an IFrame to display a PDF which is sourced from a Base64 byte string. My frame tag looks like the below (I'm using Angular).
<iframe id="pdfV" type="application/pdf" [src]="currentBase64"></iframe>
The currentBase64 variable starts with data:application/pdf;base64, and has been appropriately sanitized. On any browser it works great. However, when I am in responsive mode in Chrome, or viewing on a phone, it doesn't display the frame for some reason. The only other example I can provide is the below
http://pdfmake.org/playground.html
This playground is doing the same thing I am. Passing Base64 to IFrame to display PDF. Notice is works great until you put the screen into responsive mode -- at that point it stops refreshing.
I believe it has to do with the Base64 part of it all because when I change my frame tag to something simple such as the below it works great, even on mobile devices.
<iframe [src]="'https://www.google.com'"></iframe>
Any thoughts or solutions?
In my application I show a pdf embedded in my browser page in this way:
<div>
<object ng-if="vm.ShowPanel" data="{{'data:application/pdf;base64,'+ vm.URL}}"
style="width:100%; height:99%; overflow-y:hidden" type="application/pdf"></object>
</div>
This approach works perfectly in Chrome but as known not in Internet Explorer.
Is there a workaround to perform that action in IE?
I was thinking about saving the file locally and then read it in my object tag.
Could it work?
thanks
I have the following code to embed a pdf file on my site:
´<object data="path_to_pdfFile.pdf" type="application/pdf" width="800" height="500">
<p>Your browser doesn't support have a PDF Plugin. Instead you can Click here to download it</p>
</object>´
..It works just fine on desktop browsers (firefox, chrome, iE and even on Safari) but it happens when i go to my smartphone, it doesn't display the content of my pdf file but shows the "This Plugins is not supported" instead or something like that. Sometimes it doesn't even show anything but a gray frame.
Last time i heard browsers are not using nothing with adobe but i'm not sure what to do todisplay my content on mobiles and tablets.