How to Hide Save and Save As Options in Organize Window in Angular PDF Viewer

Description:

This article explains how to hide the Save and Save As buttons in the Organize Window footer of the Syncfusion Angular PDF Viewer component within an Angular application. By applying simple CSS styles, you can prevent users from seeing these options while using the organize feature of the PDF Viewer.

Solution:

To hide the Save and Save As buttons in the Organize Window, add a CSS rule that targets these buttons inside the footer content area and sets their display to none. This approach uses nth-of-type selectors to hide the first two buttons in the footer, which correspond to Save and Save As.

Prerequisites:

1. Syncfusion PDF Viewer Setup: Make sure the Syncfusion PDF Viewer is installed and set up in your Angular project. Follow the Getting Started with Syncfusion PDF Viewer for Angular guide if you haven’t already.
2. Basic Knowledge of Angular and CSS: Familiarity with Angular components and styling will help you apply the changes effectively.

Code Snippet

Add the following CSS style in your global styles file (e.g., styles.css) or within your component’s styles to hide the Save and Save As buttons in the organize window:

<style>
  .e-footer-content button:nth-of-type(1),
  .e-footer-content button:nth-of-type(2) {
    display: none !important;
  }
</style>

Key Features Used in the Code:

1. Targeting Footer Buttons: The CSS targets the first and second button elements inside .e-footer-content, which correspond to Save and Save As.
2. Using !important: This ensures the styles override the default Syncfusion styles.

Sample Link:

You can find the full sample in our GitHub repository.

Conclusion

We hope you enjoyed learning on How to Hide Save and Save As Options in Organize Window in Angular PDF Viewer

You can refer to our Angular PDF Viewer feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications. You can also explore our Angular PDF Viewer Example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to explore our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!