Dynamic PDF Report Generator for Analytics

main.js

// Usage
const handleExportPDF = async () => {
  const PdfGenerator = new PDFGenerator("House Type Configuration");
  PdfGenerator.addHeader();
  PdfGenerator.addFooter();
  PdfGenerator.addTextLine("House Type Configuration");
  PdfGenerator.addTextLine("Date: " + startDate + " - " + endDate);
  PdfGenerator.addTextLine("Client: Castle Green");

  const VisitSummaryMatricsEle = document.getElementById("VisitSummaryMatrics"); // "VisitSummaryMatrics
  const VisitDeviceTypeEle = document.getElementById("VisitDeviceType");
  const VisitDurationEle = document.getElementById("VisitDuration");
  const VisitDeviceModelEle = document.getElementById("VisitDeviceModel");

  await PdfGenerator.addMatrixChart(VisitSummaryMatricsEle, 180, 28);
  PdfGenerator.addSummary(AIContent);
  await PdfGenerator.addPieCharts(
    [VisitDeviceTypeEle, VisitDeviceModelEle],
    80,
    80
  );
  await PdfGenerator.addBarChart(VisitDurationEle, 180, 70);
  PdfGenerator.savePDF("House Type Configuration");
};

handleExportPDF();

PDFGenerator.js

// PDFGenerator.js
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import esv_logo from '../assets/images/logo_esv.png';

class PDFGenerator {
  constructor(title = "Analytics") {
    this.pdf = new jsPDF();
    this.currentY = 20;
    this.title = title;
  }

  convertToImage(element) {
    return html2canvas(element, {
      backgroundColor: "#fff",
      scale: 10,
    });
  }

  checkAndAddNewPage(height) {
    if (this.currentY + height > 297) {
      this.pdf.addPage();
      this.currentY = 10;
      this.addHeader(); // Add the header to each new page
      this.addFooter(); // Add the footer to each new page
    }
  }

  addTitle(title) {
    this.pdf.setFontSize(12);
    this.pdf.setFont("helvetica", "bold");
    this.pdf.text(title, 10, this.currentY);
    this.currentY += 10;
  }

  async addPieCharts(elements, width, height) {
    const canvases = await Promise.all(
      elements.map((element) => this.convertToImage(element))
    );
    // add pie charts to pdf by looping through the canvases, two charts per row
    canvases.forEach((canvas, index) => {
      const x = index % 2 === 0 ? 10 : 110;
      const y = Math.floor(index / 2) * 100 + this.currentY;
      this.checkAndAddNewPage(height);
      this.pdf.addImage(canvas, "JPEG", x, y, width, height);
    });
    this.currentY += Math.ceil(canvases.length / 2) * 100 + 10;
  }

  async addBarChart(element, width, height) {
    const image = await this.convertToImage(element);

    this.checkAndAddNewPage(height);
    this.pdf.addImage(image, "JPEG", 10, this.currentY, width, height, { align: "center" });
    this.currentY += height + 10;
  }

  async addMatrixChart(element, width, height) {
    const image = await this.convertToImage(element);
    this.checkAndAddNewPage(height);
    this.pdf.addImage(image, "JPEG", 10, this.currentY, width, height, { align: "center" });
    this.currentY += height + 10;
  }

  addText(text) {
    this.checkAndAddNewPage(12);
    this.pdf.setFontSize(12);
    this.pdf.setFont("helvetica", "normal");
    this.pdf.text(text, 10, this.currentY, { align: "left", maxWidth: 180 });
    this.currentY += (12 + 50);
  }

  addSummary(text) {
    this.checkAndAddNewPage(12);
    this.pdf.setFontSize(12);
    this.pdf.setFont("helvetica", "bold");
    this.pdf.text("Summary", 10, this.currentY, { align: "left" });
    this.currentY += 5;
    this.pdf.setFontSize(10);
    this.pdf.setFont("helvetica", "normal");
    this.pdf.text(text, 10, this.currentY, { align: "left", maxWidth: 180 });
    this.currentY += (12 + 90);
  }

  addTextLine(text) {
    this.checkAndAddNewPage(10);
    this.pdf.setFontSize(10);
    this.pdf.setFont("helvetica", "normal");
    this.pdf.text(text, 10, this.currentY, { align: "left" });
    this.currentY += 5;
  }


  addHeader() {
    this.pdf.addImage(esv_logo, "PNG", this.pdf.internal.pageSize.width - 80, 5, 60, 13);
    this.pdf.setFontSize(15);
    this.pdf.setFont("helvetica", "bold");
    this.pdf.text('Analytics Report', 10, 15);
    this.currentY = 20;
  }

  addFooter() {
    const pageCount = this.pdf.internal.getNumberOfPages();
    this.pdf.setFontSize(10);
    this.pdf.setFont("helvetica", "normal");
    // add generated date and page count to footer using UK date format Powered by EyeSiteView
    this.pdf.text(`Generated report on ${new Date().toLocaleDateString("en-GB")} | Powered by EyeSiteView`, 100, this.pdf.internal.pageSize.height - 11, { align: "center" });
    this.pdf.text(`Page ${pageCount}`, this.pdf.internal.pageSize.width - 20, this.pdf.internal.pageSize.height - 11, { align: "right" });
    // Other footer content goes here
  }

  addBreakLine() {
    this.currentY += 3;
    this.pdf.line(10, this.currentY, 200, this.currentY, "F", [1, 1]);
  }

  savePDF(title) {
    this.pdf.save(`${title}-analytics.pdf`);
  }
}

export default PDFGenerator;