Hide Toolbar in PDF Viewer in Blazor Application

Hide Toolbar in PDF Viewer in Blazor Application

Posted by: asoni on 19 July 2024, 9:18 am EST

• 

  asoni

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 July 2024, 9:18 am EST - Updated 19 July 2024, 9:23 am EST

  I am trying to use pdf viewer in my blazor application. PDF is loaded but is there any way to hide toolbar on the top?
  
  

  

  1365×591 96 KB

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 22 July 2024, 1:18 am EST - Updated 22 July 2024, 1:23 am EST

  Hi,

  You could use the following css to hide the top toolbar:

      .gc-viewer-host {
          height: 70vh;
          width: 100%;
  
          /* Hide Top Toolbar */
          .gcv-header-container {
              display: none;
          }
  
          /* Additionally if you want to hide the side panel also */
          .gcv-menu {
              display: none;
          }
      }

  Refer to the following screenshot and the attached sample.

  

  1602×822 130 KB

  Let us know if you face any issues. Further, if you have any queries related to DSPDF Viewer, you could post the case on the dedicated DSPDF Viewer forum at: https://developer.mescius.com/forums/documents-pdf

  Sample: Blazor_PDF_Viewer.zip

  Regards,

  Ankit

• 

  asoni

  • Post Options:
  • Link
    Copy

  Posted 22 July 2024, 7:35 am EST - Updated 22 July 2024, 8:00 am EST

  Thanks Ankit! This will work for me. Just wanted to know I am using SupportApiDemo so in that we have PdfViewerOptions having such configurations. So is there any configuration to do it or we need to just use css and hide it from UI.

  In addition to this, we have save button outside of this viewer and on the clicking of that button I want to get the updated pdf with filled data by the user. Please let us know how we can achieve that. Thank you.

• 

  nitin.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 23 July 2024, 12:25 pm EST

  Hi,

  PdfViewerOptions does not have API for hiding toolbars. You can try the solution provided by Ankit.

  Regarding your Save Button requirement, you can follow this demo for the same: https://developer.mescius.com/document-solutions/javascript-pdf-viewer/demos/ui-customization/save-changes/purejs
  
  If you face any issues just let us know.

  Regards,
  
  Nitin