react hooks使用mhtml-to-word怎么给页面HTML中的 <div className={"table-weekday"}> <div className={"big-header"}> <div className={"big-title-left"}>早高峰</div> <div className={"big-title-right"}>晚高峰</div> </div> <div className={"small-header"}> <div className={"morning-peak-ranking"}>排名</div> <div className={"morning-peak-station"}>车站</div> <div className={"morning-peak-inbound-volume"}>进站量/人</div> <div className={"morning-peak-corresponding-period-last-year"}> 上年同比 </div> <div className={"morning-peak-proportion-whole-day"}>全天占比</div> <div className={"evening-peak-ranking"}>排名</div> <div className={"evening-peak-station"}>车站</div> <div className={"evening-peak-inbound-volume"}>进站量/人</div> <div className={"evening-peak-corresponding-period-last-year"}> 上年同比 </div> <div className={"evening-peak-proportion-whole-day"}>全天占比</div> </div>设置成表格样式显示

你可以使用mhtml-to-word库将页面HTML转换成Word文档，并且设置表格样式来显示这些数据。以下是一个示例代码片段，可以帮助你实现该功能：

import mhtmlToWord from "mhtml-to-word";

const data = [
  {
    morningPeakRanking: 1,
    morningPeakStation: "Station A",
    morningPeakInboundVolume: 100,
    morningPeakCorrespondingPeriodLastYear: "+10%",
    morningPeakProportionWholeDay: "50%",
    eveningPeakRanking: 2,
    eveningPeakStation: "Station B",
    eveningPeakInboundVolume: 80,
    eveningPeakCorrespondingPeriodLastYear: "+5%",
    eveningPeakProportionWholeDay: "40%",
  },
  // more data...
];

function MyComponent() {
  const tableRows = data.map((row) => (
    <tr>
      <td>{row.morningPeakRanking}</td>
      <td>{row.morningPeakStation}</td>
      <td>{row.morningPeakInboundVolume}</td>
      <td>{row.morningPeakCorrespondingPeriodLastYear}</td>
      <td>{row.morningPeakProportionWholeDay}</td>
      <td>{row.eveningPeakRanking}</td>
      <td>{row.eveningPeakStation}</td>
      <td>{row.eveningPeakInboundVolume}</td>
      <td>{row.eveningPeakCorrespondingPeriodLastYear}</td>
      <td>{row.eveningPeakProportionWholeDay}</td>
    </tr>
  ));

  const table = (
    <table>
      <thead>
        <tr>
          <th colSpan={5}>早高峰</th>
          <th colSpan={5}>晚高峰</th>
        </tr>
        <tr>
          <th>排名</th>
          <th>车站</th>
          <th>进站量/人</th>
          <th>上年同比</th>
          <th>全天占比</th>
          <th>排名</th>
          <th>车站</th>
          <th>进站量/人</th>
          <th>上年同比</th>
          <th>全天占比</th>
        </tr>
      </thead>
      <tbody>{tableRows}</tbody>
    </table>
  );

  const wordContent = (
    <>
      <div className="table-weekday">{table}</div>
    </>
  );

  const handleDownloadWord = async () => {
    const file = await mhtmlToWord(wordContent);
    saveAs(file, "myTable.docx");
  };

  return (
    <div>
      {table}
      <button onClick={handleDownloadWord}>Download Word</button>
    </div>
  );
}

在上面的代码中，我们首先将原始的数据数组转换为表格行数组。然后，我们使用JSX创建一个包含表格的React元素，并将其传递给mhtml-to-word的`mhtmlToWord`函数。最后，我们将生成的Word文档保存到本地文件系统中。