Show html as a new tab for print
Question
In my app when the user clicks on a certain button, i will call an API and the API returns an HTML as a response, this HTML is a page (with and image and a few text) and i want to show this HTML in a new tab to my user and i also want to offer the user to print this page, how can i achieve this?
I tried windows.open but i'm not sure how i can use the response's HTML as the source for this page.
Is it even possible to do something like this in ReactJS ?
1 answers
solution1
1 2020-03-07 14:54:44
The best solution I can think about is creating an hidden container under your body element and placing your HTML into it. Then use the @media print magic to hide the page's content and display the printing element only.
For example:
<html>
<head>
<title>This is my amazing title</title>
<style>
#print-section {
display: none;
}
@media print {
body > * {
display: none;
}
#print-section {
display: block;
}
}
</style>
</head>
<body>
<h1>A lot of content</h1>
<p>A lot of text will be displayed here</p>
<div id="print-section">
<!-- HTML code will be rendered into this section -->
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.