weixin_33681778 2017-03-22 19:03 采纳率: 0%
浏览 73

JSON资料转成autoTable jsPDF

Since few days, I try to find a soluce for my problem : With help of @Oliver, I get AJAX working. This is my PHP code for get data and 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);
}

Here, no problem. I need to use jsPDF for generate a PDF file. I need too autoTable (plugin for jsPDF if you don't know). In this PDF file, I must insert JSON data in a table with autoTable.

EDIT : This is my JS who generate the 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', null, null, 'right');
              pdf.setFontSize(8);
              pdf.setFont("helvetica");
              pdf.text(189, 8, 'le ' + 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');

So, from my AJAX request, I get a array, and in this array, each row who is an array. I search a soluce for parse my JSON, and populate autoTable for create a table so please. If you have idea for help me please. Thanks for your answer.

  • 写回答

1条回答 默认 最新

  • weixin_33691700 2017-03-27 12:41
    关注

    SOLUCE : 1- Make AJAX request and return JSON 2- In your success in AJAX, parse JSON data like this :

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

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题