From 2732f2e9172ed3e57cc7cc9c9aa2fe1a10d43953 Mon Sep 17 00:00:00 2001 From: Matt Herbst Date: Thu, 22 Dec 2022 18:32:00 -0800 Subject: [PATCH] Add README FAQ note about #26 --- README.md | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d9d2e58..7d33ff7 100644 --- a/README.md +++ b/README.md @@ -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({ @@ -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/).