Pdf.js: Easy way to add new menus

[MMHossaini]

I am using PDFJS for a project to view pdfs on the browser. I am using the standard view.html file to view pdfs.

I wanted to add a new menu on the toolbar for emailing reports. I found it complicated to go through the code and see where i should put my menu icon and javascript handler when the menu is clicked. Doesn't look so easy. Any suggestions?

It should be as easy as writhing
secndaryToolbar.addMenu (
{
Icon: ''email.png',
onClick: function() {
alert('email clicked');
}
}
)

[Snuffleupagus]

I don't really think that the standard viewer was created with that kind of expandability in mind.
(Since adding new functionality to the viewer has to go through a thorough review process, I don't know if it should be that easy to add buttons to the standard PDF viewer that is shipped in Firefox.)

The way that you go about adding a button to the secondary toolbar would be something along these lines (using one of the rotation buttons as example):

• Add the necessary HTML code: https://github.com/mozilla/pdf.js/blob/master/web/viewer.html#L162.
• Add the icon (in CSS): https://github.com/mozilla/pdf.js/blob/master/web/viewer.css#L982.
• Add the button to SecondaryToolbar.initialize(): https://github.com/mozilla/pdf.js/blob/master/web/viewer.js#L160.
• Initialize the button in secondary_toolbar.js:
  
  
  
  • Add a reference to the button: https://github.com/mozilla/pdf.js/blob/master/web/secondary_toolbar.js#L39.
  
  
  • Attach the event listener: https://github.com/mozilla/pdf.js/blob/master/web/secondary_toolbar.js#L52.
  
  
  • Finally add the function that handles the event: https://github.com/mozilla/pdf.js/blob/master/web/secondary_toolbar.js#L93.
  
  

EDIT: After you have added the HTML and CSS code, you could add the event handling code anywhere you want really. You don't _need_ to do it exactly as I've outlined above, but I've just tried to describe how it's done for the standard buttons.

Hope this helps!

[MMHossaini]

Thank you so much!

Badly needed that. Haven't tested it much but it shows up on mobile and desktop and the event triggers. Excellent.

Ya so i will be watching this project , it has only been 2 weeks and there is so much update already haha.

[timvandermeij]

Closing as answered.

[satishbandre]

MurWade will you please add step by step code for adding button?

[MMHossaini]

sure man. email me [email protected]

[waisan]

Hi @MurWade can you please email me the guide for adding button? [email protected] thanks

[MMHossaini]

Hi @waisan .

Hey man read @Snuffleupagus comment. It should be pretty clear. I did this a while back

[kejsiStruga]

Hi, please can you help me out I am trying to handle this event outside of the pdf.js library, is this plausible?
Many thanks.