想要获取 html 组件作为图像，但总是 document.querySelector return null

Question

我是新手。我正在使用 QRcode.react 生成 QR 码，我希望将它添加到 @react-pdf/renderer 以便我可以在 pdf 中附加 QR 码。因此，为此，我试图将 HTML 作为图像的数据 URL。

下面是我生成图像URL的代码

import React, { Fragment } from "react";

import QRCode from "qrcode.react";

class QRCodeRender extends React.Component {
  componentDidMount() {
    // console.log("im loded");
    const qrCodeCanvas = document.querySelector("target");
    const qrCodeDataUri = qrCodeCanvas.toDataURL("image/jpg", 0.3);
  }

  render() {
    const { cusName, invoice } = this.props;
    console.log("cusName props " + this.props.cusName);
    let data = `Customer : ${cusName} , Invoice : ${invoice}`;
    return (
      <Fragment>
        <div id="target">
          <QRCode level="Q" style={{ width: 60 }} value={data} />
        </div>
      </Fragment>
    );
  }
}

export default QRCodeRender;

问题是我总是进入 document.querySelector Null，所以我无法创建 HTML 的 URL。我做错了吗？

Answer 1

您想要 select 具有 ID 目标的元素。但是你选择的是标签目标

你需要解决这个问题

    const qrCodeCanvas = document.querySelector("target");

=>

    const qrCodeCanvas = document.querySelector("#target");

Answer 2

我无法发表评论，但我认为 toDataUrl() 是仅在 <canvas> 个元素上的函数？

https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toDataURL

想要获取 html 组件作为图像，但总是 document.querySelector return null

want to get html component as image but always document.querySelector return null

qr-code

reactjs

react-pdf