JSON 数据到 autoTable jsPDF

Question

几天来，我试图为我的问题找到一个解决方案：在@Oliver 的帮助下，我 AJAX 开始工作了。这是我获取数据的 PHP 代码和 return JSON :

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

在这里，没问题。我需要使用 jsPDF 生成 PDF 文件。我也需要 autoTable（如果您不知道，可以使用 jsPDF 插件）。在此 PDF 文件中，我必须使用 autoTable 在 table 中插入 JSON 数据。

编辑：这是我生成 PDF file 的 JS：

$.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');

因此，根据我的 AJAX 请求，我得到了一个数组，在这个数组中，每一行都是一个数组。我搜索了一个解析我的 JSON 的解决方案，并填充了 autoTable 以创建一个 table，所以请。如果您有帮助我的想法，请。谢谢你的回答。

Answer 1

解决方案： 1- 提出 AJAX 请求并 return JSON 2- 在 AJAX 中取得成功，像这样解析 JSON 数据：

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

JSON 数据到 autoTable jsPDF

JSON data to autoTable jsPDF

javascript

ajax

json

jspdf

jspdf-autotable