如何使用JsPDF-autoTable在每个页面的顶部添加徽标？-Java 学习之路

JsPdf-autoTable是一款非常出色的软件，非常简单易用 .

现在我想在每个页面的顶部添加一个徽标和一些文本，并在每个页面上添加一个 page X of Y 页脚，但我无法弄清楚如何 . 我想从URL（我网站上的本地文件）获取徽标的图像 .

某处有一个简单的例子吗？我认为我用JsPdf而不是JsPdf-autoTable来做 .

1 回答

该方法接受三个参数：

doc.autoTable(columns, rows, options);

第三个， options 是一个对象，您可以在文档here中检查其属性 .

此 options 对象接受创建者称为Hooks的内容 . 您正在寻找 addPageContent: function (data) {} 钩子，它将允许插入页眉和页脚 .

已经有一个关于如何在_1436795中执行此操作的示例 . 代码如下：

var doc = new jsPDF();
    var totalPagesExp = "{total_pages_count_string}";

    var pageContent = function (data) {
        // HEADER
        doc.setFontSize(20);
        doc.setTextColor(40);
        doc.setFontStyle('normal');
        if (base64Img) {
            doc.addImage(base64Img, 'JPEG', data.settings.margin.left, 15, 10, 10);
        }
        doc.text("Report", data.settings.margin.left + 15, 22);

        // FOOTER
        var str = "Page " + data.pageCount;
        // Total page number plugin only available in jspdf v1.0+
        if (typeof doc.putTotalPages === 'function') {
            str = str + " of " + totalPagesExp;
        }
        doc.setFontSize(10);
        doc.text(str, data.settings.margin.left, doc.internal.pageSize.height - 10);
    };

    doc.autoTable(getColumns(), getData(40), {
        addPageContent: pageContent,
        margin: {top: 30}
    });

    // Total page number plugin only available in jspdf v1.0+
    if (typeof doc.putTotalPages === 'function') {
        doc.putTotalPages(totalPagesExp);
    }

    return doc;

base64Img 变量必须有你的图像，我只测试了base64图像，据说你可以添加一个超链接，如果你有本 Map 像它将工作 .

Code Snippet:

(function() {

  function imgToBase64(url, callback) {
    if (!window.FileReader) {
      callback(null);
      return;
    }
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
      var reader = new FileReader();
      reader.onloadend = function() {
        callback(reader.result.replace('text/xml', 'image/jpeg'));
      };
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.send();
  }

  var base64Img;

  imgToBase64("https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50", function(base64) {
    base64Img = base64;
  });

  var getColumns = function() {
    return [{
        title: "ID",
        dataKey: "id"
      },
      {
        title: "Name",
        dataKey: "name"
      }
    ];
  };

  var getData = function() {
    var i = 0,
      len = 50,
      arr = [];

    for (i, len; i < len; i++) {
      arr.push({
        id: i,
        name: "example"
      });
    }

    return arr;
  }

  function generate() {
    var doc = new jsPDF();
    var totalPagesExp = "{total_pages_count_string}";

    var pageContent = function(data) {
      // HEADER
      doc.setFontSize(20);
      doc.setTextColor(40);
      doc.setFontStyle('normal');
      if (base64Img) {
        doc.addImage(base64Img, 'JPEG', data.settings.margin.left, 15, 10, 10);
      }
      doc.text("Example", data.settings.margin.left + 15, 22);

      // FOOTER
      var str = "Page " + data.pageCount;
      // Total page number plugin only available in jspdf v1.0+
      if (typeof doc.putTotalPages === 'function') {
        str = str + " of " + totalPagesExp;
      }
      doc.setFontSize(10);
      doc.text(str, data.settings.margin.left, doc.internal.pageSize.height - 10);
    };

    doc.autoTable(getColumns(), getData(), {
      addPageContent: pageContent,
      margin: {
        top: 30
      }
    });

    // Total page number plugin only available in jspdf v1.0+
    if (typeof doc.putTotalPages === 'function') {
      doc.putTotalPages(totalPagesExp);
    }

    doc.save("headerandfooterexample.pdf");
  }

  document.getElementById('download-btn').addEventListener('click', generate);

})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.1/jspdf.plugin.autotable.min.js"></script>
<button id="download-btn">Download PDF</button>

回复于 2024-04-30T15:37:07+08:00

如何使用JsPDF-autoTable在每个页面的顶部添加徽标？

1 回答

相关问题