The issue arises because the original printReport() function you are using is replacing the entire content of the document.body, which interferes with other parts of your page, such as the popup. This is why after you try to print and cancel the print dialog, the popup no longer behaves as expected and cannot be closed.

Instead of replacing the entire body content, a better approach is to open a new browser window specifically for printing. This way, the content of your main page and popup remains unaffected by the printing process.

When the user clicks the print button, a new window can be opened, and only the printable content (i.e., the table) will be written to that window. The original page (and the popup) will remain intact, and this avoids affecting other interactive elements on your page.

By opening a new window for printing, the original content and functionality of the page (like your popup) are preserved. The user can still interact with the main page and close the popup as usual. Since the print dialog occurs in a separate window, it does not interfere with the UI components of your original page, ensuring that all features (like closing or interacting with the popup) continue to work as expected.

You also need to ensure that your Vue.js popup/modal is being properly controlled using reactive data (like a boolean flag) to open and close the modal. This ensures that the popup can be closed even after the print dialog is canceled.

By following this approach, you can resolve both the printing and popup closing issues without affecting your page's functionality.