CODEWITHSUNDEEP
reactjsreact-to-print
Mohammed Safwan
Mohammed Safwan

Reputation: 1

react-to-print gives empty screen for printing

I am working on an ionic react application. clicking on Print this out! taking me to the print screen. But getting an empty screen to print.

My Print Component:

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

import { ComponentToPrint } from './ComponentToPrint';

const Print = () => {
  const componentRef:any = useRef();

  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
};


export default Print

My ComponentToPrint:

import React from 'react'

export const ComponentToPrint = React.forwardRef((props, ref: any) => {
  return (
    <div ref={ref}>My cool content here!</div>
  );
});

My App Component:

import { createContext, useEffect, useMemo, useState } from 'react';
import Print from './components/Print';

setupIonicReact();

export const AppContext = createContext<any>(null)

const App: React.FC = () => {
  const [config, setConfig] = useState<any>(null)
  return (
    <AppContext.Provider value={{
      config,
    }}>
      <IonApp>
        <IonReactRouter>
          <IonSplitPane contentId="main">
            <Menu />
            <IonRouterOutlet id="main">
              <Route path="/barcode" exact={true}>
                <Print/>
              </Route>
            </IonRouterOutlet>
          </IonSplitPane>
        </IonReactRouter>
      </IonApp>
    </AppContext.Provider>
  );
};
export default App;

I expected to see "My cool content here!". but the screen is empty. please help me with this.

Upvotes: 0

Views: 446

Answers (1)

seb835
seb835

Reputation: 487

So as of Ionic 8.4.1, I found the same issue.

Need to do further testing, but a quick and rough fix for this is to override one of the CSS styles in @ionic/react/css/structure.css that sets the body to display:none if the html element does not have the .hydrated class.

After all your Ionic CSS imports in App.tsx, import your own CSS with a media query for printing like so:

@media print {
    html:not(.hydrated) body {
        // Show the content
        display: block !important;

        // Allow multiple pages
        position: inherit !important;
    }
}

This may need further testing depending on the content of what you want to print by changing the display type, but it worked for me. Hope this helps!

Upvotes: 0

Related Questions