JsPdf-autoTable是一款非常出色的软件,非常简单易用。
现在我想在每个页面的顶部添加一个徽标和一些文本,并在每个页面上添加page X of Y
页脚,但我无法弄清楚如何。我想从URL(我网站上的本地文件)获取徽标的图像。
某处有一个简单的例子吗?我认为我是用JsPdf做的,而不是JsPdf-autoTable。
答案 0 :(得分:9)
该方法接受三个参数:
doc.autoTable(columns, rows, options);
第三个options
是一个对象,您可以在文档here中查看其属性。
此options
对象接受创建者名为 Hooks 的内容。您正在寻找addPageContent: function (data) {}
钩子,它将允许插入页眉和页脚。
在demo中已经有一个关于如何执行此操作的示例。代码如下:
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图像,据说您可以添加超链接,如果您在本地拥有图像,它将起作用。
代码段:
(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>