CODEWITHSUNDEEP
htmlcss
VinoCoder
VinoCoder

Reputation: 1153

Disable copy and print options in pdf viewer

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.

Upvotes: 1

Views: 24493

Answers (3)

VinoCoder
VinoCoder

Reputation: 1153

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>

Upvotes: 3

Justinas
Justinas

Reputation: 43481

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

Upvotes: 0

Muhammad
Muhammad

Reputation: 7324

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>

Upvotes: 0

Related Questions