A guide on exporting table data to PDF and enabling printing features in Angular 7

Question

A guide on exporting table data to PDF and enabling printing features in Angular 7

Can anyone provide guidance on how to export my dynamic table data into Excel, PDF, and for printing using the appropriate Angular Material components and npm plugins? I have successfully exported the data as an Excel file, but am struggling with exporting as a PDF and adding a print option. Any advice or suggestions would be greatly appreciated!

angular typescript angular7

Answer 1

Answer №1

Appreciate your help in enabling me to successfully extract and display the information from an HTML table. Feel free to utilize the code snippet below in your .ts file, by utilizing the ID parameter as I have demonstrated.

displayData(): void {
    let dataToPrint, newWindow;
    dataToPrint = document.getElementById('data-section').innerHTML;
    newWindow = window.open('', '_blank', 'top=0,left=0,height=auto,width=auto');
    newWindow.document.open();
    newWindow.document.write(`
  <html>
    <head>
      <title>Print Data</title>
      <style>
      //........Custom Styling.......
      </style>
    </head>
<body onload="window.print();window.close()">${dataToPrint}</body>
  </html>`
    );
    newWindow.document.close();
}

Answer 2

Appreciate your help in enabling me to successfully extract and display the information from an HTML table. Feel free to utilize the code snippet below in your .ts file, by utilizing the ID parameter as I have demonstrated.

displayData(): void {
    let dataToPrint, newWindow;
    dataToPrint = document.getElementById('data-section').innerHTML;
    newWindow = window.open('', '_blank', 'top=0,left=0,height=auto,width=auto');
    newWindow.document.open();
    newWindow.document.write(`
  <html>
    <head>
      <title>Print Data</title>
      <style>
      //........Custom Styling.......
      </style>
    </head>
<body onload="window.print();window.close()">${dataToPrint}</body>
  </html>`
    );
    newWindow.document.close();
}

Answer 3

Answer №2

function createPDF()
{
    var element = document.getElementById('contentToConvert');
    html2canvas(element).then(canvas => {
        // Set necessary 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
    });
}

With the function above, you can easily convert table data into a PDF by providing the ID of the table. ....

Answer 4

function createPDF()
{
    var element = document.getElementById('contentToConvert');
    html2canvas(element).then(canvas => {
        // Set necessary 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
    });
}

With the function above, you can easily convert table data into a PDF by providing the ID of the table. ....

Answer 5

Answer №3

If you are utilizing a Mat-Table to organize your data, the following tips will surely be beneficial: Please take note that on button click, the downloadPDF() function will execute.

    import 'jspdf-autotable';
    import * as jsPDF from 'jspdf';
    constructor(){}
    ngOnInit(){}

     documentHeaders = [
    'Work Order #',
    'Product #',
    'Asset',
    'Operator',
    'Task Name',
    'Target Minute',
    'Actual Minute',
    'Productivity %',
    'Status',
    'Start Time',
    'End Time'
     ];
    functionCall(){
    //will return an array with data which is to be displayed}
    downloadPDF() {
    doc.text('Some Text here ', 10, 10);
    const head = [this.documentHeaders];
    let tableArray = new Array();
    let data = this.functionCall('PDF');
    let header: string;
    header = 'Shift Summary ' + formatDate(this.tDate, 'yyyy/MM/dd', 'en');
    console.log(header);

    const doc = new jsPDF();
    doc.text(header, 10, 10);

    ((doc as any).autoTable as AutoTable)({
      head: head,
      body: data,
      theme: 'grid',
      styles: {
        overflow: 'visible',
        cellWidth: 17,
        minCellWidth: 17
        // fillColor: [255, 0, 0]
      },
      headStyles: {
        cellWidth: 17,
        minCellWidth: 17
      },
      didDrawCell: data => {
        console.log(data.column.index);
      }
    });

    doc.save(header + '.pdf');
  }

Answer 6

If you are utilizing a Mat-Table to organize your data, the following tips will surely be beneficial: Please take note that on button click, the downloadPDF() function will execute.

    import 'jspdf-autotable';
    import * as jsPDF from 'jspdf';
    constructor(){}
    ngOnInit(){}

     documentHeaders = [
    'Work Order #',
    'Product #',
    'Asset',
    'Operator',
    'Task Name',
    'Target Minute',
    'Actual Minute',
    'Productivity %',
    'Status',
    'Start Time',
    'End Time'
     ];
    functionCall(){
    //will return an array with data which is to be displayed}
    downloadPDF() {
    doc.text('Some Text here ', 10, 10);
    const head = [this.documentHeaders];
    let tableArray = new Array();
    let data = this.functionCall('PDF');
    let header: string;
    header = 'Shift Summary ' + formatDate(this.tDate, 'yyyy/MM/dd', 'en');
    console.log(header);

    const doc = new jsPDF();
    doc.text(header, 10, 10);

    ((doc as any).autoTable as AutoTable)({
      head: head,
      body: data,
      theme: 'grid',
      styles: {
        overflow: 'visible',
        cellWidth: 17,
        minCellWidth: 17
        // fillColor: [255, 0, 0]
      },
      headStyles: {
        cellWidth: 17,
        minCellWidth: 17
      },
      didDrawCell: data => {
        console.log(data.column.index);
      }
    });

    doc.save(header + '.pdf');
  }

Answer 7

Answer №4

If you need to export a table to Excel, check out this helpful guide.

When it comes to printing, you can utilize JavaScript code in your TypeScript file. For reactive forms, use "this.formName.getValue()", while for traditional forms, simply assign the form value to a variable "a" and print it using document.write(${a.name}).

print(formValue){
        let popupWin;
        let a: type = JSON.parse(JSON.stringify(formValue));
        popupWin = window.open('', '_blank', 
         'top=0,left=0,height=100%,width=auto,toolbar=no,titlebar=no');
        popupWin.document.open();
        popupWin.document.write(`<html> <head>
</head><body onload="window.print();window.close()">
 heya !! ${{ a }}
</body> `)
}

You have the flexibility to incorporate TypeScript code directly into your HTML.

Answer 8

If you need to export a table to Excel, check out this helpful guide.

When it comes to printing, you can utilize JavaScript code in your TypeScript file. For reactive forms, use "this.formName.getValue()", while for traditional forms, simply assign the form value to a variable "a" and print it using document.write(${a.name}).

print(formValue){
        let popupWin;
        let a: type = JSON.parse(JSON.stringify(formValue));
        popupWin = window.open('', '_blank', 
         'top=0,left=0,height=100%,width=auto,toolbar=no,titlebar=no');
        popupWin.document.open();
        popupWin.document.write(`<html> <head>
</head><body onload="window.print();window.close()">
 heya !! ${{ a }}
</body> `)
}

You have the flexibility to incorporate TypeScript code directly into your HTML.

A guide on exporting table data to PDF and enabling printing features in Angular 7

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to connect my Typescript NextJS code to my Express API?

Why won't my code work with a jQuery selector?

Experiencing difficulty retrieving individual :id information from a list in MEAN stack

Using useEffect with promises causing TypeScript errors

What is a more efficient way to differentiate a group of interfaces using an object map instead of using a switch statement?

Assembly of Components

Ways to avoid route change triggered by an asynchronous function

Is there a way to apply a single mongoose hook to multiple methods in TypeScript?

ViewChild with the focus method

Utilizing aframe in conjunction with Angular 2

Angular 6: Harnessing the Power of RouterLinks

Error: nvm command not found

Obtain a Service instance using the console

Guide on displaying tooltip messages for a custom directive in Visual Studio Code

Error: Module '/node_modules/.vite/deps/react-pro-sidebar.js?v=913080ef' does not export 'ProSidebar' as requested

A guide on simulating childprocess.exec in TypeScript

Receiving a null value when accessing process.env[serviceBus]

Transformation of Ionic 2 ScreenOrientation Plugin

The browser is failing to send cookies to the backend and is also not properly setting them initially

Unfortunately, despite attempting to kill all processes linked to port 4200, it seems that it is still in use