Skip to content

Commit

Permalink
Add README FAQ note about #26
Browse files Browse the repository at this point in the history
  • Loading branch information
MatthewHerbst committed Dec 23, 2022
1 parent 9688786 commit 2732f2e
Showing 1 changed file with 17 additions and 2 deletions.
19 changes: 17 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -220,9 +220,9 @@ const componentRef = useRef(null);

## FAQ

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

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

```tsx
const handlePrint = useReactToPrint({
Expand Down Expand Up @@ -344,6 +344,21 @@ const pageStyle = `
`;
```

### Getting a blank page when printing

Many have found setting the following CSS helpful. See [#26](https://github.com/gregnb/react-to-print/issues/26) for more.

```css
@media print {
html, body {
height: 100vh; /* Use 100% here to support printing more than a single page*/
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
}
```

### Styles incorrect in print dialog when using grid system

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/).
Expand Down

0 comments on commit 2732f2e

Please sign in to comment.