11

I want to remove toolbar coming with PDF while rendering through iframe. It is working fine in browsers such as Chrome, IE when I use #toolbar=0 with the URL (or file path). But it is not working in Firefox.

Can anyone suggest where am I doing wrong ?

This is my code.

<html>
<body>
  <iframe src="Reports/reports.pdf#toolbar=0" width="100%;" height="80%">                        
</iframe>
</html>
j3ff
  • 5,719
  • 8
  • 38
  • 51
SwR
  • 612
  • 1
  • 8
  • 21
  • 4
    try `#toolbar=0&navpanes=0` – Farside Apr 19 '16 at 10:24
  • 1
    Possible duplicate of [How can I hide the Adobe Reader toolbar when displaying a PDF in the .NET WebBrowser control?](http://stackoverflow.com/questions/4515248/how-can-i-hide-the-adobe-reader-toolbar-when-displaying-a-pdf-in-the-net-webbro) – Farside Apr 19 '16 at 10:24
  • #toolbar=0&navpanes=0 already tried.It was not working... – SwR Apr 19 '16 at 10:29

3 Answers3

18

I think it's also dependent on the application/plugin in which browser opens PDF, it works differently and it might ignore there directives (depending on browser, plugin, platform, PDF viewer).

The general recommendation here is to use these "directives" at the end of URL:

#toolbar=0&navpanes=0

You may also try recommendations from http://blogs.adobe.com/pdfdevjunkie/web_designers_guide :

Embedding using PDFObject

You could use basic HTML markup to embed PDF files in your page but there is a more elegant solution out there. Take a look at PDFObject by Philip Hutchison. PDFObject is a pretty easy scripting tool for dynamically embedding PDF files into web pages. It uses JavaScript to inject an element into the DOM tree of your HTML file. There’s even a handy code generator to help you out with all of the extra parameters you may need.

<script type="text/javascript" src="scripts/pdfobject.js"></script>
<div id="pdf1" style="width:500px; height:375px;"></div>
<script type='text/javascript'>
var myPDF = new PDFObject({ 
     url: 'ConferenceGuide.pdf', 
     pdfOpenParams: { 
          view: 'Fit', 
          scrollbars: '0', 
          toolbar: '0', 
          statusbar: '0', 
          navpanes: '0' }
      }).embed('pdf1'); 
</script>

The link to PDFObject is here: http://www.pdfobject.com/ (taken from their website)

SMALL UPDATE

Disclaimer: To avoid further speculations on the topic, you need to take into consideration that your clients/customers might have different plugins and PDF viewers installed on their machines, and different versioning of applications and plugins, so none of the above solutions will work in 100% of the cases. Adobe for example, has separate plugin for Firefox installed, and they had different versions and different behavior built in.

here's reference for the tricky case with FF and Reader X, as the good example of the above said.

Farside
  • 9,923
  • 4
  • 47
  • 60
  • Please upload pdfobject.js – SwR Apr 19 '16 at 10:46
  • but have you read an article? it was there... Anyways, I provided the link for you explicitly. Feel free to up-vote/accept if it helped anyhow or you found it useful. – Farside Apr 19 '16 at 10:48
  • Sure!!Let me try the code first.Thank you for sharing the link. – SwR Apr 19 '16 at 10:54
  • 2
    @SwethaRatnan, I think you are trying to use the object, before it was actually loaded and defined. Try to involve this when the script would be ready, or on [document ready](https://api.jquery.com/ready/) – Farside Apr 19 '16 at 12:58
  • Till now,I didnt get any solutions – SwR Apr 22 '16 at 10:44
  • @SwethaRatnan, does your last comment relates to my answer, is it an objection/improvement, or you are just generally speaking? I think I explicitly defined the solution, should be straightforward. – Farside Apr 22 '16 at 11:35
  • 1
    I was speaking generally.Itried the above code.Still not hiding toolbar in firefox. – SwR Apr 22 '16 at 11:56
  • @SwethaRatnan, comments under specific answer are used for improvement, clarification, criticism, [read up more here](http://stackoverflow.com/help/privileges/comment). Secondary discussion - please use [chat](http://chat.stackoverflow.com/) instead. If you found my answer anyhow useful, you may [accept answer/up-vote](http://stackoverflow.com/help/why-vote). These are the rules on StackOverflow. – Farside Apr 22 '16 at 12:05
  • @SwethaRatnan, please, find out my updated answer, this is your case with FF. – Farside Apr 22 '16 at 12:15
  • Sorry,I didnt find your answer useful..Thats why I didnt up-vote.The code you referred is displaying pdf only.But my requirement is to hide toolbar.I got success in Chrome,Opera,Safari,IE..but in firefox,my requirements are not meeting.Many code,I tried but still working on it. – SwR Apr 23 '16 at 03:58
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/109969/discussion-between-swetha-ratnan-and-farside). – SwR Apr 23 '16 at 04:09
  • @SwethaRatnan, have you read my answer fully? I stated about your **specific case with FF** as well. It seems you are reading through the line :) There's no magic, it can be fully compatible for all cases, as it depends on OS, Browser, Plugins and PDF reader app they have installed. – Farside Apr 25 '16 at 07:47
  • @SwR May I know how you solved this issue? Could you post an answer? That would be helpful for me and other readers. – Lucky Aug 02 '16 at 17:10
  • In my case, i am using PDFObject and it works fine on Chrome and IE but not in Firefox. – César León Sep 23 '16 at 19:46
  • 1
    @Lucky:I met my requirement but I was unable to hide toolbar of pdf file opened inside iframe. Instead of pdf, I used html file as source file. – SwR Sep 24 '16 at 04:55
-2
  iframe{
     width: 50%;
     height: 100vh;

   }

In scss:

<div>
  <iframe src="./schedule.pdf" frameborder="0" </iframe>
</div>

This worked fine for me in Firefox, no need for any plugins.

4b0
  • 21,981
  • 30
  • 95
  • 142
One
  • 1
  • 1
-4

You Can Manage it by using css.... like

<div style="background-color:rgba(51, 189, 204, 0);width:120px;height:30px;z-index:2;top:1.9em;position:relative;margin-left:60%;"></div>

adjust position as per your requirement.

amit munde
  • 33
  • 6