打印 UI (react.js) 作为 PDF 在 Mac 上损坏

Question

我使用 react.js 和 GraphSQL 创建了一个应用程序，在我的应用程序中有一个页面显示了一些详细信息，我想在单击按钮时将其打印为 PDF。

PDF 中应该包含的数据来自 GraphSQL，为此我使用了 html2canvas 和 jsPDF。它在 Windows（13" 屏幕）上有点正确，但在 mac（16" 屏幕）上它坏了。

这是在 Mac 上显示的生成的 PDF：

这是我要打印的数据（只有第一部分在Mac）:

代码：

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>
 )}

更新： 我能够使用这个库让它工作：react-to-pdf 但在生产中我什么也看不到，基本上是空白页

开发中：

生产中：

Answer 1

对于使用 jsPDF 的 truncated/trimmed pdf，请尝试在此行中指定宽度和高度

pdf.addImage(imgData, 'JPEG', 0, 0);
// change it to
pdf.addImage(imgData, 'JPEG', 0, 0, width, height);

这些宽度和高度可以从 canvas 中提取。

并且，在使用 html2canvas

捕获图像之前滚动到页面顶部

window.scrollTo(0,0)

所以，作为最终结果，你应该有这样的东西：

html2canvas((content), {scrollY: -window.scrollY, scrollX: -window.scrollX}).then(function (canvas) {
        var img = canvas.toDataURL("image/png");
        var doc = new jsPDF({
            unit:'px', 
            format:'a4'
        });
    // dynamic width and height
        var width = doc.internal.pageSize.getWidth();
        var height = doc.internal.pageSize.getHeight();

        let widthRatio = width / canvas.width;
        let heightRatio = height / canvas.height;

        let ratio = widthRatio > heightRatio ? heightRatio : widthRatio

         doc.addImage(imgData, "PNG", 0, 0, canvas.width * ratio, canvas.height * ratio);
        doc.save('test.pdf');
    });

Answer 2

在我的案例中唯一有效的解决方案是完全切换到 react-to-print 包（https://www.npmjs.com/package/react-to-print）

不，它在 mac 和 Windows 以及开发和

上是完美的

打印 UI (react.js) 作为 PDF 在 Mac 上损坏

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

pdf

production-environment

html2canvas

jspdf

reactjs