Comments (7)
@gregnb The repo seems to be working fairly well for me, but I have a component that gets split to multiple pages when I go to print. I am having an issue with the margins on the pages, when printed, cut off some information. Is there a way to account for this in my code to make sure everything is printed correctly? I think the sides can be accounted for easily enough by adding padding, but the repo seems to automatically split the component into multiple pages, so with no real way to know where the page breaks will be is there a way to account for the top and bottom dead space?
from react-to-print.
Thanks for the feedback! I'm not entirely sure about the issue can you provide a codesandbox to this example? I'll look into it
from react-to-print.
Sure, I'm not sure it's even necessarily related to my implementation or even react-to-print. But here it is:
<ReactToPrint
trigger={() => <a href="#">Print this out!</a>}
content={() => this.componentRef}
/>
<div ref={el => (this.componentRef = el)}>
<Label pre={this.props.pre} />
</div>
It's pretty simple. The label itself is a simple component that doesn't have any special margins. Actually, what I've tested is putting multiple components within the targeted div and it prints them each out on a separate page perfectly. Only the first has a top margin of 8px I believe, the following ones don't. Thanks!
from react-to-print.
Ok I'll try to look into this. Thanks!
from react-to-print.
I am having the same issue as ShawnKoga, components will split in an ugly way over multiple pages. Is there a way to determine a page break. Even manually setting one would be good. Something like:
<Content>
<div>Page one</div>
<PageBreak />
<div>Page two</div>
<PageBreak />
<div>Page three</div>
<Content>
I realize this is probably hard to do. Overall react-to-print is very good and is working well for me also.
from react-to-print.
One can control page breaks with CSS: https://www.w3schools.com/cssref/pr_print_pageba.asp
from react-to-print.
Thanks simon I was not aware of this.
from react-to-print.
Related Issues (20)
- 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
- HTML doctype declaration is displaying on top of the print dialog window HOT 10
- Print datatables HOT 4
- CSS "break-before" (replacing "page-break-before") not supported HOT 3
- '.brf' file : Change the save directory. 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.