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
Related
I need to embed a PDF file in an HTML page for the users to see it on every major device.
Most of the approaches work fine on desktop but they start to show problems on iPad devices. The PDFs are no longer scrollable if placed inside an iframe or embed tag.
I used the following techniques to overcome the problem:
1) Using pdf-image for node and converting the PDF to images and then sliding them in a div.
The problem in this approach is that the image quality gets degraded and is not suitable for viewing on Web.
2) Using PDF.js by Mozilla
It works fine on every device but it makes the page extremely slow and unresponsive on iPad
3) Using Google PDF viewer
<iframe src="https://docs.google.com/viewer?url=http://public-Url-of-pdf.pdf&embedded=true" frameborder="0" height="500px" width="100%"></iframe>
The problem with this approach is that I need to make my PDFs publicly available which I don't want to do for security reasons.
None of the above method is working for me. Is there any solution available to embed PDF in a page which works on iPad also.
One of my colleagues told me about using LibreOffice(open office) headless to embed PDFs in my page but I cannot find any documentation about it usage?
Can anyone please help? :(
Thanks in advance!
<embed src="http://example.com/the.pdf" width="500" height="375" />
Try above one for pure HTML. But another option is if you'd like to use with javascript, try Pdf.js by mozilla. https://github.com/mozilla/pdf.js
I think the simplest way to embed a PDF into a web page is to use the object tag:
<object data="assets/test.pdf" type="application/pdf" width="100%" height="800px">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="assets/test.pdf">click here to
download the PDF file.</a></p>
</object>
What the code above will do is:
- If the user browsing your site has a PDF viewer plugin (which is included by default in some browsers) it will open the PDF in the browser:
- If the user does not have a PDF viewer plugin, they will be presented with a link to download the PDF and view it on their site.
I spent a lot of time with this issue and finally reached a solution for embeeding PDFs in a HTML files, also inspired by this post. You mentioned that "converting the PDF to images and then sliding them in a div" was not satisfactory due to quality problems. Here I experienced the same since the images were blurry.
However, I tried converting the images to SVG instead of PNG and the situation was a different one: The fonts were crystal-clear when embedding the image like below:
<object type="image/svg+xml" data="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg">
<!-- Your fall back here -->
<img src="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg" />
</object>
You can directly paste that snippet into a HTML file and you will see the result. For producing this example I used a ramdom PDF from ArXiv.org and converted it to SVG using an online converter.
There are also free command line tools like pdf2svg or commerical APIs like Aspose and probably it is worth examining which approach gives the best results.
You can easily build a slider which is loading the SVG images dynamically and it is even possible to scale them to different viewports due to the vector character of the SVG images. The approach so far worked for all PDFs I tried but probably it is recommendable to implement a fallback solution still using PNGs.
I want to open the pdf file in an iframe. I am using following code:
<a class="iframeLink" href="https://something.com/HTC_One_XL_User_Guide.pdf"> User guide </a>
It is opening fine in Firefox, but it is not opening in IE8.
Does anyone know how to make it work also for IE ?
Using an iframe to "render" a PDF will not work on all browsers; it depends on how the browser handles PDF files. Some browsers (such as Firefox and Chrome) have a built-in PDF rendered which allows them to display the PDF inline where as some older browsers (perhaps older versions of IE attempt to download the file instead).
Instead, I recommend checking out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.
In your HTML, you could set up a div to display the PDFs:
<div id="pdfRenderer"></div>
Then, you can have Javascript code to embed a PDF in that div:
var pdf = new PDFObject({
url: "https://something.com/HTC_One_XL_User_Guide.pdf",
id: "pdfRendered",
pdfOpenParams: {
view: "FitH"
}
}).embed("pdfRenderer");
This is the code to link an HTTP(S) accessible PDF from an <iframe>:
<iframe src="https://research.google.com/pubs/archive/44678.pdf"
width="800" height="600">
Fiddle: http://jsfiddle.net/cEuZ3/1545/
EDIT: and you can use Javascript, from the <a> tag (onclick event) to set iFrame' SRC attribute at run-time...
EDIT 2: Apparently, it is a bug (but there are workarounds):
PDF files do not open in Internet Explorer with Adobe Reader 10.0 - users get an empty gray screen. How can I fix this for my users?
It also important to make sure that the web server sends the file with Content-Disposition = inline.
this might not be the case if you are reading the file yourself and send it's content to the browser:
in php it will look like this...
...headers...
header("Content-Disposition: inline; filename=doc.pdf");
...headers...
readfile('localfilepath.pdf')
The direct PDF didn't work on Mobile phones and it doesn't support responsive UI.
Here is the best solution.
https://stackoverflow.com/a/66548544/2078462
Do it like this: Remember to close iframe tag.
<iframe src="http://samplepdf.com/sample.pdf" width="800" height="600"></iframe>
I'm having a problem with displaying an iframe in my page. I am trying to use google docs to preview documents (doc, docx, pdf) from my server. Currently, I am using the following code (I've removed the URL for safety reasons):
<iframe src='//docs.google.com/viewer?url=&embedded=true' width='100%' height='600px' frameborder='0'
allowtransparency='true' style='position:relative';>Loading ...</iframe>"
The iframe loads perfectly 4 out of 5 times and when it doesn't load I get a blank iframe with empty DOM and no errors in the console. I've tested this with Chrome, Opera, FireFox, Edge and I got the same result with each one. I am really frustrated because I am losing a whole day trying to fix this problem.
I've tried to replace iframe with object like this:
<object type="text/html" data="My_Url_Here" style="width:100%; height:300px"></object>
And I got the same exact result. Has anyone run the same problem? I am using Joomla CMS. I am open to suggestions for js libraries or Joomla addons that will help me with displaying documents from the server.
We have a website that has audio-video content in the format of .swf files.
There are thousands of active users on the website.
The problem that came up is that some of the new browsers these days do not support Flash.
Some users reported that they are trying to run these files on IE 11 on Win 7. So instead of playing that video, it starts to download itself.
We cannot ask all of our users to use Chrome or try other browsers. We also cannot convert swf files to HTML5 supported videos.
Is there any way that we can implement so that these files will play in browsers?
PS swf files are not working in IE 11 on Windows 7. But they are working on IE in Win10.
Here's an example code we are using-
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="400" height="300" id="movie" align="center">
<embed src="http://www.w3schools.com/tags/helloworld.swf" quality="high" width="400" height="300" name="movie" align="center" type="application/x-shockwave-flash" plug inspage="http://www.macromedia.com/go/getflashplayer" />
<param name="movie" value="http://www.w3schools.com/tags/helloworld.swf" />
</object>
I noticed the .swf link is from W3Schools.com... Their example page shows code to embed an SWF and for me it works fine on IE 11 using a Win 7 PC. The code is basic...
<!DOCTYPE html>
<html>
<body> <embed src="helloworld.swf"> </body>
</html>
"Some users reported that they are trying to run these files on IE 11 on Win 7. So instead of playing that video, it starts to download
itself."
It auto-downloads because it's an unknown file type to IE, so it's hoping maybe you know some program to run this filetype X if it just d/loads for you.
Internet Explorer uses Windows' own ActiveX for running web plugins. It's a Microsoft technology so likely your end-users assume that just having the Flash plugin installed in their Chromes or Firefoxes is enough. Nope. On PC there are two versions of the same plugin (one for IE only, and another version for all other browsers).
How to fix this?...
Using the IE browser itself, go to : https://get.adobe.com/flashplayer/
That page will auto-detect browser & check Flash existence (offers link to correct version for IE).
Alternatively just choose "IE (Active-X)" from the drop-down list here : https://get.adobe.com/flashplayer/otherversions/
Final note...
If these are just slides why not just export as images and just display pictures with audio in a web page (this way it would display on mobile browsers too)?
<img src="slide1.jpg" />
<audio controls src="track1.mp3" />
Just a basic example for a slide1.html. The next/back buttons would just be links to other pages like slideX.html etc.
Or even try web-searching a "powerpoint to html online converter" tool. One example is this conversion site. I've not tested but it may help you.
"These swf files are actually created from PowerPoint slides and Audio using ISpring(ispringsolutions.com/ispring-converter)."
I guess this supports advanced effects like transitions etc? So why not export as HTML5 option? Unless you feel SWF gives better content protection...
Good luck whichever way you go..
I am facing an issue with PDF loading in my page.
I am using object tag to embed PDF,
<object data='addDocs.do?viewName=PDF&id="+$("#pdfId").val()+"&File=regDoc.pdf' type='application/pdf' width='95%' height='750'> </object>
This is getting called twice when using IE Browser.
I did some search on the same question and tried with response.setDateHeader("Expires", 30000);. No Luck.
I can't use IFRAME because I need to open the links inside the PDF in the same window rather than inside IFRAME.
When using EMBED tag to load PDF, If the size of the PDF is larger then browser is freezing.
So, please help me out on calling PDF only once in IE.
Thanks in advance.