How to create custom reports in Angular?

Issue

I want to create an angular component that would create custom reports, so that end-users can configure which fields they want to view, apply conditions on the data they want to view, even group them as per the fields they select and export them in formats like PDF or spreadsheet. How can I achieve that?

Solution

Sounds like a page full of checkboxes https://material.angular.io/components/checkbox/overview and buttons https://material.angular.io/components/button/overview perhaps even draggables if you want to get fancy https://material.angular.io/cdk/drag-drop/overview#cdk-drag-drop-sorting in combination of exporting the generated file https://www.npmjs.com/package/ngx-export-as or html print to file. Good luck!

import { Component } from "@angular/core";
import jspdf from "jspdf";
import html2canvas from "html2canvas";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {

  public captureScreen() {
    var data = document.getElementById("contentToConvert");
    html2canvas(data).then(canvas => {
      // Few necessary setting options
      var imgWidth = 208;
      var pageHeight = 295;
      var imgHeight = (canvas.height * imgWidth) / canvas.width;
      var heightLeft = imgHeight;

      const contentDataURL = canvas.toDataURL("image/png");
      let pdf = new jspdf("p", "mm", "a4"); // A4 size page of PDF
      var position = 0;
      pdf.addImage(contentDataURL, "PNG", 0, position, imgWidth, imgHeight);
      pdf.save("MYPdf.pdf"); // Generated PDF
    });
  }
}

<div>
  <input type="button" value="CPTURE" (click)="captureScreen()" />
</div>
<table id="contentToConvert">
  <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
  </tr>
  <tr>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
  </tr>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" />
  <label for="vehicle1"> I have a bike</label
  ><br />
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" />
  <label for="vehicle2"> I have a car</label
  ><br />
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" />
  <label for="vehicle3"> I have a boat</label
  ><br /><br />
  <input type="submit" value="Submit" />
</table>

Working example: https://stackblitz.com/edit/html-to-pdf-using-angular-fy5d5t?file=src%2Fapp%2Fapp.component.ts

Answered By - Joosep Parts