Die Methode akzeptiert drei Parameter:
doc.autoTable(columns, rows, options);
Die dritte, options, ein Objekt ist, können Sie seine Eigenschaften in der Dokumentation here überprüfen.
Dieses options Objekt akzeptiert, was der Ersteller Hooks nannte. Sie suchen nach dem Hook, der das Einfügen eines Headers und einer Fußzeile ermöglicht.
Es gibt bereits ein Beispiel dafür, wie dies in der demo zu tun ist. Der Code lautet wie folgt:
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;
Die base64Img Variable Ihr Bild haben muss, ich habe mit base64 Bilder nur getestet, angeblich können Sie einen Hyperlink hinzufügen, und es wird funktionieren, wenn Sie das Bild vor Ort haben .
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>