JSON Daten zu AutoTable jsPDF

Question

Seit einigen Tagen versuche ich eine Lösung für mein Problem zu finden: Mit Hilfe von @Oliver, ich bekomme AJAX arbeiten. Dies ist mein PHP-Code für Daten erhalten und JSON zurückgeben:

if (isset($_GET['nexans'])) { 

    $nexans = json_decode($_GET['nexans'], true); 

    $tab_req = array(); 


    foreach($nexans as $key => $value) { 
    $req_jsonmultipdf = $maPdoFonction - > PDF_Multi($key, $value, $_SESSION['ssetablissement_id'], '4', 'NEXANS'); 
    $tab_req[] = $req_jsonmultipdf - > fetchAll(PDO::FETCH_ASSOC); 
    } 

    $retour = array(
    "success" => true, 
    "data" => $tab_req 
); 

    header('Content-Type: application/json; charset=utf-8'); 
    echo json_encode($tab_req); 
} 

Hier, kein Problem. Ich muss jsPDF verwenden, um eine PDF-Datei zu generieren. Ich brauche auch autoTable (Plugin für jsPDF, wenn Sie nicht wissen). In dieser PDF-Datei muss ich JSON-Daten in eine Tabelle mit AutoTable einfügen.

EDIT: Das ist mein JS, die erzeugen die PDF file:

$.ajax({ 
     type: "GET", 
     url: "../modules/ajax/A.php", 
     data: { 
     'A': _json 
     }, 
     dataType: 'json', 
     success: function(json) { 
      var len = json.length; 
      if (len > 0) { 

      // Default export is a4 paper, portrait, using milimeters for units 
      var pdf = new jsPDF(); 
      pdf.page = 1; 

      var trame_eiffage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAGBCAMAAAC6vNp4AAAAIVBMVEWBgYEAAAD/AAAAAAD/AAAAAAD+AAAAAAD+AAAAAAD/AAD1ONESAAAACXRSTlMAERESEu3t7u5UgpEXAAAAVUlEQVR4Ae3UKQ6AUABDwbIv9z8wFlHxE4Kbkc+3ubpPXdePLksXeJu6bJ3d6f4K/6br/g1/pfsrGDJ32bvc3VDX9bPL2gX8m+7f+IEf03U/hn/T9Qd/S7Do6Hk+MwAAAABJRU5ErkJggg=='; 
      pdf.addImage(trame_eiffage, 'PNG', 207, 3, 3, 60); 

      /* Création de tableau avec des données JSON 
                  Source : https://github.com/simonbengtsson/jsPDF-AutoTable 
                */ 
      var columns = ["Chantier", "Codet", "Désignation", "Q.", "Prix U", "Livraison à", "GPS : Lat.", "GPS : Lon."]; 

      pdf.autoTable(columns, json, { 
       styles: { 
       fillColor: [156, 154, 154], 
       }, 
       headerStyles: { 
       lineWidth: 0.35, 
       lineColor: [0, 0, 0], 
       valign: 'middle', 
       halign: 'center', 
       fontStyle: 'bold' 
       }, 
       bodyStyles: { 
       lineWidth: 0.35, 
       lineColor: [0, 0, 0] 
       }, 
       margin: { 
       horizontal: 0, 
       top: 55, 
       bottom: 0 
       }, 
       columnStyles: { 
       0: { 
        columnWidth: 18, 
        halign: 'middle', 
        fontStyle: 'bold', 
        textColor: [0, 0, 0] 
       }, 
       1: { 
        columnWidth: 17, 
        halign: 'middle', 
        fontStyle: 'bold', 
        textColor: [0, 0, 0] 
       }, 
       2: { 
        columnWidth: 'auto', 
        halign: 'left', 
        fontStyle: 'bold', 
        textColor: [0, 0, 0] 
       }, 
       3: { 
        columnWidth: 8, 
        halign: 'left', 
        fontStyle: 'bold', 
        textColor: [0, 0, 0] 
       }, 
       4: { 
        columnWidth: 13, 
        halign: 'middle', 
        fontStyle: 'bold', 
        textColor: [0, 0, 0] 
       }, 
       5: { 
        columnWidth: 'auto', 
        halign: 'left', 
        fontStyle: 'bold', 
        textColor: [0, 0, 0] 
       }, 
       6: { 
        columnWidth: 'auto', 
        halign: 'left', 
        fontStyle: 'bold', 
        textColor: [0, 0, 0] 
       }, 
       7: { 
        columnWidth: 'auto', 
        halign: 'left', 
        fontStyle: 'bold', 
        textColor: [0, 0, 0] 
       } 
       }, 

       showHeader: 'everyPage', // 'everyPage', 'firstPage', 'never', 
       tableWidth: 183, 
       margin: { 
       top: 40, 
       right: 13, 
       bottom: 0, 
       left: 13 
       }, 
       pageBreak: 'auto', // 'auto', 'avoid' 
       overflow: 'linebreak' // visible, hidden, ellipsize or linebreak 
      }); 

      function header() { 
       /* Encodage en base64 de l'image (obligatoire) 
                   Source : https://www.base64encode.org/ 
                  */ 
       var logo_eiffage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMoAAABACAMAAABskBgkAAADAFBMVEUAAAABAQECAgIDAwMEBAQFBQUGBgYHBwcICAgJCQkKCgoLCwsMDAwNDQ0ODg4PDw8QEBARERESEhITExMUFBQVFRUWFhYXFxcYGBgZGRkaGhocHBwdHR0eHh4fHx8gICAhISEiIiIjIyMkJCQmJiYnJycoKCgpKSkqKiorKyssLCwtLS0uLi4vLy8wMDAxMTEyMjIzMzM1NTU2NjY3Nzc4ODg5OTk6Ojo8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJFRUVGRkZHR0dISEhJSUlKSkpLS0tMTExOTk5PT09QUFBTU1NUVFRWVlZXV1dYWFhZWVlbW1tcXFxdXV1eXl5fX19gYGBiYmJjY2NkZGRlZWVmZmZnZ2doaGhpaWlqampra2tsbGxtbW1ubm5vb29wcHBycnJzc3N1dXV2dnZ3d3d5eXl7e3t8fHx9fX1+fn5/f3//AAD/AwP/BQX/Dw//ERH/EhL/ExP/FRX/Fhb/Hh7/Hx//ISH/JSX/Ojr/PDz/PT3/SUn/W1v/XFz/Xl7/YWGAgICBgYGCgoKDg4OEhISFhYWGhoaHh4eIiIiJiYmKioqMjIyNjY2Ojo6Pj4+QkJCRkZGSkpKTk5OVlZWWlpaXl5eYmJiZmZmampqcnJydnZ2enp6fn5+goKChoaGioqKjo6OkpKSlpaWmpqanp6eoqKipqamqqqqsrKytra2urq6vr6+wsLCxsbGysrKzs7O0tLT/gYH/jo7/kJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABCr9+nAAABAHRSTlP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AU/cHJQAABUlJREFUeAHt2fdXVHcax/HPwCwFRlCKIi4KrAVBV1R0LbqWddeus7vjbhBU0BSLUVI0vSQmFiEmJhaKEosxRdGYaJL/7pP7PMwdnjtzJ54j4zkj575+kbnc65n3zP2WewDHjCAlSHlSQcrxV9I48aylvN+VzsfPWMqxrrGS8l7XWEl5o2uspPzyob8PnrmU9IKUUQtSTnzkL23Knqg1RGF/ZnvUouiPWr1M6HRePscUX21Z2eSYt6aTrqj1f9+UV7v8pU2ZCOs2BVQf1TgYRRT/grWTriE4CphkG4waqsOwSjOTUgKLYhCKirCmUNTBOkLXCjhCV2n9pxSqvnlOJRyXKZbDmp6ZlHwIWqcgwlQDEBNpQXUyyR2ovTRmQJR3Uu2sybcfYBWNUafcDsFRQqsVYhrVXoh6n5RLTDIBqpkjpkMsYMINqmKIdX+Ycvw1f+lSDkDU0toIsYqqGaKRxjUoJnkJw/KZsNhebBVAdGd0Mt4O8TdaCyB2URVBtNDY759SiTi62iEKmeJhGIIZTWmB2ERrMsRpKqgOGht9U9YD5TUQnzKuAo7QQaa4nvMUUsZDtNPKhSPnVtpxMdPvthkCQkc6PL8ZflXNVOcgqjKbAnWOlr3jb0HRqvH5JrkamER63mIBxGqmaoOYw4zOYFAnaXRDFFOdgfJZVVtp3Q8Dd8lis+J9B9XLVP+EWJTRlHOwBimiEGVUW2EUUEVg7EjMDitIzoUjfM/cX6CPBhjFmUmJwaKqs4viKhhVFD+GYByiOAjkPtSxL46a2aGIPv4EY3JmUuZAFPcMo4Jd1uZDLOpR/RS9EKWH7TV/1nVIksQGiiUQc+kDakuPupuZlGkQC2lB7XbfozhLY2/KmNUv4+R5xzaIWr+Uz0rEXLPDoeGT8tuv/hIpn9CqgtjjkzJo98X3afwDYqVd8ZCEYhlEA+P+DbHIrrGjm4yP+22b7tDw2RdHaM2G2O6diL366NgAkeu9l9fql5iJlLcevy/usfvifogKWin73wdh5PZ7ptktI+MGjCuDaB35ccqoUo7R6wefD30PRL0dF1N9Uno8e8Nl3q1mrc/yay4rgVj2mJR33/GnKW8zyWmIOp998QqqpRCzadyGekTXqRDwkK68kZm8xXMx1LcjW/wzfPIl8nUm2wwxn9ZSu5Yj9YTDUJ7xtjxpTiykCkMcNLcqRnLBUaRY9nni77Sq7VYGKkYjecxudpdO+1B8zWzy8T+zbaDjZs5TSKmAdYkC9gEd6krqqjqLrjBwgMq8/TaqXTnwKqXjMqzGzKTAY2jkWB7V11C0ahNzlFoHTKBxyfOodqPFE/PXfjp2w9qQLuXNY/7oq8yDordMVFN9WaZozdRD3ea/+IZW8iVbK8YVOsaVNhx1j5RZLwR/iwxSgpQgJUh5uoKUIKW9esyk7ObYSPke4mfu0yeOVpD/haOIXAhMXkfH9RogP0py/PPxx7+XszSlbWBggE5K7sV4Sk73wMCgk1IycLqqgjyQ23CTmxa7KWv09OxMuUexD1MRT8mlWjiJ3FlI1tVTxVP2Z/ENtjIWi0lKb95aakpocyzW5qQUxqIVZWTOIfJsLHYzntKop2dnSk1TU5OkcAf6hlNmNDW1OCnhqZh1j8TnzrGZee3xlEo9PTtTbpHUFC4oaLY3WCUxj2TJEjrq3ZR9WXyDfZFIeRCGDvvEWLmQ00OuKTxPstpNiWVxSkEkErmoKVyvKSiORMo1hY0VJP8SHl8eCbkpec7p0axM4QUh/1JfxI9cdiKvukevdHS8+BPJfpJ98ttHwR4sSMmkICVI+R3wABzxqWr6hgAAAABJRU5ErkJggg=='; 

       pdf.setFont("helvetica"); 
       pdf.setFontType("bold"); 
       pdf.setFontSize(20); 
       pdf.text(200, 15, 'DEMANDE D\'ACHAT\r', null, null, 'right'); 
       pdf.setFontSize(8); 
       pdf.setFont("helvetica"); 
       pdf.text(189, 8, '\r\r\r\rle ' + date_du_jour + ',', null, null, 'right'); 

       pdf.addImage(logo_eiffage, 'JPEG', 8, 8, 40, 14); 
      }; 
      header(); 

      pdf.setFontSize(10); 
      pdf.setFont("helvetica"); 
      pdf.setFontType("normal"); 
      pdf.text(18, 35, 'Voici le récapitulatif de votre demande d\'achat pour le fournisseur '); 

      pdf.setFontSize(10); 
      pdf.setFont("helvetica"); 
      pdf.setFontType("bold"); 
      pdf.text(121, 35, 'X'); 

      pdf.setFontSize(10); 
      pdf.setFont("helvetica"); 
      pdf.setFontType("normal"); 
      pdf.text(136, 35, ' : '); 

      // then use this as a counter. 
      function footer() { 
       pdf.setFontSize(8); 
       pdf.setFont("helvetica"); 
       pdf.setFontType("bold"); 
       pdf.text(150, 285, 'Page ' + pdf.page); 
       pdf.page++; 
      }; 
      footer(); 

      pdf.save('A' + date_du_jour + '.pdf'); 

Also, aus meiner AJAX-Request, ich habe ein Array erhalten, und in diesem Array, jede Zeile, die ein Array ist. Ich suche eine Lösung, um mein JSON zu parsen und autoTable zum Erstellen einer Tabelle aufzufüllen. Wenn Sie Idee haben, mir zu helfen, bitte. Danke für deine Antwort.

Answer 1

Soluce: 1- Make AJAX-Request und zurück JSON 2- In Ihrem Erfolg in AJAX, JSON-Daten wie folgt analysieren:

var rows = []; 
                           jQuery(json).each(function(i, item){ // FOR EACH ROW 
                            jQuery(item).each(function(i, item){ // EACH VALUE IN THE ROW -> INSERT DATA IN AN ARRAY WHO WILL BE USED BY JSPDF AUTOTABLE LATER 
                             rows.push([ 
                              item.chantier_ref, item.article_codet, item.description, item.quantite, item.prixU_commande+' €', item.livraison_add1 +' '+item.livraison_add2 +' '+item.livraison_add3 + item.livraison_cp +' '+item.livraison_ville, item.livraison_gps_lat+' °C', item.livraison_gps_lon+' °C' 
                             ]); 
                            }); 
                           });