Browser Print a custom html in React js

Question

I am getting a HTML div from an API response and I want to send that response to the browser print command at a click of a button. Usually, window.print() works if you want to print the current page. But my current page has a different UI and the page I want to print is different. Any suggestion on how we can do this in React js?

Changing the current page and calling window.print() doesn't look like a feasible solution. The UI doesn't look that way. Any other solution appreciated. Thank you.

pzutils · Accepted Answer · 2022-05-09 13:49:44Z

1

You might consider a package like https://www.npmjs.com/package/react-to-print

or check out this existing answer: How to print React component on click of a button?

answered May 9, 2022 at 13:49

pzutils

5305 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

khadeeja Over a year ago

The solution suggested in these links prints the component that are getting render, right? I am not rendering the HTML that I want to print. I am getting it from an API response.

pzutils Over a year ago

using the previous stackoverflow answer you could append the response from the API to the element you want to print

khadeeja Over a year ago

There is no element that I want to print. I want to print the response I am getting form API.

pzutils Over a year ago

I understand that - you could create an element and append the response to the element though and then modify the code in the old answer - should work. var content = createElement("tagName"); content.append(apiResponse); try that with the old answer I linked

pzutils Over a year ago

Also I really don't know much about React - there's probably a better way to do this by bringing the API response into a component and then printing using something like react-to-print. If you can get the response data in the component then using a library that helps you print a component makes sense and would maybe accomplish what you're looking for in a a more React kind of way.

Medet Tleukabiluly · Accepted Answer · 2023-12-01 00:37:43Z

0

use this media query to customise you print content

@media print { .printable-element { display: inline-block !important; //adjust accordingly margin: 0px !important; //adjust accordingly transform: scale(0.5) !important; //adjust accordingly height: 100%; //adjust accordingly page-break-before: avoid; } .hidden-on-print { display: none !important; } }

wrap your content with printable-element class name , whatever content you want to print . If you do not want to print any data use "hidden-on-print" class name to wrap your content

edited Dec 1, 2023 at 0:37

Medet Tleukabiluly

12k3 gold badges38 silver badges78 bronze badges

answered Nov 30, 2023 at 5:42

Kripa Pandey

1

Collectives™ on Stack Overflow

Browser Print a custom html in React js

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related