Custom header in npm react-to-print

81 Views Asked by At

I need to create a custom header that will be inserted at the beginning of each new page in my PDF export.

I tried many ways but none of them worked I also tried to find a way in the documentation : https://www.npmjs.com/package/react-to-print but I didn't find anything there either.

<h3 className="mt-1">Manual</h3>
   {manual.map((manualItem, manualIndex) => {
     return (
      <a
        key={manualIndex}
        className="hover custom-download"
         onClick={() =>
         handlePrintManual(manualItem)
        }
       >
         <i className="bx bxs-download"></i>{" "}
          {manualItem.header}
   </a>
  );
})}



const Manuals = React.useRef();

  const handlePrintManual = useReactToPrint({
    content: () => Manuals.current,
    documentTitle: `${manual.map((manualItem) => manualItem.header)}.pdf`,
    copyStyles: true,
  });



  const ManualHeader = () => {
    return (
      <tr>
        <div className="center CenterHeader">
          <tr>
            <th className="CatalogSheetProductTitle">
              {manual.map((manualItem, manualIndex) => (
                <>{manualItem.header}</>
              ))}
            </th>
          </tr>
          <th className="CatalogSheetTitle">
            <span className="sheetCatalogTitle">Instalační manual</span> <br />
            <span className="metel_logo_css">
              METEL<span className="metel_dot">.</span>EU
            </span>
          </th>
        </div>
      </tr>
    );
  };


<table
        ref={Manuals}
        style={{ color: "black" }}
        className="CatalogSheetTable"
      >
        <tbody>
          {ManualHeader()}
          {manual.map((manualItem, manualIndex) => (
            <tr key={manualIndex}>
              <td>{manualItem.text}</td>
            </tr>
          ))}
        </tbody>
      </table>
0

There are 0 best solutions below