[英]Adding Footer to pdf using jsPDF
I am generating pdf from jsPDF api , I want to add footer to each page with page number .我正在从jsPDF api 生成 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");
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()
Stephen Collins is the best answer!斯蒂芬柯林斯是最好的答案! It works well with jspdf-autotable plugin.
它适用于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()
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(因为它是基于零的)来设置页数。
Run this function before you run doc.save()
在运行
doc.save()
之前运行此函数
function addFooters() {
const pageCount = doc.internal.getNumberOfPages();
for(var i = 1; i <= pageCount; i++) {
doc.text(String(i), 196, 285);
}
}
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');
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.
希望这可以帮助。
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.
但是有一个功能可以从 html 生成页脚,您可以使用此代码来满足您的需求。 But beware some part of the code is marked as " bad hack ".
但要注意代码的某些部分被标记为“ bad hack ”。
From plugins/from_html.js来自插件/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;
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.