[SimpleViewer] How to remove or hide Button as print, download and etc.
Question
Forge component by Caio Santana Magalhães

Hello Team, 


I am using this forge for pdf viewer, all is working fine, But I want remove and hide print, download, save button. Please provide solution, how to button hide?


Thanks,

Anuj

mvp_badge
MVP
Solution

Hi Anuj,

As requested in the PM you sent me the adjusted SimpleViewer module.

I cloned it and made the adjustment, i made I already explained in my previous post, and attached te OML.

You can also just use this cloned module and change the references in your application from SimpleViewer to ClonOfSimpleViewer. Feel free to rename the module first.

Regards, 

Daniel

CloneOfSimpleViewer.oml

Solution

Dear Daniël Kuhlmann, ,


Thanks for sent PM. All Issue fixed. 


Thanks,

Anuj 

mvp_badge
MVP
Solution

Hi Anuj,

I think Benjith, is right about about apending #toolbar=0 to the url. 

The PDFObjectJS documenation says there is no build in functionallity to customize the toolbar apart from the suggestion that Benith gave.

https://pdfobject.com/#examples

I suggest you clone the ViewFile webblock from SimpleViewer to your own module, and append the 

+ "#toolbar=0" 

to the FileURL property. I tested this and it works, the toolbar is no longer displayed.


Regards,

Daniel

mvp_badge
MVP

Hi,

Try adding the following cSS in the CSS editor of the screen in which you incorporate the viewer block.

#toolbar {

 display: none;

}

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi,

Try adding the following cSS in the CSS editor of the screen in which you incorporate the viewer block.

#toolbar {

 display: none;

}

Regards,

Daniel

 Dear Daniel,

Try, but still same.

Thanks

Anuj

 

mvp_badge
MVP

Hi Anuj,

Could you please give it a try by defining the below mentioned CSS in the respective Screen Style Sheet section 

#buttons {
    display: none;
}


Hope this helps you!


Regards,

Benjith Sam

Benjith Sam wrote:

Hi Anuj,

Could you please give it a try by defining the below mentioned CSS in the respective Screen Style Sheet section 

#buttons {
    display: none;
}


Hope this helps you!


Regards,

Benjith Sam

 Dear Benjitha,


I try css, same still 

<div id="buttons" class=""><cr-icon-button id="rotate-right" iron-icon="pdf:rotate-right" aria-label$="Rotate clockwise" title="Rotate clockwise" aria-disabled="false" role="button" tabindex="0"></cr-icon-button><cr-icon-button id="download" iron-icon="cr:file-download" aria-label$="Download" title="Download" aria-haspopup="false" aria-disabled="false" role="button" tabindex="0"></cr-icon-button><cr-action-menu id="downloadMenu"><button class="dropdown-item">

              Edited

            </button><button class="dropdown-item">

              Original

            </button></cr-action-menu><cr-icon-button id="print" iron-icon="cr:print" title="Print" aria-label$="Print" aria-disabled="false" role="button" tabindex="0"></cr-icon-button><viewer-toolbar-dropdown id="bookmarks" selected="" metrics-id="bookmarks" open-icon="pdf:bookmark" closed-icon="pdf:bookmark-border" header="Bookmarks" hidden=""><dom-repeat style="display: none;"><template is="dom-repeat"></template></dom-repeat></viewer-toolbar-dropdown></div>


Thanks

Anuj

 

mvp_badge
MVP

Hi Anuj,

I was not able find any proper solution for the mentioned use-case, below are some of my findings..

- By adding #toolbar=0 at the end of the Pdf file src url as shown below will help you to get rid of toolbar option 

src="view/1.pdf?page=hsn#toolbar=0"

Limitation:

- Such implementation is only working in Chrome and Safari Browser

- End user with technical understanding can easily edit and set the toolbar value from 0 to 1 using the browser inspect element functionality

----------------------------------------------------------

- I guess the attached screen clip in the main post is from Microsoft Edge/Internet Explorer/Firefox browser

- On analyzing the rendering of the Pdf preview section in the Microsoft Edge browser, seems to be quite different than the Chrome browser rendering

- Such Pdf viewer toolbox options are browser specific and I don't think it can be easily modified as per the requirement

- Previewing/loading the Pdf in the client side (i.e. in the Browser) itself allow the end-user to access the Pdf file

- Using the protected pdf with a secret key is also an option but it will also restrict from displaying the pdf content


Regards,

Benjith Sam

mvp_badge
MVP
Solution

Hi Anuj,

I think Benjith, is right about about apending #toolbar=0 to the url. 

The PDFObjectJS documenation says there is no build in functionallity to customize the toolbar apart from the suggestion that Benith gave.

https://pdfobject.com/#examples

I suggest you clone the ViewFile webblock from SimpleViewer to your own module, and append the 

+ "#toolbar=0" 

to the FileURL property. I tested this and it works, the toolbar is no longer displayed.


Regards,

Daniel

mvp_badge
MVP
Solution

Hi Anuj,

As requested in the PM you sent me the adjusted SimpleViewer module.

I cloned it and made the adjustment, i made I already explained in my previous post, and attached te OML.

You can also just use this cloned module and change the references in your application from SimpleViewer to ClonOfSimpleViewer. Feel free to rename the module first.

Regards, 

Daniel

CloneOfSimpleViewer.oml

Dear Daniël Kuhlmann

Thanks


Regards,

Anuj

Dear Daniël Kuhlmann,


Thanks for Solution, But it is not working in IE11 browser, Please help me for IE11 browser
.

Thanks

Anuj

Solution

Dear Daniël Kuhlmann, ,


Thanks for sent PM. All Issue fixed. 


Thanks,

Anuj 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.