Add text in header for jspdf if (autoTable Html)

Question

How can we add a text to the top of the pdf? I use autoTable.

 const handleDownloadPdf = async (orientation) => {
    const report = new jsPDF({
        orientation: orientation,
        unit: "pt",
        format: "a4",
    });

    report.autoTable({
        html: refExportExcel,
        margin: 15,
    })
    report.save('Report.pdf');
};

refExportExcel: It is a ref(NextJS) of the table.

Answer 1

You can use the text method before calling the autotable to add text to the top

import "./styles.css";
import jsPDF from "jspdf";
import autoTable from "jspdf-autotable";

const handleDownloadPdf = () => {
  const report = new jsPDF({
    unit: "pt",
    format: "a4"
  });
  const refExportExcel = document.getElementById("myTable");
  report.text(20, 20, "This is some text at the top of the PDF.");
  report.autoTable({
    html: refExportExcel,
    margin: 35
  });
  report.save("Report.pdf");
};

export default function App() {
  return (
    <div className="App">
      <table id="myTable">
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
      </table>
      <button onClick={handleDownloadPdf}>Create</button>
    </div>
  );
}