我正在使用jsPDF API生成PDF文件，我希望在每个页面底部添加页码。
如何实现这一点。虽然有通过fromHTML插件添加页脚的选项，但我是不使用HTML来编写的。
var doc = new jsPDF("portrait","px","a4");
使用jsPDF为pdf添加页脚
15
- Sumeet Kumar Yadav
2
1https://github.com/MrRio/jsPDF 这个页面可以作为参考。 - Ivin Raj
我已经尝试查看了这个API文档，但没有找到添加页脚的方法。你有任何想法吗？ - Sumeet Kumar Yadav
8个回答
21
你需要自己实现它。你可以像这样做：
var doc = new jsPDF();
doc.page=1; // use this as a counter.
function footer(){
doc.text(150,285, 'page ' + doc.page); //print number bottom right
doc.page ++;
};
// and call footer() after each doc.addPage()
- Bas van Stein
1
1我在addPage()方法之前调用了footer函数，但是如果pdf只有一页，则不会被调用，因为没有页面可以添加。 - Sumeet Kumar Yadav
16
Stephen Collins 是最佳的答案！它与 jspdf-autotable 插件兼容良好。
当所有内容都添加到文档后，使用此方法可轻松地获取总页数！
为 Stephen Collins 的答案添加一些样式："<em>第x页，共y页</em>"
const addFooters = doc => {
const pageCount = doc.internal.getNumberOfPages()
doc.setFont('helvetica', 'italic')
doc.setFontSize(8)
for (var i = 1; i <= pageCount; i++) {
doc.setPage(i)
doc.text('Page ' + String(i) + ' of ' + String(pageCount), doc.internal.pageSize.width / 2, 287, {
align: 'center'
})
}
}
let doc = new jsPDF()
doc.text(...)
doc.autoTable(...)
addFooters(doc)
doc.save()
- sainf
8
在运行
doc.save()之前，请先运行此函数。function addFooters() {
const pageCount = doc.internal.getNumberOfPages();
for(var i = 1; i <= pageCount; i++) {
doc.text(String(i), 196, 285);
}
}
- Stephen Collins
1
1有很多复杂的答案，但这个简单的答案对我很有用。可以完美地处理多个自动表格。 （请确保更改单位以匹配您的文档单位） - Brian Pursley
8
我知道这篇文章已经有点过时了，但是我会提供另一种解决方案。首先定义你的总页数。有多种方法可以确定这一点，所以我不会详细展开。
var doc = new jsPDF('p', 'pt', 'letter');
doc.page = 1; // use this as a counter.
var totalPages = 10; // define total amount of pages
// HEADER
doc.setFontSize(20);//optional
doc.setTextColor(40);//optional
doc.setFontStyle('normal');//optional
doc.text("Report", 50, 22);// set your margins
// FOOTER
var str = "Page " + doc.page + " of " + totalPages;
doc.setFontSize(10);// optional
doc.text(str, 50, doc.internal.pageSize.height - 10);//key is the interal pageSize function
// Add Page content
.....
//Add new page and increase page count
doc.addPage();
doc.page ++;
//Begin process all over again.
在循环中，这样做效果很好，因为您可以通过使用数组的长度 +1（因为它是从零开始）来设置页面计数。
- Reginald Goolsby
1
谢谢回答，我在使用jspdf时遇到了另一个问题。因为它不支持utf8或多字符支持。 - Sumeet Kumar Yadav
3
如果您需要在每个页面上显示“当前页数/总页数”之类的内容。可以使用在jspdf v1.0+中可用的“总页数插件”。
使用方法如下：
应该能够正常工作。希望这能帮到你。
使用方法如下：
var doc = new jsPDF();
doc.page=1; // use this as a counter.
var totalPagesExp = "{total_pages_count_string}";
function footer(){
var str = "Page " + doc.page;
if (typeof doc.putTotalPages === 'function') {
str = str + "/" + totalPagesExp;
}
doc.text(150,285, str); //print number bottom right
}
// call footer() after each doc.addPage()
// and before doc.save() do not forget put
if (typeof doc.putTotalPages === 'function') {
doc.putTotalPages(totalPagesExp);
}
应该能够正常工作。希望这能帮到你。
- V-Q-A NGUYEN
3
这适用于我：
我只是添加了A4纸张的坐标；
只需在 doc.save() 前面加上 for，像这样；
// 创建一个文档
我只是添加了A4纸张的坐标；
只需在 doc.save() 前面加上 for，像这样；
// 创建一个文档
var doc = new jsPDF('p','mm','a4');
// Some stuff
doc.text("Some text", 74, 150);
doc.addPage();
doc.text("Some text", 74, 150);
doc.addPage();
doc.text("Some text", 74, 150);
doc.addPage();
doc.text("Some text", 74, 150);
doc.addPage();
doc.text("Last page", 74, 150);
// PAGE NUMBERING
// Add Page number at bottom-right
// Get the number of pages
const pageCount = doc.internal.getNumberOfPages();
// For each page, print the page number and the total pages
for(var i = 1; i <= pageCount; i++) {
// Go to page i
doc.setPage(i);
//Print Page 1 of 4 for example
doc.text('Page ' + String(i) + ' of ' + String(pageCount),210-20,297-30,null,null,"right");
}
// Save the doc
doc.save('test.pdf');
- Evandson Dantas
1
在深入研究代码后，我认为您所要求的功能尚未实现。但是有一个函数可以从HTML生成页脚，您可以使用此代码来满足您的需求。但请注意，代码的某些部分被标记为“bad hack”。
checkForFooter = function (elem, renderer, elementHandlers) {
//check if we can found a <footer> element
var footer = elem.getElementsByTagName("footer");
if (footer.length > 0) {
footer = footer[0];
//bad hack to get height of footer
//creat dummy out and check new y after fake rendering
var oldOut = renderer.pdf.internal.write;
var oldY = renderer.y;
renderer.pdf.internal.write = function () {};
DrillForContent(footer, renderer, elementHandlers);
var footerHeight = Math.ceil(renderer.y - oldY) + 5;
renderer.y = oldY;
renderer.pdf.internal.write = oldOut;
//add 20% to prevent overlapping
renderer.pdf.margins_doc.bottom += footerHeight;
//Create function render header on every page
var renderFooter = function (pageInfo) {
var pageNumber = pageInfo !== undefined ? pageInfo.pageNumber : 1;
//set current y position to old margin
var oldPosition = renderer.y;
//render all child nodes of the header element
renderer.y = renderer.pdf.internal.pageSize.height - renderer.pdf.margins_doc.bottom;
renderer.pdf.margins_doc.bottom -= footerHeight;
//check if we have to add page numbers
var spans = footer.getElementsByTagName('span');
for (var i = 0; i < spans.length; ++i) {
//if we find some span element with class pageCounter, set the page
if ((" " + spans[i].className + " ").replace(/[\n\t]/g, " ").indexOf(" pageCounter ") > -1) {
spans[i].innerHTML = pageNumber;
}
//if we find some span element with class totalPages, set a variable which is replaced after rendering of all pages
if ((" " + spans[i].className + " ").replace(/[\n\t]/g, " ").indexOf(" totalPages ") > -1) {
spans[i].innerHTML = '###jsPDFVarTotalPages###';
}
}
//render footer content
DrillForContent(footer, renderer, elementHandlers);
//set bottom margin to previous height including the footer height
renderer.pdf.margins_doc.bottom += footerHeight;
//important for other plugins (e.g. table) to start rendering at correct position after header
renderer.y = oldPosition;
};
//check if footer contains totalPages which shoudl be replace at the disoposal of the document
var spans = footer.getElementsByTagName('span');
for (var i = 0; i < spans.length; ++i) {
if ((" " + spans[i].className + " ").replace(/[\n\t]/g, " ").indexOf(" totalPages ") > -1) {
renderer.pdf.internal.events.subscribe('htmlRenderingFinished', renderer.pdf.putTotalPages.bind(renderer.pdf, '###jsPDFVarTotalPages###'), true);
}
}
//register event to render footer on every new page
renderer.pdf.internal.events.subscribe('addPage', renderFooter, false);
//render footer on first page
renderFooter();
//prevent footer rendering
SkipNode['FOOTER'] = 1;
}
};
- Ortomala Lokni
0
如果有人想要在HTML或文本格式中添加页脚或页眉，我这里都提供了。
let header: any = document.querySelector('#header');
html2canvas(header).then((headerCanvas) => {
let doc = new jsPDF({
orientation: 'portrait',
format: 'a4',
unit: 'pt'
});
let widthInMm = 500; // Set the width of the PDF content in millimeters
pdf.style.width = '600px';
if (pdf) {
doc.html(pdf, {
x: 0,
y: 0,
html2canvas: {
width: widthInMm,
height: pdf.offsetHeight
},
margin: [150, 0, 20, 0],
autoPaging: 'text',
callback: async function (doc) {
const pageCount = (doc as any).internal.getNumberOfPages();
// For each page, print the page number and the total pages
for (let i = 1; i <= pageCount; i++) {
// Go to page i
doc.setPage(i);
var pageSize = doc.internal.pageSize;
var pageHeight = pageSize.height
? pageSize.height
: pageSize.getHeight();
doc.text(
'Page ' + String(i) + ' / ' + String(pageCount),
doc.internal.pageSize.getWidth() - 60,
pageHeight - 8
); //
const pagewidth = doc.internal.pageSize.getWidth();
doc.addImage(headerCanvas, 'PNG', 10, 10, pagewidth - 20, 130);
}
}
}
})
- Ramon G.
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接