gregnb / react-to-print Goto Github PK
View Code? Open in Web Editor NEWPrint React components in the browser. Supports Chrome, Safari, Firefox and EDGE
License: MIT License
Print React components in the browser. Supports Chrome, Safari, Firefox and EDGE
License: MIT License
<div style={{ textAlign: "left" }}>
<p style={{ textTransform: "uppercase" }}>Name: {patient.get('firstName') + " " +
patient.get('middleName') + patient.get('lastName')}</p>
<p>ID: {patient.get('id')}</p>
<p>Time:{(new Date(parseInt(queueItem.get('time')))).toLocaleDateString()}</p>
<p>Ticket 2453:</p>
<p>There are patient(s) ahead of you</p>
<QRCode size={100} value={434} />
<Footer />
</div>
The components QRCode and Footer doesnt appear in the print.
Hello @gregnb ,
Really I like the library and its working fine on chrome but not working on Microsoft Edge and also in safari new window is getting open but not initializing the print.
Can you please look into that.
Thanks
print window is not opening on Firefox.
Hey,
I'm working with React in TS, I wrote my own type definitions, everything works as expected on normal trigger of a button, but I can't get the component to trigger when CTRL+P is pushed.
What am I missing or is this a missing feature?
Thanks for great tool. Just one thing that I found, when I was using
<img src="file.svg" />
then print dialog is not displayed. It just displays popup. I solved it for me by using direct <svg...
Another thing is when onBeforePrint callback is called and I call setState (to hide some elements) in this callback, it is not handled.
I had to do some hack:
Helper function
handlePrint = () => {
if (this.printer && this.printer.firstChild) {
this.setState({
isPrinting: true,
}, () => {
this.printer.firstChild.click();
});
}
}
in Render
<Button type="submit" onClick={this.handlePrint}>
Print!
</Button>
<div
ref={(printer) => { this.printer = printer; }}
>
<ReactToPrint
onAfterPrint={this.printFinished}
trigger={() => (<div />)}
content={() => this.componentRef}
/>
</div>
I want to print by Api instead of click,
just like target.print()
A printer usually cannot print to the very edge of the paper. This library however sets the page margins to 0 here:
What is the reason for that? It causes my page to look ugly and cuts away some part of the text. Can we make this style optional or over-writable by a prop?
Hey there @gregnb,
I was thinking it might be cool to add a way to preview what exactly is going to be printed before actually getting to the print dialog. I was playing around with this a little bit on my own here: https://codesandbox.io/s/k28lq14z7o
I am not sure if this is really a good idea or not but I found it hard to mess around with how things looked jumping back and forth between the real print window. Just an idea.
Hello @gregnb !
Can I pass a scale to resize my print ?
Something like this
<ReactToPrint
trigger={() => (
<Menu.Item
icon='print'
name='Imprimir'
active={false}
onClick={() => { }}
scale={0.6}
/>
)}
content={() => this._print}
pageStyle=''
/>
@gregnb
I hit this error because I have a browser extension that adds the following css to every page of mine:
<link type="text/css" id="dark-mode" rel="stylesheet" href="">
Here's a codesandbox where I manually add that css to the sandbox page and as you can see it fails to load the print window: : https://codesandbox.io/s/4jn3y155z7
I've tracked down what's happening:
Ideally the link's onload or onerror would be triggered which would call markLoaded
(https://github.com/gregnb/react-to-print/blob/master/src/index.js#L152):
newHeadEl.onload = markLoaded.bind(null, 'link');
newHeadEl.onerror = markLoaded.bind(null, 'link');
Unfortunately neither onload or onerror is being called and thus markLoaded
is never triggered. I'm not quite sure why onload/onerror isn't working in this case. Probably because the link doesn't actually link to an href? Messing around with the link
Any thoughts on how to safeguard against elements causing this to occur?
Maybe the link logic should be disabled by default until this is fixed?
Thanks!
Hallo,
Than you for sharing, I found the lib really usefull!
I would like to let the printing process start as the page open, but I do not know how to set the trigger function.
Do you think is there a way to manage this?
Thank you
Marta
Please help with following issue.
On safari, first time print dialogue opens up and everything works fine.
When trying to print again, A dialogue coming up asking to print or not(That is safari may be)
But after i click on "Print" then print dialogue is not showing up.
I also tried the same thing on the example provided in repo. same thing.
Please guide if you faced such issue or help fixing it.
Hello!!
I want to print the table but it seems that if no of rows is greater than a specific limit then only the outer body appears, Is the something am I missing or its issue related to the library?
Hi, I'm building a project using reactstrap/bootstrap and I have my inner components set to be full-width at certain browser widths <Col xs={12} sm={12} md={6} lg={6}>...
Unfortunately, react-to-print is choosing to print the components at full-width, which I do not want, since they fit nicely at half-width.
How do you compensate for responsive components? Can I request it print as if the browser were at max-width?
BAD DOCS BAD DOCS BAD DOCS BAD DOCS
What is componentRef?
As mentioned in #14 the canvas elements are not being printed.
Hi,
Can we save component to a pdf file instead of open print dialog?
Thanks.
I'm using create-react-app and CSS classes. The styles are not loaded on the print media.
First and foremost thank you very much for this repo, it's by far the easiest React printer to use/implement that I've tested.
I had one question though: when I print the same component multiple times (i.e. the same component several times within a div, and the ref is to the div), there is a small 8px margin on top of only the first printed component (each is printing to a different page by the way).
I read that setting the @media print body margin-top to 0 would fix it but so far that hasn't changed anything. (link: https://stackoverflow.com/questions/5024393/page-margins-for-printing-in-css).
Any suggestions?
It happens when copyStyles set to true. I have an idea how to fix it. I'll try it when I have a free time and I'll make a merge request.
I think loading styles should be "promisified". When all styles is loaded, then target.print()
should be called. Sorry for my English, I hope you understand what I mean :)
I need to add an image at the beginning of the page to be printed, but only for the print page.
It's possibile?
I tried but I did not succeed.
Thanks,
Riccardo
When I wrap the styles by the @media print{}
those styles are not taking effect.
@gregnb have you tried print multiple pages? I have print one page with more than one page, but it only print first page. Can you tell me what should I do? Thank you!
The package currently lists "react": "^16.2.0"
in it's dependencies
. Could this be relaxed to a peerDependency
?
Further, as far as I can tell, there is nothing special about React 16.2.0
that this library uses. It does not use <Fragment>
and it does not care about the setState
callback.
Actually, as far as I can tell, this library doesn't even need React 16 at all, and should work fine with earlier versions of React, at least React 15. Do you know of any reason why React 16 would be required?
If not, would a PR removing the dependency on React and adding
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0"
}
be alright? This would mean users of other React versions would not need to ship an entirely different version of React to their users just for this package to work.
Hi there,
Thanks for the library, very useful!
While doing some browser testing, I was unable to render the react-to-print component in IE11. I saw there was a similar issue (#41) that appeared to be resolved in 2.0.0-alpha-3 (the version I'm using). I am using react 15 in my project (package specifies react ^16.2), but I don't see anything specific in the code that would require use of react 16. Copying the code into my codebase as opposed to importing from the node package, fixes the problem, but just posting in case others have run into this issue.
Images are high quality and working fine until I view them in the print pdf.
Here is the ReactToPrint section of my code:
<MyVotes
ref={el => (this.componentRef = el)}
pressed={this.state.pressed}
legislatures={legislatures}
stateName={stateName}
/>
<p className="hintText text-muted" style={{ textAlign: "center" }}>
Learn more{" "}
<Link
style={{ textDecoration: "underline", color: "inherit" }}
className="active"
to="/About"
>
here.
</Link>
</p>
<div id="ShareSection">
{this.state.pressed.length === 0 ? (
<br />
) : (
<div lg="12" style={{ margin: 0, textAlign: "center" }}>
<ReactToPrint
trigger={() => (
<TiPrinter className="printButton" size={22} color="#333" />
)}
content={() => this.componentRef}
debug={true}
/>
I don't know if it is in the scope of this library, but I think it could be very nice to have such callback. For example, I have some collection of data and. For each item I have a button "Print Invoice". It would be very nice to update "Printable" component data instead of render it for each item.
Something like this:
static propTypes = {
/** Copy styles over into print window. default: true /
copyStyles: PropTypes.bool,
/* Trigger action used to open browser print /
trigger: PropTypes.func.isRequired,
/* Content to be printed /
content: PropTypes.func.isRequired,
/* if you need to do something with the data for printable component
right before the print */
onBeforePrint: PropTypes.func,
};
static defaultProps = {
copyStyles: true,
onBeforePrint: () => {},
};
...
handlePrint = () => {
const {
content,
copyStyles,
onBeforePrint,
} = this.props;
onBeforePrint();
let printWindow = window.open("", "Print", "status=no, toolbar=no, scrollbars=yes", "false");
...
}
I haven't checked it yet and I'm not sure if it's necessary for this library.
Sorry for every day comments here :) I have a project where I'll need to print a lot of data and while I researched print-connected libraries for React, I've found your library potentially the most useful for this project.
More examples and detailed documentation needed.
There are very few questions in stackoverflow. Because of that different kind of usage and examples needed.
Hello @gregnb ,
Its working great in chrome, firefox, Edge.
When I try to print using IE browser its giving me error as below.
please take a look.
thanks,
Seems like some 'bodyClass' fixes were made on the v2-iframe branch. :-)
Can we control all of the window parameters? I think this will be useful.
Actually I only need fullscreen property but controlling the other properties could be good.
I think we could make an object property (windowParams) and override it.
class Example extends React.Component {
render() {
return (
<div>
<ReactToPrint
windowParams={{
fullscreen: 'yes',
}}
trigger={() => <a href="#">Print this out!</a>}
content={() => this.componentRef}
/>
<ComponentToPrint ref={el => (this.componentRef = el)} />
</div>
);
}
}
And we could convert this object to string.
index.js
const windowParameters = {
status: 'no',
toolbar: 'no',
scrollbar: 'yes',
...windowParams
}
//Need a good stringify algorithm or npm project
let printWindow = window.open("", "Print", windowParameters.stringifyProperly(), "false");
What do you think?
Source component load correctly but when click to print, font not load
when i click button to print data in data in tbody can't display on print mode but show in non-print mode
Google Chrome
Version 69.0.3497.100 (Official Build) (64-bit)
Hey gregnb,
I like the API your component offers but there seems to be a bug. Here's the codesandbox link : https://codesandbox.io/s/23o6n6n1xp
I have a component rendering icons using fonts. When the print on that component is triggered, it doesn't load the fonts, all the other styles are there, but not the icons
in dev mode, everything works fine, but when making production build, I am having this error:
is there a reason why this can happen? I am using 2.0.0-beta-3 of react-to-print and webpack 4.6.0
Thanks for the library, but in it's current state it doesn't seem like it's ready for widespread use. I guess the alpha version tag means you may already be aware there are issues.
Steps to reproduce:
IPhone + Safari Results: Safari shows blank page in print preview
IPhone + Chrome Results: Nothing happens when button is clicked.
Windows + IE11 Results: 'Hung/Long running script pop up', no print preview.
Phone details:
IPhone (Latest) Plus, IOS 11.2.6
Windows Details:
Windows 10
IE11
The browser's print dialog does not seem to trigger unless an img tag is present. It can even be an img tag with no actual image (e.g. ) From the code, I can see that it assumes the content contains an image and then waits for the image(s) to load before firing window.print.
I can try my hand at a PR if needed.
I add pageStyle prop to my PrintComponent but it doesn't work with specific size like "A4 portrait" or "A4 landscape".
class Example extends React.Component {
render() {
return (
<div>
<ReactToPrint
trigger={() => <a href="#">Print this out!</a>}
content={() => this.componentRef}
/>
<PrintComponent
ref={el => (this.componentRef = el)}
pageStyle="@page { size: A4 portrait;}"
/>
</div>
);
}
}
export default Example;
An only first page is printing on Firefox web browser. Did not print the second page.
if we set the copyStyles as false.then only print all the pages, but that time paging styles disappeared.
On trying to install dependency, I get:
error [email protected]: The engine "node" is incompatible with this module. Expected version "10.11.0". Got "10.13.0" error [email protected]: The engine "yarn" is incompatible with this module. Expected version "1.10.1". Got "1.12.3" error Found incompatible module
<!DOCTYPE html>
<html>
<head>
<title>๐</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="./index.less" ; rel="stylesheet">
</head>
<style>
.spinner {
width: 100px;
height: 100px;
position: relative;
margin: auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color:#a90e16;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
@keyframes sk-bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
<body>
<div id="app">
<div style='position:relative;min-height:100vh;background-color:#2c3e50'>
<div class="spinner" style='position:absolute;top:0;left:0;right:0;bottom:0;margin:auto'>
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
<script src="./src/app.js"></script>
</body>
</html>
if the code <div id="app">...</div>
,the inner is empty, the component of print is running ok.
ps: my app component is appended in the element which id is 'app'.
Trigger:
renderPrintSSDetails = () => {
return (
<div>
<ReactToPrint
trigger={() => <li className="listMenuItem">Print SS Details</li>}
content={() => this.componentRef}
closeAfterPrint = {false}
/>
</div>
);
}
Content:
import React, { Component } from 'react';
import styled from 'styled-components';
import {Row, Col} from 'react-bootstrap';
const Bod = styled.div`
*{
text-align: center;
font-size: 12px;
}
`
class SSDetails extends Component {
renderBody = () => {
return (<Bod>
<Row className = "bg-dark">
<Col xsOffset = {5} xs = {2}>
<img className="logo" src='https://www.hattorihanzoshears.com/images/hanzo-dark-h.png' alt="Hattori Hanzo Shears"/>
</Col>
</Row>
<br/>
<Row>
<Col xsOffset = {5} xs = {4} >
<img alt = "logos" src="https://hattorihanzoshears.com/images/sslogoTop.png" width="100" className="img-responsive" />
</Col>
</Row>
<br/>
<Row>
<Col
xs = {12}
>
<Row>
<Col
xsOffset = {1}
xs = {10}
>
<Row>
<Col xs = {12}>
</Col>
</Row>
<br/>
<Row>
</Col xs = {12}>
</Col>
</Row>
<br/>
<Row>
</Col xs = {12}>
</Col>
</Row>
<br/>
<Row>
<Col xs = {12}>
</Col>
</Row>
<br/>
<Row>
<Col xs = {12}>
</Col>
</Row>
<br/>
<Row>
<Col xs = {12}>
</Col>
</Row>
<br/>
<Ro/w>
</Col xs = {12}>
</Co/l>
</Ro/w>
</br/>
<Row>
<Col xs = {12}>
</Col>
</Row>
<br/>
</Col>
</Row>
</Col>
</Row>
<br/>
<Row className = "head text-center">
<Col xs = {12}>
<Row>
<Col xs = {12}>
Powered by
</Col>
</Row>
<br/>
<Row>
<Col xs = {12}>
<img height = {30} src="https://www.hattorihanzoshears.com/images/hanzo-logo.png" alt = ""/>
</Col>
</Row>
<br/>
<Row>
<Col xs = {12}>
3941 Park Drive, Suite 20-446
</Col>
</Row>
<Row>
<Col xs = {12}>
El Dorado Hills, CA 95762
</Col>
</Row>
</Col>
</Row>
</Bod>);
}
render () {
return (
<React.Fragment>
{this.renderBody()}
</React.Fragment>
)
}
}
export default SSDetails;
My main problem is that no matter what I do it will not allow me to give the print view color styles, of any sort. No text color and no background color.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.