如何使用 React JS 在 PDF 上下载组件或 div？答案

【问题标题】：How i can download a component or div on PDF with react JS?如何使用 React JS 在 PDF 上下载组件或 div？
【发布时间】：2022-07-21 18:13:57
【问题描述】：

我想以 PDF 格式下载我的 div 中的所有代码。我尝试了几种可能性，但我总是遇到问题。

这是我需要下载的：

 <div id="qrCodePdf" ref={ref}>
          <Row className="backgroundTicket">
            <Col>
              <Row className="rowCode">
                <Col>
                  <p className="titleName">
                    {localStorage.getItem("propsRestaurant")}
                  </p>
                </Col>
                <Col>
                  <div id="qrCodeDiv2" />
                </Col>
                <Col>
                  <img
                    src="/image/tipourboirePhrase.png"
                    className="tipPicture"
                  />
                </Col>
              </Row>
            </Col>
            <Col>
              <Row className="rowCode2">
                <Col className="col2">
                  {" "}
                  <img src="/image/logoCode.png" className="tipPicture" />
                </Col>
                <Col className="col2">
                  <p>Juste pour un merci</p>
                </Col>
              </Row>
            </Col>
          </Row>
</div>

目前我使用的是 js pdf 和 HTML2Canvas，但我总是遇到像 × 这样的错误 TypeError：无法读取 null 的属性（正在读取 'toDataURL'）

也是我的按钮

 <button
        className="buttonQrCode"
        onClick={() => {
          const canvas = document.querySelector("qrCodePdf canvas");
          const image = canvas.toDataURL();
          const element = document.createElement("a");
          element.setAttribute("href", image);
          element.setAttribute("download", "canvas.pdf");
          document.body.appendChild(element);
          element.click();
        }}>
        Télécharger le QR Code Ticket
      </button>

【问题讨论】：

您是真的想“下载”内容，还是简单地打印并保存为 PDF 格式？
@MatthewHerbst 如果可能的话，我想将内容保存为 pdf 格式

标签： reactjs pdf download

【解决方案1】：

 
import { exportComponentAsPDF } from "react-component-export-image";

<div id="qrCodePdf" ref={ref}>
          <Row className="backgroundTicket">
            <Col>
              <Row className="rowCode">
                <Col>
                  <p className="titleName">
                    {localStorage.getItem("propsRestaurant")}
                  </p>
                </Col>
                <Col>
                  <div id="qrCodeDiv2" />
                </Col>
                <Col>
                  <img
                    src="/image/tipourboirePhrase.png"
                    className="tipPicture"
                  />
                </Col>
              </Row>
            </Col>
            <Col>
              <Row className="rowCode2">
                <Col className="col2">
                  {" "}
                  <img src="/image/logoCode.png" className="tipPicture" />
                </Col>
                <Col className="col2">
                  <p>Juste pour un merci</p>
                </Col>
              </Row>
            </Col>
          </Row>
</div>

 <button
        className="buttonQrCode"
        onClick={() => {()=>exportComponentAsPDF(ref, { fileName: "FileName" })}>
        Télécharger le QR Code Ticket
      </button>

【讨论】：