I'm working on a project which needs to open a PDF from a local path in a dialog box. I am able to open the PDF from a normal chrome browser but I am not able to open the same PDF from chrome mobile version view(inspect element-console). I have seen so many links suggested to open from google drive, but it cannot open the PDF if the internet connection is not available. How can I achieve this without google drive process. Please help me out from this problem, thanks in advance. The code which I written so far.
Note: I am restricted from using jQuery in this project, only JavaScript is allowed.
function pdf(objFRM, local_src){
document.getElementById('dialog').style.display = 'block';
document.getElementById(objFRM).style.display = 'block';
document.getElementById(objFRM).src = local_src;
console.log(document.getElementById(objFRM).src);
}
<a onclick="pdf('iFrame', 'assets/pdf/sample.pdf')"><button class="gray-button">Manual</button></a>
<div id="dialog" style="display:none;">
<div class="modals">
<iframe id="iFrame" type="application/pdf"></iframe>
</div>
</div>
I have heard about an issue with Chrome where PDFs won't display/render, but work just fine in other browsers. Try using a different browser to make sure the issue isn't with Chrome itself.
If this is a local website,
assets/pdf/sample.pdf
would only work if your code files are in the folder with assets.
Afaik there is no built in PDF-Viewer in the mobile version of chrome. So you need to install a separate PDF-Viewer App to display PDFs. What you could do is offer the mobile users a link, where they could "download" the file to open it in an external viewer:
<a id='myPDF'>Get Me</a>
document.getElementById(objFRM).href = local_src;
Usage of 'iframe' is discouraged these days for security reasons. Although for resources, in the same origin it won't be a problem. But I would suggest using embed or link tag for it. To open/pop-up a pdf, you can also use target attribute from 'anchor' tag.
<object name="frame_1" data="/assets/template/test_pdf.pdf" type="text/pdf" width="600" height="500">
<embed src="/assets/template/test_pdf.pdf" id="embed_pdf"></embed>
</object>
<link rel="import" name="frame_2" href="/assets/template/test_pdf.pdf">
<a target="frame_1" href="assets/template/test_pdf2.pdf" class="btn btn-raised btn-info">Load PDF</a>
<a target="frame_2" href="assets/template/test_pdf3.pdf" class="btn btn-raised btn-info">Load PDF</a>
Related
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
I'm looking for how to embed a PDF file in a web page that will be viewable in the native Android browser / Chrome. If I use something like this:
<object data={'LINK_TO_PDF.pdf'+'#zoom=100&scrollbar=0&toolbar=0&statusbar=0&messages=0&navpanes=0'}
type='application/pdf'
width='100%'
height='90%'>
<p>This browser does not support inline PDFs. Please download the PDF to view.</p>
</object>
It works great on Chrome, FireFox, and Edge on Windows. It works great in Safari on iPad (iPadOS) and Safari on iPhone (iOS).
But it does not display on Android.
The files are not publicly accessible, so I cannot use the Google Docs viewer.
PDF.js doesn't seem to help. PDFObject doesn't seem to help. I've looked a bit at ViewerJS.org, but most of its source code has not been updated in 7yrs.
I've seen lots of questions and answers about this, but most of them are old. Surely in 2021, there's a way to do this that works with Android?
(Having to download the file, open it up in a third-party PDF Viewer app, and then close it, switch apps, delete the PDF, and go back to the webpage seems very backwards.)
How can this be done to provide a good user experience on Android?
My embed element is able to show pdf preview in chrome but not in safari. Can anyone advise on how I can render the embed PDF Preview element on safari?
I have tried some of the methods but none worked.
Recommended way to embed PDF in HTML?
Thank you!
<embed src="" type="application/pdf">
In many mobile browsers, PDFs are not able to be rendered using standard embeds, instead, you might want to turn to a library such as pdf.js by Mozilla. This library renders pdfs independently of the built-in PDF viewer, so it doesn't have the same restrictions as embeds.
On a click event, I want to render a PDF inside an element, and I'm appending it in an object tag.
As a fallback for older browsers, I'd like to make the PDF to download automatically.
Here's what I'm working with
<div class="selected">
<object data="loader-resources/doc.pdf" type="application/pdf" class="loaded" width="100%" height="100%">
<p class="error">Your browser cannot display pdf within a website.</p>
</object>
</div>
I can't do this server-side, via Content Disposition in my HttpResponse header as it directs here, because I want the PDF to render on-page if the user's browser supports it.
Any ideas?
Old browser, what else work better than simple
download
Then setup another route on the server for fallback.
For not that old browser you may able to download the pdf as string and do(break in IE 9 & below):
<a href='data:application/pdf;content-disposition:attachment;filename=doc.pdf,' + pdfstring</a>
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.