制表器pdf下载格式

时间:2019-10-16 01:05:03

标签: jspdf tabulator jspdf-autotable

我在获取pdf格式时遇到了一些麻烦。 目前看来,表格是在设置位置的所有内容之上绘制的,而不是在我试图放在顶部的标题数据之后绘制的。逻辑将是在autoTable函数中最后一个元素之后开始绘制表。尽管AutoTable setFontSize似乎也不适用于该表,但我也想减小表中的字体大小。

如果您在本页底部下载pdf文件,则可以看到结果:https://rhinoaustralia.com/price-list/

代码如下:

//trigger download of data.pdf file
$("#download-pdf").click(function(){
var today = new Date(); 
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDay();
table.download("pdf", "price-list.pdf", {
orientation:"portrait", //set page orientation to portrait
title:"Price List", //add title to report
autoTable:function(doc)
{ 
    var margins = 30;
    var marginsIndent = 20;
    doc.text("Name: ", margins, margins);
    doc.text(document.getElementById("user-name").value, margins + 60, margins);
    doc.text("Club: ", margins, margins+10);
    doc.text(document.getElementById("user-club").value, margins + 60, margins + 10);
    doc.text("Phone: ", margins, margins+20);
    doc.text(document.getElementById("user-tel").value, margins + 60, margins + 20);
    doc.text("Email: ", margins, margins+30);
    doc.text(document.getElementById("user-email").value, margins +60, margins + 30);
    doc.text("Date: ", margins, margins+40);
    doc.text(date, margins + 60, margins + 40);
    doc.setFontSize(10); //Want the tables font to be this size
},
})
});

我认为我对Tabulator中的autoTable集成的理解是错误的。

1 个答案:

答案 0 :(得分:1)

现在一切正常。 我所追求的部分是pdf创建结束时的返回样式。 有一个startY值可将表格向下推x第一页上的单位数量。

//trigger download of data.pdf file
$("#download-pdf").click(function()
{
    var logo = "Base64CodeImg"; //Really long string of the logo in base 64
    var today = new Date(); 
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDay();
    var doc = new jsPDF("p", "mm", "a4");

    table.download("pdf", "price-list.pdf", {
    orientation:"portrait", //set page orientation to portrait
    autoTable:function(doc)
    { 
        var margins = 30;
        var leftMargin = 40;
        var marginsIndent = 40;
        doc.addImage(logo, 'PNG', 400, 20, 120, 120);
        doc.text("Name: ", marginsIndent, 40);
        doc.text(document.getElementById("user-name").value, marginsIndent + 60, 40);
        doc.text("Club: ", marginsIndent, 60);
        doc.text(document.getElementById("user-club").value, marginsIndent + 60, 60);
        doc.text("Phone: ", marginsIndent, 80);
        doc.text(document.getElementById("user-tel").value, marginsIndent + 60, 80);
        doc.text("Email: ", marginsIndent, 100);
        doc.text(document.getElementById("user-email").value, marginsIndent +60, 100);
        doc.text("Date: ", marginsIndent,120);
        doc.text(date, marginsIndent + 60, 120);
        doc.setFontSize(10); //Want the tables font to be this size
        return {
            styles: {cellPadding: 2, fontSize: 8},
            startY: 180, //This was the way to push the start of the table down
        };
    },
    })
});