Trying to add Page Number in the footer #116
Comments
Just to clarify, does this mean you've tried using it without specifying those values? Such as: Would it be possible to try a |
|
I tried it and nothing happened : <footer>
<div id="footer">
<h1 class="txt">SpringCard</h1>
<hr class="solid">
<div class="nbPages">Page <div class="pageNumber"></div>/ <div class="totalPages "></div></div>
</div>
</footer> |
<footer>
<div id="footer">
<h1 class="txt">SpringCard</h1>
<hr class="solid">
<div class="nbPages">Page <span class="pageNumber"></span>/ <span class="totalPages ">4</span></div>
</div>
</footer>This works for me Are you sure you properly saved your file |
|
hello @nopeless how did you create the pdf ? Like me or with puppeteer ? |
Its just your code. It worked first try. Would you like a stackblitz (free repo hosting website) for reproduction? |
|
Nothing else really ? |
|
GitPod* I have no idea why the machine in GitPod can't install some libraries (can't run puppeteer) but use this code const path = require('path');
const mdpdf = require('./src/index.js');
const options = {
source: "test.md",
destination: "test.pdf",
footer: 'footer.html',
pdf: {
format: 'A4',
orientation: 'portrait',
quality: '100',
header: {
height: '25mm'
},
footer: {
height: '17mm'
},
border: {
top: '10mm',
left: '20mm',
bottom: '5mm',
right: '20mm'
},
}
};
// Call convert which returns a thenable promise with the pdfPath
mdpdf.convert(options).then(pdfPath => {
console.log('Fichier PDF créé :', pdfPath);
}).catch(err => {
// Don't forget to handle errors
console.error(err);
});
<footer>
<div id="footer">
<h1 class="txt">SpringCard</h1>
<hr class="solid">
<div class="nbPages">Page <span class="pageNumber" style="font-size: 50px"></span>/ <span class="totalPages ">4</span></div>
</div>
</footer> |
|
oh and uh... |
|
Ok ok could you make a screenshot of the pages ? To see what you get ? |
|
When I try to use your code here is what happen : |
|
@nopeless const mdpdf = require('./src/index.js');instead of : const mdpdf = require('mdpdf');That's maybe why it doesn't work for me. |
|
I also tried something like that : const path = require('path');
const mdpdf = require('mdpdf');
// Configure les différentes options
const options = {
source: 'ConcatSpringCore.md', //Le fichier à transformer en PDF DOIT ETRE DANS LE MEME QUE CELUI CREE
destination:'pdfFinal.pdf', //Le fichier PDF qui sera créé
footer: 'footer.html',//Le bas de page
header: 'header.html',//Le haut de page
pdf: {
format: 'A4',
orientation: 'portrait',
quality: '100',
header: {
height: '25mm'
},
footer: {
height: '17mm'
},
border: {
top: '1mm',
left: '20mm',
bottom: '5mm',
right: '20mm'
},
}
};
// Call convert which returns a thenable promise with the pdfPath
mdpdf.convert(options).then(pdfPath => {
console.log('Fichier PDF créé :', pdfPath);
}).catch(err => {
// Don't forget to handle errors
console.error(err);
});and for my footer.html : <footer>
<div id="footer">
<h1 class="txt">SpringCard</h1>
<hr class="solid">
<div class="nbPages">Page <span class="pageNumber" style="font-size: 50px"></span>/ <span class="totalPages ">4</span></div>
</div>
</footer>And I got this : |
Because I am running this code on a clone of this repo. Let me test something real quick |
|
OK ok thx |
|
@DEYROS I am totally unable to replicate your issue. Can you upload an entire zip file here or create a new repository containing all source code? My best guess is that your CSS is causing issues but this entire thread was beating around the bush and I want to nail it down this time |
|
No problem, here it is : |
|
I deleted the css from the index.js : styles: 'styles.css',This line. |
|
@DEYROS General tip: when people ask u to send a zip for node project, include package.json and package-lock.json |
|
Sorry for that, here it is |
|
I tried running your poject and for some reason the footer appears squished Nonetheless, the page number is still there
I think it might be a puppeteer issue. What is your puppeteer version? |
|
I have just done an "npm i puppeteer" so I should have the last version ? |
npm list puppeteer(async()=>{const x = require("puppeteer"); console.log(await(await(await x.launch()).newPage()).browser().version())})()I have |
|
Could you please explain me how did you execute the index.js(node index.js or you create a script into package.json?) and where he is into your folder ? |
|
Puppeteer is a dependency of mdpdf, so you don't need to install it seperately. I've pushed a branch with the latest puppeteer because we're very far behind. Using mdpdf via cli (
|
That is just mdpdf's index.js. I ran the script in a clone of this repo and src/index.js should be identical to mdpdf in most cases |
|
|
node_modules is just how node manages external libraries you should NOT delete that folder |
|
If you're using the js api (as you seem to be with a node project) you should open your package.json and replace the |
|
into that :
|
package.json not package-lock |
|
Oh my bad, |
|
Yep! |
|
I did it but now I encounter a timeout how can I change this one ? _LifecycleWatcher_createTimeoutPromise = async function _LifecycleWatcher_createTimeoutPromise() {
if (!__classPrivateFieldGet(this, _LifecycleWatcher_timeout, "f")) {
return new Promise(noop);
}
const errorMessage = 'Navigation timeout of ' + __classPrivateFieldGet(this, _LifecycleWatcher_timeout, "f") + ' ms exceeded';
await new Promise(fulfill => {
return (__classPrivateFieldSet(this, _LifecycleWatcher_maximumTimer, setTimeout(fulfill, __classPrivateFieldGet(this, _LifecycleWatcher_timeout, "f")), "f"));
});
return new Errors_js_1.TimeoutError(errorMessage);
}, |
Can you make your .md file smaller? Just to see whether footer will work. After fixing that problem, you can start working on figuring out how to increase navigation timeout |
|
I make it smaller and : |
|
So when I have this I can saw the number of pages : |
Hey at least its working |
|
😂 |
|
In the puppeteer update I just did a blind update from v2 to v15 so I've not actually checked much but that the tests run. It could be that they process css differently now. It was always a real ballache because we had to hand in the CSS basically 3 times when I first integrated it. It might be a case of just checking the docs to see how to pass in css now. IIRC last time I figured it out with trial and error as it wasn't well documented so there's a good chance it's changed now. |
|
But actually the css is used but not completly as you can see the title are in red : |
|
Headers and footers don't use the main document css, we have the inject it for the body, header, and footer seperately. It sounds like between v2 and v15 something was changed with how puppeteer handles those. |
|
@BlueHatbRit with that being said, the puppeteer bump should be released as a major version |
|
I agree, I'll need to do some additional testing as well to ensure other scenarios still work. I think it'd be wise to do the release after the final security upgrade as well. Meow requires the project to be using esmodules which has potential to slightly shift out API also. It's something I'm looking at but may take a bit. If it's going to take me longer than a week or so I may need to just do them separately though. |
|
3.0.1 is released now which fixes the numbering, will continue to look into the styling issue when time permits though. |
I'm trying to add a page number in the footer of my PDF.
index.js that I run(node) to create the PDF:
The footer that I have created in HTML :
I think I'm not supposed to write "?" or even "4" but it is so that you understand well what I expect.
Here is what I got :
I think that I have to use puppeteer but I don't know/understand how. Thx !
The text was updated successfully, but these errors were encountered: