Git Product home page Git Product logo

Comments (22)

josepfdc avatar josepfdc commented on August 17, 2024 6

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.

Lichtjaeger avatar Lichtjaeger commented on August 17, 2024 5

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.

raulneis avatar raulneis commented on August 17, 2024 4

Header/footer images load correctly if you load the same image on the body, with display:none

from node-html-pdf.

marcbachmann avatar marcbachmann commented on August 17, 2024 3

@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.

kenkogi avatar kenkogi commented on August 17, 2024 1

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.

marcbachmann avatar marcbachmann commented on August 17, 2024

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.

rojuvamshi avatar rojuvamshi commented on August 17, 2024

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.

marcbachmann avatar marcbachmann commented on August 17, 2024

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.

piermariacosina avatar piermariacosina commented on August 17, 2024

we have tried this solution but images still don't shows up any suggestion?

from node-html-pdf.

asessa avatar asessa commented on August 17, 2024

@piermariacosina check this full example: https://gist.github.com/asessa/bf389070d76aaaf3987b

from node-html-pdf.

frapontillo avatar frapontillo commented on August 17, 2024

@asessa's solution works just fine, can it be integrated into the module?

from node-html-pdf.

stevenmhunt avatar stevenmhunt commented on August 17, 2024

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.

morficus avatar morficus commented on August 17, 2024

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.

lekhnath avatar lekhnath commented on August 17, 2024

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.

SFWDhaval avatar SFWDhaval commented on August 17, 2024

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.

linusbrolin avatar linusbrolin commented on August 17, 2024

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.

marcbachmann avatar marcbachmann commented on August 17, 2024

oh, wow. 😕
very weird. Does phantomjs have a local cache?

from node-html-pdf.

archer747 avatar archer747 commented on August 17, 2024

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.

kenkogi avatar kenkogi commented on August 17, 2024

@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.

moparlakci avatar moparlakci commented on August 17, 2024

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.

mcmino avatar mcmino commented on August 17, 2024

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.

munganyendesandrine avatar munganyendesandrine commented on August 17, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.