convert json data to pdf using jQuery

Question

I want to export JSON data to pdf with out using any third party plugin.I am having data in Json and need to display data in pdf table structure using JQuery. Please let me know if its possible.

Here is sample JSON

 jsonResult.Products[         
       {PRODUCT_ID: 123, PRODUCT_NUMBER: "00022", PRODUCT_NAME: "HONDA", PRODUCT_TYPE: "VEHICLE "},
       {PRODUCT_ID: 783, PRODUCT_NUMBER: "08412394", PRODUCT_NAME: "HONDA", PRODUCT_TYPE: "MOTOR "}.....]

Code snippet using jS PDF-autotable

<script src="~/Scripts/JsPDF-Autotable.js"></script>

 $("#btnExportPDF").click(function () {

        let table = document.createElement('table');
        table.setAttribute("id", "pdfTable");
        let thead = document.createElement('thead');
        let tbody = document.createElement('tbody');
        let thead_tr = document.createElement('tr');

        let sample = dataResult.Cases[0];

        let columns = [];
        let columnData = [];

        for (let column in sample) columns.push(column);

        for (let i = 0; i < columns.length; i++) {
            let th = document.createElement('th');
            th.innerText = columns[i];
            thead_tr.appendChild(th);
        }
        thead.appendChild(thead_tr);
        for (let i = 0; i < dataResult.Cases.length; i++) {
            let tr = document.createElement('tr');
            let product = dataResult.Cases[i];
            for (let column = 0; column < columns.length; column++) {
                let td = document.createElement('td');
                td.innerText = product[columns[column]];
                columnData.push(product[columns[column]]);
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
        }
        table.appendChild(thead);
        table.appendChild(tbody);
        var doc = new jsPDF('p', 'pt');
        doc.autoTable(columns, columnData)
        doc.save("table.pdf");
    });

I tried to export to pdf using jspdf autotable and I am getting below error

JsPDF-Autotable.js:1538 Use of deprecated autoTable initiation

Please include all relevant code, including the code which is currently working to export the html table to pdf. — Heretic Monkey, May 13 '20 at 20:50
That code doesn't convert anything to PDF. It presents a dialog where, if the user has a Print to PDF capability, they can print the page to PDF. — Heretic Monkey, May 13 '20 at 21:04

score 0 · Answer 1 · answered May 13 '20 at 21:00

0

Yes it's definitely possible.

The process is very simple:

Prepare your JSON data
Create a table element filled with your data
Export table with JSPDF

Creating the table

let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody ');
let thead_tr = document.createElement('tr');

let sample = jsonResult.Products[0];

let columns = [];

for (let column in sample) columns.push(column);

for (let i = 0; i<columns.length;i++){
    let th = document.createElement('th');
    th.innerText = columns[i];
    thead_tr.appendChild(th);
}       
thead.appendChild(thead_tr);
for (let i = 0; i<jsonResult.Products.length;i++){
    let tr = document.createElement('tr');
    let product = jsonResult.Products[i];
    for (let column = 0; column < columns.length; column++){
        let td = document.createElement('td');
        td.innerText = product[columns[column]];
        tr.appendChild(td);
    }
    tbody.appendChild(tr);
}
table.appendChild(thead);
table.appendChild(tbody);
document.body.appendChild(table); // Now this is your table which you are going to export

Follow this SO answer/guide to export the HTML table with JSPDF

answered May 13 '20 at 21:00

Constantin

610
3
16

From the OP: "with out [sic] using any third party plugin"... – Heretic Monkey May 13 '20 at 21:05
Well, @HereticMonkey, it *is* possible if you cut out the relevant code bits from the jsPDF library. But who wants to do that?!? Constantin showed a way of at least doing the job without having any clientside PDF-creating capabilities otherwise. – Carsten Massmann May 14 '20 at 04:39
@Constantin Teo- I tried with the code provided and using JsPDF.The data is not aligned properly and pages are empty after first page has alignment issue.As I am having 15 columns and 3k rows of data.How can i fit those into pdf using JsPDF.I tried with JSPDF.Autotable which is giving me error : "failed to execute 'queryselector' on 'document' " – AMDI May 15 '20 at 13:57
@AMDI please update your question with relevant material that provides enough data for us to comprehend your issue. – Constantin May 15 '20 at 13:59
@ConstantinTeo - I have updated code whic i am using JSPDF-AutoTable – AMDI May 15 '20 at 14:41
@AMDI use `pdf.fromHTML()` and pass the `table` variable, amongst with the other required parameters (see the link in the answer) – Constantin May 15 '20 at 14:58
@ConstantinTeo - I tried using pdf.fromHTML() method but as i said earlier the page is not able to accommodate 15 columns and pages are showing as blank and data is shifting to right.Please let me know how to accommodate 15 columns with data of 3k rows – AMDI May 15 '20 at 15:43
When you say the "page" is not able to accommodate your data, which page are you referring to? Does the issue happen on DOM or on the JSPDF library? – Constantin May 15 '20 at 15:46
@ConstantinTeo - I am referring to pdf pages. when i exported to pdf using jsPDF. Please let me know if there are properties of jspdf to accommodate 15 columns with data gets wrapped. – AMDI May 16 '20 at 11:34
@AMDI please update your question by graphically exposing your issue. – Constantin May 16 '20 at 12:51
@ConstantinTeo- I have updated code in separate question with some code snippet and images https://stackoverflow.com/questions/61843197/facing-issue-while-exporting-to-pdf-with-more-columns. Please take a look and let me know if you can suggest. – AMDI May 16 '20 at 20:37

convert json data to pdf using jQuery

1 Answers1