使用jQuery将json数据转换为pdf

Question

我想在不使用任何第三方插件的情况下将 JSON 数据导出为 pdf。我在 Json 中有数据，需要使用 JQuery 在 pdf 表结构中显示数据。如果可能，请告诉我。

这里是示例 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 "}.....]

使用 jS PDF-autotable 编写代码 sn-p

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

我尝试使用 jspdf autotable 导出为 pdf，但出现以下错误

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

Answer 1

是的，这绝对是可能的。

过程很简单：

1. 准备您的 JSON 数据
2. 创建一个用您的数据填充的表格元素
3. 使用JSPDF 导出表

创建表格

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 SOanswer/guide 用 JSPDF 导出 HTML 表格