This question already has answers here:
HTML set a blob (PDF) url in an iframe doesn't work on mobile
(2 answers)
Closed last month.
I have a project to display PDF files with iframes that appear on computer or Android just fine. After I tried to make my simple project, I had trouble displaying PDF files on Android. Can you help me so that my project can be completed.
My Code is
<iframe src="file.pdf" width="100%" height="500px"></iframe>
Display on android as below
And Whereas when I access it on a computer like below
I want this PDF file to also display properly on Android like I access it on computer
Have you try something like this ? :
<iframe src="path/file.pdf" width="100%" height="500px">
For the next time, try to add the code you used to better understand how you got there
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'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.
Hi,
I have a banner on my site made in flash. Its an animation that ends with a sequence showing buttons which the user can click to navigate to inner pages. Since flash seems to be dead soon I would like to replace that with html5 friendly code. Is it possible to have a program such as Adobe Flash CS5 to convert the full movie for me into javascript code? Or I have to write the javascript all by myself from scratch?
Thank you.
You can use Flash CC to publish you flash file into HTML canvas base structure. Steps -
Open file in Flash CC select commands->Convert to other Documents.
Folder Select HTML 5 Canvas from Dropdown and press OK. Now open
newly created Flash file and publish. It will give you the canvas
base html file.
The html and javascript you get is in organized format and you can even edit code as well.
Hope it solve your problem.
This question already has answers here:
How to show google.com in an iframe?
(9 answers)
Closed 7 years ago.
<iframe src ="http://google.com" width="400" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
How can i get this result done?
I know CORS and jsonp are solution for this . But i really dont know how to implement it . I dont have any javascript on my pages . Just normal html pages. If its not possible doing just html codes then how can i achieve my goal using
javascript
or
jquery
.I want to get google.com in my iFrame .
Google is preventing you from embedding their website into your iFrame, since you're not on the same domain (*.google.com).
Also: there are a ton of questions like this. Check this answer in particular -- it's not what you want, but it might be good enough.
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.