CODEWITHSUNDEEP
javascripthtmlgoogle-chromepdf
User
User

Reputation: 383

Unable to load the PDF from local in chrome mobile version view

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>

Upvotes: 4

Views: 5727

Answers (3)

prit4fun
prit4fun

Reputation: 460

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>

Upvotes: 0

opp
opp

Reputation: 1020

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;

Upvotes: 0

raviriley
raviriley

Reputation: 56

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.

Upvotes: 3

Related Questions