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'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>

• javascript
• html
• google-chrome
• pdf

Share Improve this question Follow edited Mar 16, 2017 at 3:55 dana 18.2k77 gold badges6969 silver badges9090 bronze badges asked Feb 28, 2017 at 11:14 UserUser 38399 silver badges2121 bronze badges 4

• Can anyone respond to this question please... – User Commented Feb 28, 2017 at 12:49
• You didn't provide enough details in your question. For example, how exactly you can't open local file? On which step something goes wrong? Is there any error and if yes, what is error message? And what is your project? Is this site? Is it a native mobile application trying to open file in the main browser? Is this a hybrid app and you want to open PDF inside your own WebView? – SergGr Commented Mar 11, 2017 at 2:21
• It is possible that the onclick property you are using doesn't work. Have you tried to add event listener instead? document.getElementsByClassName("gray-button").addEventListener("click", function(){ pdf('iFrame', 'assets/pdf/sample.pdf') }); – Aleksandr Ianevski Commented Mar 16, 2017 at 12:36
• "which needs to open a PDF from a local path in a dialog box" Is local path file: protocol? What do you mean by "mobile version view"? – guest271314 Commented Mar 17, 2017 at 0:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3 +25

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>