jspf 和 html2canvas 生成只有 html 但没有数据的文档

Question

当我下载 pdf 时，pdf 是空白的，除了点，但没有数据。我应该使用 html2canvas 吗？过去我尝试过 pdf.html().then() ，我得到了像屏幕截图中那样的 html，数据位于第 9 或 13 页上，被几个空白页取代

const handleDownloadLocation = async () => {
    const content = await locationTemplateRef.current;

    try {
      const canvas = await html2canvas(content);
      const imgData = canvas.toDataURL("image/png");
      const pdf = new jsPDF({
        orientation: "portrait",
        unit: "px",
        format: "a4",
      });
      const width = pdf.internal.pageSize.getWidth();
      const height = (canvas.height * width) / canvas.width;
      pdf.addImage(imgData, "PNG", 0, 0, width, height);
      await pdf.save(`${location.name}.pdf`);
    } catch (error) {
      toast.error(error.message);
    }
  };

  return (
    <>
      <Button onClick={handleDownloadLocation} icon labelPosition="right">
        Download Location
        <Icon name="download" />
      </Button>
      <div style={{ fontSize: 8 }} ref={locationTemplateRef}>
        <DownloadDocument location={location} />
      </div>
    </>
  );

html要放入pdf中：

  const {
    name,
    address,
    mainPhone,
    internet,
    siteContact,
    modem,
    externalIP,
    diocesanNetwork,
    support,
    hardware,
    phones,
    localRange,
    notes,
  } = location;

  return (
    <>
      <h1>{name}</h1>
      <ul>
        <li>{address}</li>
        <li>{mainPhone}</li>
        <li>{siteContact}</li>
        <li>Internet Speed: {internet}</li>
        <li>Ext. IP{externalIP}</li>
        <li>Diocesan net.{diocesanNetwork}</li>
        <li>Vendor Supp.{support}</li>
        <li>Moden Creds.{modem}</li>
        <li>Local IP Range{localRange}</li>
      </ul>

      <Table singleLine>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Device</Table.HeaderCell>
            <Table.HeaderCell>Location</Table.HeaderCell>
            <Table.HeaderCell>IP Addr.</Table.HeaderCell>
            <Table.HeaderCell>Serial</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        {hardware &&
          hardware.map((h) => (
            <Table.Body key={h.id}>
              <Table.Row>
                <Table.Cell>{h.device}</Table.Cell>
                <Table.Cell>{h.hardwareLocation}</Table.Cell>
                <Table.Cell>{h.ipAddress}</Table.Cell>
                <Table.Cell>{h.serial}</Table.Cell>
              </Table.Row>
            </Table.Body>
          ))}
      </Table>
      <Table singleLine>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Phone #</Table.HeaderCell>
            <Table.HeaderCell>Location</Table.HeaderCell>
            <Table.HeaderCell>Provider</Table.HeaderCell>
            <Table.HeaderCell>Support</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        {phones &&
          phones.map((p) => (
            <Table.Body key={p.id}>
              <Table.Row>
                <Table.Cell>{p.number}</Table.Cell>
                <Table.Cell>{p.numName}</Table.Cell>
                <Table.Cell>{p.provider}</Table.Cell>
                <Table.Cell>{p.misc}</Table.Cell>
              </Table.Row>
            </Table.Body>
          ))}
      </Table>
      <p>Notes: {notes}</p>
    </>
  );

Answer 1

我认为问题可能来自于代码的组成 - 从您提供的代码片段来看，函数handleDownloadLocation正在返回JSX，我不认为React是这样工作的。第二个问题可能是位置数据对象。我接触了一点代码，就能够生成包含其中内容的pdf。 pdf 中必须包含的代码保持不变。其他文件：

MainComponent.js

const MainComponent = () => {
  const locationTemplateRef = useRef()

  const handleDownloadLocation = async () => {
    const content = locationTemplateRef.current;

    try {
        const canvas = await html2canvas(content);
        const imgData = canvas.toDataURL("image/png");
        const pdf = new jsPDF({
            orientation: "portrait",
            unit: "px",
            format: "a4",
        });
        const width = pdf.internal.pageSize.getWidth();
        const height = (canvas.height * width) / canvas.width;
        pdf.addImage(imgData, "PNG", 0, 0, width, height);
        pdf.save(`${locationData.name}.pdf`);
    } catch (error) {
        console.error(error);
    }
};

return (
    <>
        <Button onClick={handleDownloadLocation} icon labelPosition="right">
            Download Location
            <Icon name="download" />
        </Button>
        <div style={{ fontSize: 8 }} ref={locationTemplateRef}>
            <DownloadDocument location={locationData} />
        </div>
    </>
);
};

和位置数据：

const locationData = {
  name: "Example Location",
  address: "123 Main St, Anytown, USA",
  mainPhone: "555-1234",
  siteContact: "John Doe",
  internet: "100 Mbps",
  externalIP: "192.168.1.1",
  diocesanNetwork: "Yes",
  support: "Vendor X",
  modem: "Username: admin, Password: password123",
  localRange: "192.168.1.1 - 192.168.1.100",
  hardware: [
    { id: 1, device: "Router", hardwareLocation: "Office", ipAddress: "192.168.1.1", serial: "ABC123" },
    { id: 2, device: "Switch", hardwareLocation: "Server Room", ipAddress: "192.168.1.2", serial: "DEF456" },
],
  phones: [
    { id: 1, number: "555-5678", numName: "Reception", provider: "Provider A", misc: "N/A" },
    { id: 2, number: "555-7890", numName: "Office", provider: "Provider B", misc: "N/A" },
],
  notes: "This is a dummy location object for testing purposes."
};