Mobile Chrome prints entire page instead of target content

[stacksagar]

I'm trying to print PDF on mobile, It print entire page not only my specific component!!

[MatthewHerbst]

Hello. Could you be more specific please? What operating system and what browser? Also, if you could share your code that would be very helpful.

[xihelmy]

I've same issue here, i'm using android & chrome for the browser

[MatthewHerbst]

@xihelmy any chance you could share some code please? A codesandbox replicating the issue would be ideal

[xihelmy]

Layout print:

export const NPPKBDocument = forwardRef((props, ref) => {
  return (
    <div ref={ref}>
         // some view
    </div>
  );
});

React to print button :

export const ModalPrint = () => {
  const componentRef = useRef(null);

  const reactToPrintContent = useCallback(() => {
    return componentRef.current;
  }, [componentRef.current]);

  const reactToPrintTrigger = useCallback(() => {
    return (
      <button className="base-btn-primary fs-14 mr-3 float-right">
        Print
      </button>
    );
  }, []);

  const pageStyle = `
    @page {
      margin-top: 12mm;
      size: 120mm 140mm;
    }
  `;

  return (
    <div className="modal">
      <ReactToPrint
        content={reactToPrintContent}
        pageStyle={pageStyle}
        documentTitle="Dokumen"
        removeAfterPrint
        trigger={reactToPrintTrigger}
      />
    </div>
  );
};

It's look good on my PC, but when i try to print on mobile, it print entire page

[headstar]

Same issue for me. Looks ok on Windows laptop + Chrome but prints entire page on iOS 15.6.1 + Chrome. Works as expected on iOS 15.6.1 + Safari.

[MatthewHerbst]

@headstar thanks for the datapoint! I'm fearing that this is an upstream issue with Chrome and not an issue with react-to-print, but haven't been able to pin down a specific change yet. Under the hood iOS Chrome still uses Gecko (the Safari JS engine) so it working on mobile Safari strongly points to an issue specific with mobile Chrome, especially since OP was using Android mobile Chrome

[MatthewHerbst]

I've also verified that the official demo CodeSandbox has the same issue when I try to print it on my Android Chrome

[xihelmy]

Sorry for the late response, I've solved this issue, by set removeAfterPrint={false}

[MatthewHerbst]

Oh, that's really interesting @xihelmy! It would mean then that mobile Chrome does not block when window.print is called, which would mean that the iframe we generate for printing would get removed before the print preview opens, and then when the browser looks for the root document it goes the the main page root. I'm honestly surprised it doesn't crash.

[MatthewHerbst]

Note: this is also being tracked in #187