Skip to content

Commit 2732f2e

Browse files
committed
Add README FAQ note about #26
1 parent 9688786 commit 2732f2e

File tree

1 file changed

+17
-2
lines changed

1 file changed

+17
-2
lines changed

README.md

+17-2
Original file line numberDiff line numberDiff line change
@@ -220,9 +220,9 @@ const componentRef = useRef(null);
220220

221221
## FAQ
222222

223-
### Can `react-to-print` print a PDF?
223+
### Can `react-to-print` be used to download a PDF without using the Print Preview window?
224224

225-
We simply open the browser's print preview window, so we aren't able to print a PDF as we lose control once the print preview window opens. However, it should be very easy to use `react-to-print` to take the information you need an pass it to a library that can generate a PDF.
225+
No. We aren't able to print a PDF as we lose control once the print preview window opens. However, it should be very easy to use `react-to-print` to take the information you need an pass it to a library that can generate a PDF.
226226

227227
```tsx
228228
const handlePrint = useReactToPrint({
@@ -344,6 +344,21 @@ const pageStyle = `
344344
`;
345345
```
346346

347+
### Getting a blank page when printing
348+
349+
Many have found setting the following CSS helpful. See [#26](https://github.com/gregnb/react-to-print/issues/26) for more.
350+
351+
```css
352+
@media print {
353+
html, body {
354+
height: 100vh; /* Use 100% here to support printing more than a single page*/
355+
margin: 0 !important;
356+
padding: 0 !important;
357+
overflow: hidden;
358+
}
359+
}
360+
```
361+
347362
### Styles incorrect in print dialog when using grid system
348363

349364
We often ([#327](https://github.com/gregnb/react-to-print/issues/327), [#343](https://github.com/gregnb/react-to-print/issues/343), [#382](https://github.com/gregnb/react-to-print/issues/382)) see issues reported where the developer is using Bootstrap or a similar grid system, and everything works great until the user goes to print and suddenly it seems the styles are off. We've found that often the issue is the grid library uses the smallest sized columns during printing, such as the `xs` size on Bootstrap's grid, a size developers often don't plan for. The simplest solution is to ensure your grid will adapt to this size appropriately, though this may not be acceptable since you may want the large view to print rather than the smaller view. Another solution is to [override the grid column definition](https://stackoverflow.com/questions/22199429/bootstrap-grid-for-printing/28152320). Some newer versions of libraries have specific tools for dealing with printing, for example, [Bootstrap 4's Display property](https://getbootstrap.com/docs/4.3/utilities/display/).

0 commit comments

Comments
 (0)