Comments (2)
PanMan
commented on June 27, 2024
+1!
from node-html-pdf.
SKGrimes
commented on June 27, 2024
Page counts can be used with css3. It is 4am right now but I had to use this for a ton of stuff so I am going to ask author if I can contribute docs for some issues everyone seems to have, this being one of them:
Mozilla Link for docs on CSS 3 page counter
I pass that metadata obj to html-pdf, it is my options object. it is exported in node as a js file, but you can see from the code how it works, it has sloppy 1999 level's of but they don't render. You may have to put a span tag in and give it a large margin.
working example:
options.js
metadata: {
doctype: doctype,
company: normalizedCompany,
directory: outbox + '/' + normalizedCompany,
html: outbox + '/' + normalizedCompany + '/' + normalizedCompany + '.html',
logo: outbox + '/' + normalizedCompany + '/' + normalizedCompany + '-logo.png',
pdf: outbox + '/' + normalizedCompany + '/' + normalizedCompany + '-' + doctype + '.pdf',
options: {
height: '11in',
width: '8.5in',
border: {
top: "0.1in",
right: "0.25in",
bottom: "0.1in",
left: "0.25in"
},
header: {
height: "1.5in",
contents: '<header><section class="row" style="border-bottom: 2.8px solid black; display: block;"><div class="six columns"><img src="' + 'file://' + outbox + '/' + normalizedCompany + '/' + normalizedCompany + '-logo.png' + '" style="height: 64px; width: auto; margin-bottom:2px!important;" alt="' + req.body.companyInfo.name + '"></div><div class="six columns" style="padding-top: 8px;height: inherit;"><h1 class="repeating-doctype" style="text-align: right;"><b style="text-transform: capitalize;">' + doctype + ' </b> ' + req.body.jobInfo.referenceNumber + '</h1></div></section><section class="row" style=" border-bottom: 2px solid #E1E1E1; margin-bottom: 1rem;"><div class="twelve columns"><h1><b>' + req.body.jobInfo.host + '</b> <span style="margin: 0; color: gray;">' + req.body.jobInfo.name + '</span></h1></div></section></header>'
},
footer: {
height: "0.5in",
contents: '<footer><p class="page" style="font-size: 12.5px"> ' + req.body.companyInfo.name + ' – ' + req.body.companyInfo.city + ' – ' + req.body.companyInfo.email + ' – ' + req.body.companyInfo.website.replace(/.*?:\/\//g, "") + '<span style="margin: 0 20px 0 0"> </span> ' + ' Page </p></footer>'
}
}
},
main.css
body {
counter-reset: pagecounter;
}
.page {
counter-increment: pagecounter;
}
.page:after {
content: counter(pagecounter);
}
You can attach external css sheets with tag1: 'file://' + basepath + '/app/themes/reset.css',
that syntax. That code is passed to handlebars and renders as something like (note that it is an absolute root path so there are actually 3 slashes when handlebars calls it`, you can put this in the head of your document :
file:///Users/you/Desktop/style/style.css
In testing I loaded 4 external sheets, however if possible, I would suggest compiling/minifying it and including it.
Base64 images render like shit.
also, if you need an image in the header include it with similar syntax to above in the body with a display: none, the header will recognize the external file and render it.
from node-html-pdf.
Related Issues (20)
- Text not being displayed on Mac. Working fine on Windows HOT 1
- Custom font not working HOT 1
- How can I make sure table header section should have at least one row.
- Background color not applying those area where no html
- Image not showing when uploaded on vps server
- QR code not visible over generated pdf post ami upgrade HOT 2
- Fonts don't work properly on server HOT 4
- stream (.toStream) not generated after deploying to k8s HOT 2
- The download pdf always have an empty page at last HOT 1
- html-pdf: Unknown Error throw new ERR_INVALID_ARG_TYPE(name, 'string', value); Docker HOT 1
- Pdf saved in TMP directory HOT 1
- Is watermark possible in pdf? HOT 3
- Not able to resize the chebox size while generating the pdf
- Syntax for forcing a page break HOT 2
- Potential injection vulnerability in node-html-pdf
- Page overflow with white line
- PDF Creation Error: spawn /root/pando-app/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs ENOENT HOT 1
- The answer to how to resolve Windows error of phantomjs ENOENT issue
- Error: spawn E2BIG
- error HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from node-html-pdf.