Comments (3)
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.
@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.
@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.
And if I pass the scale on print configuration the result is another one.
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)
- Superscripts <sup/> and subscripts <sub/> HOT 1
- react-to-print custom print html content dev vs prod discrepancy HOT 4
- [BUG] [TEMPORARY FIX] - Print container on Chrome + MUI is hiding `Header and Footers` option as default behavior HOT 5
- The FOOTER to only display at the LAST PAGE HOT 3
- codesandbox examples are not loading HOT 2
- onAfterPrint is called before print iframe appears HOT 1
- On mobile devices are not truncated accordingly ref HOT 1
- Add Border to every Page HOT 4
- Add dynamic colors to print function HOT 1
- How to check that the user click on Save in `onAfterPrint`? HOT 2
- getting Supplied Data is not a valid base64-String jsPDF.convertStringToImageData erorr while directly downloading image HOT 1
- Border top and bottom HOT 1
- Save as PDF hangs in print view HOT 1
- Blank PDF when trying to generate in production. HOT 2
- How should i handle large data to print? HOT 8
- Why does it render different content when in im browsing in mobile HOT 3
- Blank Page while printing after a certain period of time HOT 9
- How to add style using PageStyle prop, without it overriding component’s style HOT 5
- Warning: findDOMNode is deprecated outside StrictMode. HOT 10
- Unhandled error when trying to print not fully loaded canvas elements HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-to-print.