Tabulator pdf 下载格式答案

【问题标题】：Tabulator pdf download formattingTabulator pdf 下载格式
【发布时间】：2019-10-16 01:05:03
【问题描述】：

我在按照我所追求的方式格式化 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 集成的理解有问题。

【问题讨论】：

看看您的网站，您似乎已经解决了这个问题，您介意发布您的解决方案以便其他人可以从中学习吗？
我已经发布了下面的工作。干杯

标签： jspdf tabulator jspdf-autotable

【解决方案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
        };
    },
    })
});

【讨论】：