Javascript 使用jsPDF将页脚添加到pdf
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33515127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding Footer to pdf using jsPDF
提问by Sumeet
I am generating pdf from jsPDFapi , I want to add footer to each page with page number .
我正在从jsPDFapi生成 pdf ，我想用页码向每个页面添加页脚。
How to achieve this . It is having option of adding footer from fromHTML plugin , but I am writing without HTML.
如何实现这一点。它可以选择从 fromHTML 插件添加页脚，但我没有使用 HTML 编写。
var doc = new jsPDF("portrait","px","a4");
回答by Bas van Stein
You have to implement it yourself. You can do something like this:
你必须自己实现它。你可以这样做：
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()
回答by Reginald Goolsby
I know this post is old but I'm going to offer another solution. First define your total amount of pages. There's multiple ways to determine this so I won't go into that.
我知道这篇文章很旧，但我将提供另一种解决方案。首先定义您的总页数。有多种方法可以确定这一点，所以我不会深入讨论。
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.
This works well in a loop as you can set your page count by taking your array.length + 1 (as it's zero based).
这在循环中效果很好，因为您可以通过获取 array.length + 1（因为它是基于零的）来设置页数。
回答by Evandson Dantas
It's work for me:
这对我有用：
I just put coordenates for A4 Paper;
我只是为 A4 纸放置了坐标；
Just add the for before doc.save()like this;
只需像这样在doc.save()之前添加 for ；
// Create a document
// 创建一个文档
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');
回答by V-Q-A NGUYEN
If you need something like "current page / totalPage" displaying for each page. Using "Total page number" plugin available in jspdf v1.0+
如果您需要为每个页面显示“当前页面/总页面”之类的内容。使用 jspdf v1.0+ 中可用的“总页码”插件
How to use:
如何使用：
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);
}
It should work. Hope this helps.
它应该工作。希望这可以帮助。
回答by sainf
Stephen Collinsis the best answer! It works well with jspdf-autotableplugin.
斯蒂芬柯林斯是最好的答案！它适用于jspdf-autotable插件。
With this is made after all is added to the doc, so we can use easy the total page number!
有了这个之后就全部添加到doc中了，这样我们就可以轻松使用总页数了！
Add some style to the Stephen Collins answer: "page x of total"
为斯蒂芬柯林斯的回答添加一些风格：“总页数”
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()
回答by Stephen Collins
Run this function before you run doc.save()
在运行之前运行此函数 doc.save()
function addFooters() {
const pageCount = doc.internal.getNumberOfPages();
for(var i = 0; i < pageCount; i++) {
doc.text(String(i),196,285);
}
}
回答by Ortomala Lokni
After digging into the code, I think the feature you ask is not implemented. But there is a function to generate a footer from html and you can use this code to fullfill your need. But beware some part of the code is marked as "bad hack".
深入研究代码后，我认为您要求的功能没有实现。但是有一个功能可以从 html 生成页脚，您可以使用此代码来满足您的需求。但要注意代码的某些部分被标记为“ bad hack”。
From plugins/from_html.js
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;
}
};
