How to printout hidden content

[MFaad1]

I have hidden content that is not visible in the browser. Now, I want to print this content without displaying it in the UI. Is it possible?

[MatthewHerbst]

Yes! Very much so. Is your content rendered but not visible (e.g. display: none) or is the content not rendered at all prior to printing?

[MFaad1]

I have content that is currently set to 'display: none' and is therefore not visible. I need to print this hidden content without changing its display status

[siaikin]

I have content that is currently set to 'display: none' and is therefore not visible. I need to print this hidden content without changing its display status

for your case, you'll need to modify the print before printing, such as setting 'display: block' to make the hidden content visible.

1. One way to do this is to make changes in 'onBeforePrint' and then undo the changes in 'onAfterPrint'. or
2. Show hidden content in the '@media print {}' media query.

[MatthewHerbst]

For that first example, you'll want to see the section in the README about changing state within onBeforePrint. You can use that to show your component only while printing

[MFaad1]

@siaikin @MatthewHerbst

When I Setting 'display: none' or 'visibility: hidden' through print, it prevents the content from being printed

[siaikin]

@MFaad1 If you want something to be visible when printed, you should set it to 'display: block or any other than none' via 'onBeforePrint' or '@media print'.

Or can you make a Codesandbox or similar showing the problem?

[MFaad1]

@siaikin I need to print confidential documents/files without displaying them on screen, ensuring their contents remain hidden from view.

[siaikin]

There is no problem with your needs, which can be achieved by setting up css. Can you provide an online example with codesandbox or something else?

[MFaad1]

@siaikin I want to exclude the previously highlighted area (in red) from the print preview (in the browser) but still print the underlying content.

[MatthewHerbst]

@MFaad1 what @siaikin is suggesting is to use @media print queries to show/hide content while printing. So for example:

@media print {
  .hiddenContent {
    display: block;
  }

  .normalContent {
    display: none;
  }
}

[MFaad1]

I'm using @media print to customize my print output, but when I hide the unwanted content using display: none or visibility: hidden, it also excludes that content from the physical print. How can I hide it from the print preview while still printing the content?

[MatthewHerbst]

If I understand it correctly, you want to hide the content from the browser's print preview dialog? That's not possible. If a user is able to print the physical document why is it a problem if they can see what they are printing?

If users just need to download the document rather than physically printing it, you could create a PDF or something with the content and download it directly onto their machine rather than using the printing workflow. You would need to use the custom print prop for that and then convert the iframe into a PDF

[siaikin]

I'm just now understanding your need 😂, "You want to not show something in the print preview in your browser, but you want to print it on paper," right?

If so, instead of react-to-print, you can hand over the print task to a printing software instead of using the browser's print function (which will prevent the print preview window from being displayed).

[MFaad1]

@siaikin how I can handover print task to printing software instead of using the browser's print function ?

@MatthewHerbst Do we have any option fo this?

[MatthewHerbst]

Yes, kind of. As mentioned above, you'll need to use the print property. That will give you an iframe containing all of the things you want to print. You can then take that and convert it (using a different library) into the format you want for downloading, such as PDF. The CustomPrint example shows how to get started with this, and there are a ton of PDF related questions to search through in this repo. You might want to start with this section from the README:

[MatthewHerbst]

@MFaad1 did you end up finding a solution that works for you?

[MFaad1]

@MatthewHerbst No, Didn't find any solution

[MatthewHerbst]

@MFaad1 happy to try and keep helping you if you are able to share more code. Going to close this issue for now, but feel free to keep commenting