Loading PDF in an iframe with out the html page behind the iframe?

i am working on a angular application to export PDF .

my app structure: i have 2 components (login,home) ,created a button(export) in login component and which will navigate the user to home component and afterViewInit it will generate the pdf based on home component html. everything is working fine except i see the html in the background along with the PDF form. my solution : we can make the pdf full frame(100%) but i need a button to go back to previous page.

questions :

how can we make html invisble behind the screen
is there any way we can implement this with out 2 components and routing (ex: hidden html in same login component) ?

Solution

I am posting an answer because this is too much to be written as a comment.

As I suggested in the comment; you can display: none the tablepdf div.

You have your iFrame below that div. So it wont affect any of the content you have outside of the tablepdf.

You are not seeing the back button after setting display to none because the back button is behind your iFrame. iFrame is set to position:fixed

To show the back button, you could make the following changes.

<!-- set the parent div height to 100vh so that the 90% height in the iFrame can work properly -->
<div class="row" style="height: 100vh">
   <!-- remove the position: fixed so that your button can be shown below the iFrame -->
   <iframe id="main-iframe" style="width: 90%; height: 90%; z-index: 2; border: none;"></iframe>
   <button class="btn btn-primary " (click)="goback()">go back</button>
</div>