2
votes

Comment exporter des données de table au format PDF et imprimer des fonctionnalités dans Angular 7?

J'essaye d'exporter mes données de table dynamique dans Excel, PDF et imprimer. Mais impossible de comprendre quel matériau angulaire utilise et les plugins npm pour exporter les données de la table au format PDF et avec l'option Imprimer. Pourriez-vous s'il vous plaît donner des suggestions et de l'aide pour résoudre ce problème?

Je peux exporter les données au format Excel, mais je ne peux pas les exporter au format PDF et je recherche toujours la fonctionnalité d'impression.

typescript angular angular7

0 commentaires

4 Réponses :

0
votes

pour exporter un tableau vers Excel, vous pouvez vous référer à ceci

et pour Print, vous pouvez utiliser du code javascript dans ts: cela fonctionne pour la forme réactive "this.formName.getValue ()" mais si vous utilisez la méthode traditionnelle il vous suffit de passer formvalue à la variable "a" reste, vous pouvez obtenir une valeur dans 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> `)
}

vous pouvez utiliser du code dactylographié dans HTML. p >

3 commentaires

Salut Ankit, merci pour votre réponse et j'ai essayé avec la méthode ci-dessus. Mais cela ne fonctionne pas pour moi. Obtenir une fenêtre contextuelle de page vierge en continuant le chargement. J'ai besoin d'implémenter cette méthode dans le service commun et j'ai besoin d'appeler en important le service commun dans mon composant. Alors, comment pouvons-nous transmettre des valeurs de formulaire dans ce service?

vous obtenez un écran vide car la balise de corps est vide en fonction. vous devez y écrire quelque chose. . si vous avez déjà créé le service. vous pouvez mettre cette fonction en service et prendre la forme valeur comme paramètre et remplacer la variable "a" valeur par elle. reste, vous pouvez accéder à la valeur du formulaire en utilisant une variable dans la balise body. par exemple: $ {{a.id}} pour obtenir la valeur du formulaire pour une utilisation réactive du formulaire - this.formName.getRawValue () pour une utilisation normale du modèle de formulaire - form.value ()

Vous devez transmettre l'identifiant et cet identifiant doit être le même en HTML et dans votre fonction. Veuillez utiliser la méthode que j'ai gardée ci-dessus et n'oubliez pas de transmettre l'ID.

0
votes

public generatePDF()
{
    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
    });
}
By using above function, we can convert the table data into pdf. and pass an id to you table. ....

0 commentaires

0
votes

Si vous utilisez un Mat-Table pour stocker vos données, ce qui suit vous aidera certainement: Remarque: Sur le bouton, cliquez sur downloadPdf ().

    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');
  }

1 commentaires

Pouvez-vous nous fournir une démo pour cela?

1
votes

merci et je suis capable d'imprimer les données du tableau HTML. Utilisez le code ci-dessous dans votre fichier .ts en passant l'identifiant comme je l'ai passé.

print(): void {
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=auto,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
  <html>
    <head>
      <title>Print tab</title>
      <style>
      //........Customized style.......
      </style>
    </head>
<body onload="window.print();window.close()">${printContents}</body>
  </html>`
    );
    popupWin.document.close();
}

0 commentaires