Disable copy and print options in pdf viewer

Question

I have used tag to display documents (files). In that pdf files are displayed with print and download options i need to remove that print and download options in pdf viewer is there any way to hide it.

Below is my html code to view pdf document

<iframe class="iframemargins" src="{{ url('uploads/chapters/Author.pdf') }}" 
        title="PDF in an i-Frame" frameborder="0" scrolling="auto" width="100%" 
        height="600px">
</iframe>

Is there any other way to display files like pdf, doc, txt, rtf.

VinoCoder · Accepted Answer · 2020-04-28T11:43:13.410

2

I found a solution in this... here is the link where i got a solution

Hiding the toolbars surrounding an embedded pdf?

And i have updated my html code as below and its working

<iframe src="{{ url('uploads/chapters/Author.pdf') }}#toolbar=0&navpanes=0&scrollbar=0" title="PDF in an i-Frame" frameborder="0" scrolling="auto" style="width:100%; height:100%;"></iframe>

edited Apr 28 '20 at 11:43

answered Mar 07 '17 at 11:06

VinoCoder

1,133
5
22
45

But toolbar=0 would also disable the bookmarks and page numbers functionality. Isn't it. What about disabling only the print and download buttons ? – sunny Sep 25 '18 at 16:19
Does that disable the context menu when you right click the document on the browser with allows to save the document or to open it on another application? – ksalgado Apr 27 '20 at 22:23

Justinas · Answer 2 · 2017-03-07T12:31:06.960

0

Use PDF.js that has provided you source of PDF viewer. Simply remove these buttons from web/viewer.html.

Please note that your URL will have to change to web/viewer.html?file={{ url('uploads/chapters/Author.pdf') }} as specified here

To view MS Office documents, use something like Zoho

edited Mar 07 '17 at 12:31

answered Mar 07 '17 at 09:44

Justinas

41,402
5
66
96

how to use pdf.js file i need documentation – VinoCoder Mar 07 '17 at 10:55
@Vinothini Instead of linking directly to PDF itself, link iframe to your viewer.html page with `file` parameter – Justinas Mar 07 '17 at 11:25
I have post my answer see below – VinoCoder Mar 07 '17 at 12:25
@Vinothini For MS Office - Zoho Docs, for simple files - `file_get_contents` in PHP – Justinas Mar 07 '17 at 12:31
how can i view a file in front end so that i must use html know? – VinoCoder Mar 07 '17 at 12:33

Muhammad · Answer 3 · 2017-03-07T10:10:46.507

0

You can use the print media query to hide elements in print. see the example below.

var btn = document.getElementById("print");
btn.addEventListener("click", function(){
    window.print();
});

@media print {
    .print {
        display: none;
    }
}

<h3 style='text-align: center'>My Table</h3>
<table border='1' style='border-collapse: collapse; width: 100%;'>
<thead>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
</thead>
<tbody>
    <tr>
    <th>Value 1</th>
    <th>Value 2</th>
    <th>Value 3</th>
  </tr>
    <tr>
    <th>Value 1</th>
    <th>Value 2</th>
    <th>Value 3</th>
  </tr>
    <tr>
    <th>Value 1</th>
    <th>Value 2</th>
    <th>Value 3</th>
  </tr>
    <tr>
    <th>Value 1</th>
    <th>Value 2</th>
    <th>Value 3</th>
  </tr>
</tbody>
</table>
<button class='print'>Download</button>
<button class='print' id='print'>Print</button>

edited Mar 07 '17 at 10:10

answered Mar 07 '17 at 10:05

Muhammad

6,725
5
47
54

This is not what i want actually i need to display pdf file without print and download options using iframe tag – VinoCoder Mar 07 '17 at 10:54
you mean to hide the download and print options of the browser print preview? – Muhammad Mar 07 '17 at 11:47
No, document viewer using iframe in html element – VinoCoder Mar 07 '17 at 12:01

Disable copy and print options in pdf viewer

3 Answers3