Comments (22)
as kenkogi mentioned it , that resolve the problem in nodejs.
I work with nodejs and express
inside tmp folder there is 2 images
tmp
logo.jpg
img/foto2.jpg
app.js
var cacheTime=31536000;
app.use(express.static(__dirname + '/tmp',{ maxAge: cacheTime }));
prova.html
<body>
<div id="pageHeader">
<img src="http://localhost:3000/img/foto2.jpg" >
header
</div>
<div id="pageContent">
COMIENZO DE CONTENIDO.
<div><img src="http://localhost:3000/logo.jpg" alt="Smiley face" height="42" width="42" /></div>
FIN DE CONTENIDO
</div>
<div id="pageFooter">
footer
<img src="http://localhost:3000/logo.jpg">
</div>
</body>
index.js
var express = require('express');
var router = express.Router();
var libreria = require('../routes/libs/libreria');
var fs = require('fs');
var pdf = require('html-pdf');
var html = fs.readFileSync('./prova.html', 'utf8');
config = {
"format": "A4", // allowed units: A3, A4, A5, Legal, Letter, Tabloid
"orientation": "portrait", // portrait or landscape
"border": {
"top": "2in", // default is 0, units: mm, cm, in, px
"right": "1in",
"bottom": "2in",
"left": "1.5in"
},
"header": {
"height": "45mm"
},
"footer": {
"height": "28mm"
},
"zoomFactor": "1", // default is 1
"type": "pdf", // allowed file types: png, jpeg, pdf
"quality": "75", // only used for types png & jpeg
}
/* GET home page. */
router.get('/', function(req, res, next) {
pdf.create(html, config).toFile('./demo.pdf', function(err, res) {
if (err) return console.log(err);
console.log(res); // { filename: '/app/businesscard.pdf' }
});
res.render('index', { title: 'Express' });
});
module.exports = router;
I hope , this help.
from node-html-pdf.
This is because header and footer is printed into pdf in a synchronous way. This mean any asynchronous request like getting image won't finish in time. This is current limitation of phantom.js
Solution:
Add the same image to template content and hide it with style display:none. Then you can add it to the header and it will show up because it is already cached and no asynchronous request is needed. This is required to do for both image referenced with url as well for Data URI scheme base64 image.
from node-html-pdf.
Header/footer images load correctly if you load the same image on the body, with display:none
from node-html-pdf.
@Lichtjaeger That's what the script is doing when you use
<body>
<div id="pageHeader">
<img src="https://www.google.com/images/srpr/logo11w.png">
</div>
<div id="pageContent">
some other content that shows on the pdf.
</div>
<div id="pageFooter">
some other content
<img src="https://www.google.com/images/srpr/logo11w.png">
</div>
</body>
It renders the whole body and the header & footer get moved into the page header & footer
I think that's still undocumented. Sorry for that. I'll have to improve it.
from node-html-pdf.
I had exactly the same issue. I looked to see the difference in how the two images were being served.
I noticed the image being served from my server had a response header cache-control:private, max-age=0
while the google one cache-control:private, max-age=31536000
. I served mine as google is being served and that saved the day.
Hopefully that helps someone.
from node-html-pdf.
Sorry, I've only tested the headers with svgs but it should work (especially base64).
What file type do you use and what sizes?
Is it possible that the image dimensions are too large so it won't show up?
Do you have an example to ensure that you embedded it correctly?
from node-html-pdf.
I am facing the same issue, Here i am using direct image path to src where it's located,The image type is PNG and the size is 5KB.
Thanks.
from node-html-pdf.
You're right. It isn't working for the options.header.contents
string.
The script can already extract the headers from the html body if they are present.
So images in the header are working using this html:
<body>
<div id="pageHeader">
<img src="https://www.google.com/images/srpr/logo11w.png">
</div>
some other content that shows on the pdf.
</body>
I can update the phantom script to inject the header & footer html into the html body.
Therefore this can work after an update.
There's also an issue in the phantom project concerning this issue: ariya/phantomjs#10735
from node-html-pdf.
we have tried this solution but images still don't shows up any suggestion?
from node-html-pdf.
@piermariacosina check this full example: https://gist.github.com/asessa/bf389070d76aaaf3987b
from node-html-pdf.
@asessa's solution works just fine, can it be integrated into the module?
from node-html-pdf.
Something else to keep in mind is that your images won't load if you're downloading them over https and your SSL certificate isn't configured properly.
from node-html-pdf.
The trick of using a div with id="pageHeader"
in the content works great.
But things brings up another point... I didn't see any documentation about #pageHeader
and #pageFooter
being parsed out of the content if they were present.
from node-html-pdf.
Image in #pageHeader not showing in pdf. However this image (https://www.google.com/images/srpr/logo11w.png) form goolge is showing but not from my localhost (http://localhost:3500/images/logo11w.png)
from node-html-pdf.
I am getting same issue, Image in #pageHeader div not showing in PDF header of each and every PDF pages. Image displayed only in first page of PDF.
from node-html-pdf.
Same issue for me.
The google image is showing, but if I use an image from my webserver (full http url, not https) then the image will not show in the pageHeader.
It will show in pageContent though.
Edit:
I also noticed that any linked stylesheet will not work in pageHeader
from node-html-pdf.
oh, wow. 😕
very weird. Does phantomjs have a local cache?
from node-html-pdf.
I have my image in Google Cloud Storage. When I accessed directly from gcloud it displayed the image. But when I download same image from my Loopbackjs API it does not display. @kenkogi I added the cache-control:private, max-age=31536000
to my API response but still does not work.
Any other suggestions please?
from node-html-pdf.
@mugbomah, I don't know of any other methods to solve this. Maybe a look at the API code or a URL to the image may help.
from node-html-pdf.
My solution was to use the fullpath in the pageHeader section
const header = {
type: 'div',
attributes: {
id: 'pageHeader',
},
content: [
{
type: 'img',
attributes: {
src: 'file://' + path.resolve('./static/images') + '/logo.png'
},
}
]
}
from node-html-pdf.
This is because header and footer is printed into pdf in a synchronous way. This mean any asynchronous request like getting image won't finish in time. This is current limitation of phantom.js
Solution:
Add the same image to template content and hide it with style display:none. Then you can add it to the header and it will show up because it is already cached and no asynchronous request is needed. This is required to do for both image referenced with url as well for Data URI scheme base64 image.
This worked for me, thanks!!
from node-html-pdf.
Thanks to kenkogi and josepfdc's comments, I've got the solution.
Copy these 2 lines in your server.js and replace /tmp with the folder that contains your image ex: /public
var cacheTime=31536000;
app.use(express.static(__dirname + '/tmp',{ maxAge: cacheTime }));
from node-html-pdf.
Related Issues (20)
- 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
- Error: spawn C:\home\site\wwwroot\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs ENOENTat
- This package has been deprecated HOT 1
- Some Images from urls are not rendered HOT 1
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.