Giter VIP home page Giter VIP logo

Comments (3)

joshkoo avatar joshkoo commented on July 19, 2024 1

It is possible to add this feature but giving option to everyone to style page as they like is a better option and it is already there.

Just try to create a wrapper for your print content and style it however you like with css

from react-to-print.

joshkoo avatar joshkoo commented on July 19, 2024

@brognilucas You can pass the styles you want to your print content and shape it however you like.
What reactToPrint does is, it goes over every css in html and copy all of them to your print window.

import React from 'react';
//Just a normal component with styling
import printContent from './PrintContent';
import ReactToPrint from "react-to-print";

class ContentfulPrint extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store component reference
    this.printContent = React.createRef();
  }

  render() {
    const {
      triggerComponent, onAfterPrint
    } = this.props;

    return (
      <div>
        <ReactToPrint
          trigger={() => (
            triggerComponent
          )}
          content={() => this.printContent}
          onAfterPrint={onAfterPrint}
        />
        <div style={{ display: 'none' }}>
          <PrintContent
            ref={(el) => { this.printContent = el; }}
          />
        </div>

      </div>
    );
  }
}

export default ContentfulPrint;

Hope it helps!

from react-to-print.

brognilucas avatar brognilucas commented on July 19, 2024

@joshkoo I do it. But the result is not the same if I pass the style on css or on a Print page.

If I pass scale 0.6 on bodyClass I got these result.
captura de tela 2018-10-16 as 08 49 39

And if I pass the scale on print configuration the result is another one.
captura de tela 2018-10-16 as 08 51 55

If isn't possible add this feature on reactToPrint ok, I'll try solve this problem on my code, using the scale with other form.

from react-to-print.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.