matthewherbst / react-to-print Goto Github PK

More examples and detailed documentation needed.
There are very few questions in stackoverflow. Because of that different kind of usage and examples needed.

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.

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.

A printer usually cannot print to the very edge of the paper. This library however sets the page margins to 0 here:

https://github.com/gregnb/react-to-print/blob/725e060ed02a6077420f5be2897990b60f9ee46a/src/index.js#L162

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 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 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;

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.

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

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.

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?

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.

Images are high quality and working fine until I view them in the print pdf.

images here

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}
                />

@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!

Hi ,

I am trying to print the bill . And am facing some issues in handling it . I am able to get the bill component to be printed but am getting another blank page .

By Default it takes two pages . Am not sure how to resolve this .

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.

Source component load correctly but when click to print, font not load

<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 !
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=''
              />

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:

1. Try to print using the provided react-to-print test page: https://kmmw7l39y7.codesandbox.io/#

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

I have One html with avatar and use example to print but the avatar become blank
HTML:

Preview:

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

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?

I'm using create-react-app and CSS classes. The styles are not loaded on the print media.

@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!

print window is not opening on Firefox.

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 :)

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

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

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)

I want to print by Api instead of click,
just like target.print()

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?

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.

I have been using this library and found an issue not sure if some one has noticed it or if i am missing something to print checkbox. but it seems when the print command executed it removed the checked sign out of checkbox.

page with checkbox

Actual Print preview

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,

in dev mode, everything works fine, but when making production build, I am having this error:

http://prntscr.com/katck3

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

<!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'.

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>

BAD DOCS BAD DOCS BAD DOCS BAD DOCS
What is componentRef?

When I wrap the styles by the @media print{} those styles are not taking effect.

<div> <div className="text-center"> <ReactToPrint copystyles={true} trigger={() => <a href="#">Print this out!</a>} content={() => this.componentRef} pageStyles="@page { size: landscape; }" /> </div> <PrintPage ref={el => (this.componentRef = el)} /> </div>

Hi,

Can we save component to a pdf file instead of open print dialog?
Thanks.

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?

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.

https://github.com/gregnb/react-to-print/blob/f03aa02caf9a871b9cbf90e9a3c5d1a09fa4f144/src/index.js#L59

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?

As mentioned in #14 the canvas elements are not being printed.

Seems like some 'bodyClass' fixes were made on the v2-iframe branch. :-)

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.

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