制表符pdf下载格式

Question

我在按照我想要的方式设置 pdf 格式时遇到了一些问题。目前看来，table 被绘制在设定位置的所有内容之上，而不是在我试图放在顶部的 header 数据之后。逻辑是在 autoTable 函数中的最后一个元素之后开始绘制 table。我还想使 table 中的字体大小更小，尽管 AutoTable setFontSize 似乎也不适用于 table。

如果您在本页底部下载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 集成的理解有问题。

Answer 1

现在一切正常。我所追求的部分是 pdf 创建末尾的 return 样式。有一个 startY 值将第一页上的 table 向下推 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
        };
    },
    })
});

制表符pdf下载格式

Tabulator pdf download formatting

jspdf

jspdf-autotable

tabulator