JQGgrid- How to generate a pdf / excel file from the grid data
<p>I have the following JQGrid table, which is being generated from JSON data. I want to be able to generate/export or create a pdf file based on the table data state that is view able. I am using JSON , Jqgrid and Javascript</p>

<p>How do I generate a pdf file from the data ?
<a href="https://jsfiddle.net/615qovew/77/" rel="nofollow">Here My FIDDLE</a></p>

<p>JS CODE</p>

<pre><code> $(document).ready(function() {
        var jsonData = {
          "Name": "Julie Brown",
          "Account": "C0010",
          "LoanApproved": "12/5/2015",
          "LastActivity": "4/1/2016",
          "PledgedPortfolio": "4012214.00875",
          "MaxApprovedLoanAmt": "2050877.824375",
          "LoanBalance": "1849000",
          "AvailableCredit": "201877.824375",
          "Aging": "3",
          "Brokerage": "My Broker",
          "Contact": "Robert L. Johnson",
          "ContactPhone": "(212) 902-3614",
          "RiskCategory": "Yellow",
          "rows": [{
            "ClientID": "C0010",
            "Symbol": "WEC",
            "Description": "Western Electric Co",
            "ShareQuantity": "20638",
            "SharePrice": "21.12",
            "TotalValue": "435874.56",
            "LTVCategory": "Equities",
            "LTVRatio": "50%",
            "MaxLoanAmt": "217937.28"
          }, {
            "ClientID": "C0010",
            "Symbol": "BBB",
            "Description": "Bins Breakers and Boxes",
            "ShareQuantity": "9623",
            "SharePrice": "74.29125",
            "TotalValue": "714904.69875",
            "LTVCategory": "Equities",
            "LTVRatio": "50%",
            "MaxLoanAmt": "357452.349375"
          }, {
            "ClientID": "C0010",
            "Symbol": "GPSC",
            "Description": "Great Plains Small Cap Stock",
            "ShareQuantity": "49612",
            "SharePrice": "14.24",
            "TotalValue": "706474.88",
            "LTVCategory": "Mutual Funds - Small Cap",
            "LTVRatio": "40%",
            "MaxLoanAmt": "282589.952"
          }]
        },
        mmddyyyy = "";
      /*********************************************************************/


      $("#output").jqGrid({
        url: "/echo/json/",
        mtype: "POST",
        datatype: "json",
        postData: {
              json: JSON.stringify(jsonData)
        },
        colModel: [
          /**    { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
          {
            name: 'Symbol',
            width: 65
          }, {
            name: 'Description',
            width: 165
          }, {
            name: 'ShareQuantity',
            align: 'right',
            width: 85,
            classes: "hidden-xs", labelClasses: "hidden-xs",
            formatter: 'currency',
            formatoptions: {
              prefix: " ",
              suffix: " "
            }
          }, {
            name: 'SharePrice',
            label: 'Share Price',
            align: 'right',
            width: 100,
            classes: "hidden-xs", labelClasses: "hidden-xs",
            template: "number",
            formatoptions: {
              prefix: " $",
              decimalPlaces: 4
            }
          },
          /*{ label: 'Value1', 
                      name: 'Value1', 
                      width: 80, 
                      sorttype: 'number', 
                      formatter: 'number',
                      align: 'right'
                  }, */
          {
            name: 'TotalValue',
            label: 'Total Value',
            width: 160,
            sorttype: 'number',
            align: "right",
            search: false,
            formatter: 'currency',
            formatoptions: {
              prefix: " $",
              suffix: " "
            }
          }, {
            name: 'LTVRatio',
            label: 'LTV Ratio',
            width: 70,
            sorttype: 'number',
            align: "right",
            formatter: 'percentage',
            formatoptions: {
              prefix: " ",
              suffix: " "
            }
          }, {
            name: 'LTVCategory',
            label: 'LTV Category',
            classes: "hidden-xs", labelClasses: "hidden-xs",
            width: 120,
            width: 165
          },

          {
            name: 'MaxLoanAmt',
            label: 'MaxLoanAmount',
            width: 165,
            sorttype: 'number',
            align: "right",
            search: false,
            formatter: 'currency',
            formatoptions: {
              prefix: " $",
              suffix: " "
            }
          }

        ],
        additionalProperties: ["Symbol", "Description"],
        subGrid: true,
        subGridRowExpanded: function (subgridDivId, rowid) {
            var item = $(this).jqGrid("getLocalRow", rowid);
            $("#" + $.jgrid.jqID(subgridDivId)).html("Symbol: &lt;em&gt;" + item.Symbol +
                "&lt;/em&gt;&lt;br/&gt;Description: &lt;em&gt;" + item.Description + "&lt;/em&gt;");
        },
        beforeProcessing: function (data) {
            var symbolsMap = {}, symbolsValues = ":All", rows = data.rows, i, symbol;
            for (i = 0; i &lt; rows.length; i++) {
                symbol = rows[i].Symbol;
                if (!symbolsMap.hasOwnProperty(symbol)) {
                    symbolsMap[symbol] = 1;
                    symbolsValues += ";" + symbol + ":" + symbol;
                }
            }
            $(this).jqGrid("setColProp", 'Symbol', {
                stype: "select",
                searchoptions: {
                    value: symbolsValues
                }
            }).jqGrid('destroyFilterToolbar')
            .jqGrid('filterToolbar', {
                stringResult: true,
                searchOnEnter: false,
                defaultSearch : "cn"
            });
        },
        /*beforeProcessing: function (data) {
            var item, i, n = data.length;
            for (i = 0; i &lt; n; i++) {
                item = data[i];
                item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
                item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
                item.Value = parseFloat($.trim(item.Value).replace(",", ""));
                item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
                item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
            }
        }, */
        iconSet: "fontAwesome",
        loadonce: true,
        rownumbers: true,
        cmTemplate: {
          autoResizable: true,
          editable: true
        },
        autoResizing: {
          compact: true
        },
        autowidth: true,
        height: 'auto',
        forceClientSorting: true,
        sortname: "Symbol",
        footerrow: true,
        caption: "&lt;b&gt;Collateral Value&lt;/b&gt; &lt;span class='pull-right' style='margin-right:20px;'&gt;Valuation as of: " + mmddyyyy + "&lt;/span&gt;",
        loadComplete: function() {
          var $self = $(this),
            sum = $self.jqGrid("getCol", "Price", false, "sum"),
            sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
          //ltvratio =  $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
          $self.jqGrid("footerData", "set", {
            LTVCategory: "Max Approved Loan Amount:",
            Price: sum,
            MaxLoanAmt: sum1
          });
        }
      });

      $("#output").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});

        $(window).on("resize", function () {
            var newWidth = $("#output").closest(".ui-jqgrid").parent().width();
            $("#output").jqGrid("setGridWidth", newWidth, true);
        }).triggerHandle("resize");
    });
</code></pre>