How to use the jspdf function in jspdf

generatePDF = () => {

        const now = new Date().getTime();
        const report_generated_at = `${format.getFormatedDateAndTime(now)}`;
        const startTime =           `${format.getFormatedDateAndTime(this.props.activeReport.timestamp)}`;
        const endTime =             `${format.getFormatedDateAndTime(this.props.activeReport.endTime)}`;

        console.log(startTime, 123);

        // create a new pdf
        const doc = new jsPDF();

        // doc title
        doc.setFontSize(28)
        doc.text(20, 25, `Checkin Report`);

        // sub title (Room Name)
        doc.setFontSize(14);
        doc.text(20, 35, `Room Name: ${this.props.activeRoom.name}`);

        // meta data (checkin ID / start / end)
        doc.setTextColor(150);
        doc.setFontSize(10);
        doc.text(140, 22, 'ID:');
        doc.text(155, 22, this.props.activeReport.checkinID);
        doc.text(140, 28, 'From:');
        doc.text(155, 28, startTime);

createPdf = ({gaugeDataURL, gaugeWidth, gaugeHeight}) => {
    const {diagnosticData, onDownloadAsPdf, userYou} = this.props
    const {components, percent, shortTitle, title} = computeBobScore(diagnosticData)
    const doc = new jsPDF({format: 'a4', orientation: 'landscape', unit: 'cm'})

    const centerWidth = 14.85 // 29.7 cm / 2

    // Header.
    if (gaugeDataURL && gaugeWidth) {
      doc.addImage(gaugeDataURL, 'JPEG', centerWidth - 1.5, 2.4, 3, 3 * gaugeHeight / gaugeWidth)
    }
    doc.setFontSize(14)
    doc.text(`Diagnostic de ${config.productName}`, centerWidth, 2, 'center')
    doc.setTextColor(colors.DARK_TWO)
    doc.setFontSize(20)
    doc.setFontType('bold')
    doc.text(`${percent}%`, centerWidth, 4.2, 'center')
    doc.setFontSize(22)
    if (shortTitle || title) {
      doc.text(clearEmoji(clearMarkup(shortTitle || title)), centerWidth, 5.5, 'center')

export const generatePdfDocument = async (title, containerElement, reportFileName) => {
  const pageWidth = 210; // mm
  const pageHeight = 295; // mm
  const margin = 10; // mm
  const spacing = 5; // mm

  const contentWidth = pageWidth - margin * 2;

  const elements = containerElement.querySelectorAll('[data-printable]');

  let pdf = new jsPDF('p', 'mm', 'a4');
  let currentPositionY = margin;

  pdf.setFontSize(10);
  pdf.text(title, 105, currentPositionY + 2, "center");

  currentPositionY += 10;

  for (const element of elements) {
    const imageData = await domtoimage.toPng(element)
    const canvasHeightInMm = element.scrollHeight * contentWidth / element.scrollWidth;

    if (currentPositionY + canvasHeightInMm > (pageHeight - margin)) {
      pdf.addPage();
      currentPositionY = margin;
    }

init() {
        this.doc = new jsPDF('portrait', 'pt', [this.options.width, this.options.height]);
        this.options.width = Math.floor(this.options.width);
        this.options.height = Math.floor(this.options.height);
        this.currentPage = 1;
        this.printStatic();
    }

let leftHeight    = contentHeight
        let position      = 0
        let imgWidth      = 595.28
        let imgHeight     = 592.28 / contentWidth * contentHeight

        if (type === 'JPEG') {
          let img = document.createElement('a')
          img.href = canvas.toDataURL('image/jpeg').replace("image/jpeg", "image/octet-stream")
          img.download = this.getFilename('jpg')
          img.click()
          this.JPEGdownloadLoading = false
        }

        if (type === 'PDF') {
          let pageData = canvas.toDataURL('image/jpeg', 1.0)
          let PDF = new JsPDF('', 'pt', 'a4')

          if (leftHeight < pageHeight) {
            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
          } else {
            while (leftHeight > 0) {
              PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
              leftHeight -= pageHeight
              position -= 841.89

              if (leftHeight > 0) {
                PDF.addPage()
              }
            }
          }

          let filename = this.getFilename('pdf')

downloadPdf() {
    this.deselectAll();

    const pdf = new jsPDF('l', 'in', [7 + (1/4), 4 + (1/2)]);

    pdf.addImage(this.outsideView.toDataURL('image/png'), 'PNG', 0, 0, 7 + (1/4), 2 + (1/4));
    pdf.addImage(this.insideView.toDataURL('image/png'), 'PNG', 0, 2 + (1/4), 7 + (1/4), 2 + (1/4));

    pdf.save('MyBoxyCard.pdf');
  }

//一页pdf显示html页面生成的canvas高度
                let pageHeight = contentWidth / 592.28 * 841.89

                //未生成pdf的html页面高度
                let leftHeight = contentHeight

                //页面偏移
                let position = 0

                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                const imgWidth = 595.28
                const imgHeight = 592.28 / contentWidth * contentHeight

                const pageData = canvas.toDataURL('image/jpeg', 1.0)

                const pdf = new jsPDF('', 'pt', 'a4')

                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                } else {
                    while (leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight
                        position -= 841.89

                        //避免添加空白页
                        if (leftHeight > 0) {
                            pdf.addPage()
                        }
                    }

} else {
                rowDivs = element.getElementsByTagName('span');
            }

            const rowNum = rowDivs.length / colDivs.length;
            const rowData = [];

            for (let i = 0; i < rowNum; i++) {
                const row = [];
                for (let j = 0; j < colNum; j++) {
                    row.push(rowDivs[colNum * i + j].innerText)
                }
                rowData.push(row);
            }

            const doc = new jspdf('p', 'pt');
            const totalPagesExp = '{total_pages_count_string}';

            await this.addPdfImage(`/${appContext}/apis/dashboards/pdfHeader`, function (res) {
                localStorage.setItem('dashboardHeader', res);
            });

            await this.addPdfImage(`/${appContext}/apis/dashboards/pdfFooter`, function (res) {
                if (res != 'none') {
                    localStorage.setItem('dashboardFooter', res);
                }
            });

            doc.setFontType('bold');
            doc.text((pdf.internal.pageSize.getHeight() / 2 + 50), pdfConfig.title.coordinates.y - 30, mainTitle);
            const offset = doc.getStringUnitWidth(mainTitle);
            const padding = Array.apply(null, Array(mainTitle.length + 1)).map(function () { return ' ' })

export const printPayment = (account: Account, payment: Payment): PdfResult => {
  try {
    const date = formatDate(payment.date, { format: 'YYYY-MM-DD' });
    const doc = new jsPDF({
      unit: 'px'
    });

    doc.setFontSize(10);

    /** set the font style */
    doc.setFontStyle('bold');

    doc.addImage(LinodeLogo, 'JPEG', 150, 5, 120, 50);
    addLeftHeader(
      doc,
      1,
      1,
      date,
      'Payment',
      EU_COUNTRIES.includes(account.country),

.then((canvas) => {
      const imgData = canvas.toDataURL('image/png');

      const imgWidth = 210;
      const pageHeight = 298;
      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      let heightLeft = imgHeight;

      const doc = new JsPdf('p', 'mm');
      let position = 0;

      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
      doc.save('CV Cristian Boarna.pdf');
      showLinks();
    });
};