printing the UI (react.js) as a PDF is broken on Mac

Question

I created an app using react.js and GraphSQL, in my application there is a page that displays some details that I want to print as a PDF when a button is clicked.

The data that should be in the PDF is from GraphSQL, for that I used html2canvas and jsPDF. It is somewhat correct on Windows (13" screen) but on mac (16" screen) it is broken.

Here is the PDF generated as displayed on a Mac:

And this is the data that I want to print (only the first part is on Mac):

Code:

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
const PrintDocument =() => {
  const input = document.getElementById('divToPrint');
  html2canvas(input)
    .then((canvas) => {
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF();
      pdf.addImage(imgData, 'JPEG', 0, 0);
      // pdf.output('dataurlnewwindow');
      pdf.save("download.pdf");
    })
  ;
}
export default function OrderDetails(props) {
    let  id  = props.match.params.id;
   id = "gid://shopify/Order/" + id ;
  const { loading, error, data } = useQuery(GET_Single_Orders, {
    variables:  {id}
    ,
  });
  
  if (loading) return <h4>読み込み中...</h4>;
  if (error) return `Error! ${error}`;

  return( 
  <div >




   <div id="divToPrint" >
   <Container>
    <Row>
    <Col>
    <h4> 発送の詳細 </h4>
   
    <div key={data?.Order?.id}>
    <p> <span className="user"> 住所 : </span>{data?.Order?.shippingAddress?. address1 || "指定されていない" } </p>
    <p> <span className="user"> 住所 2 : </span>{data?.Order?.shippingAddress?.address2|| "指定されていない" } </p>
    <p> <span className="user"> 市 : </span>{data?.Order?.shippingAddress?.city|| "指定されていない" } </p>
    <p><span className="user"> 会社 : </span>{data?.Order?.shippingAddress?.company || "指定されていない"  } </p>
    <p><span className="user"> 国 : </span>{data?.Order?.shippingAddress?.country || "指定されていない" } </p>
    <p><span className="user"> 国コード : </span>{data?.Order?.shippingAddress?.countryCode || "指定されていない" } </p>
    <p><span className="user"> ファーストネーム : </span>{data?.Order?.shippingAddress?.firstName || "指定されていない" } </p>
    <p><span className="user"> 苗字 : </span>{data?.Order?.shippingAddress?.lastName || "指定されていない" } </p>
    <p><span className="user"> 電話番号 : </span>{data?.Order?.shippingAddress?.phone || "指定されていない" }</p>
    <p><span className="user"> 州 : </span>{data?.Order?.shippingAddress?.   province || "指定されていない"  } , {data?.Order?.shippingAddress?.provinceCode|| "指定されていない" } </p>
   
                      
                     
    </div>
    </Col>
   // the rest of the code

   </Container>
   </div>
<div>
<Button variant="secondary" onClick={PrintDocument} >印刷</Button>
 </div>

 </div>
 )}

UPDATE : i was able to make it work using this library : react-to-pdf but in production i cannot see anything , basically a blank page

in development :

in production :

Answer 1

Itge only solution that worked in my case is totally switching to react-to-print package ( https://www.npmjs.com/package/react-to-print)

No it is perfect on mac and Windows and in dev and