search

bauhausjs / phantom-html2pdf

Node module to generate PDFs from HTML via PhantomJS
MIT License
112 stars 47 forks source link

Header Image/Class #49

Closed fabioloreggian closed 7 years ago

fabioloreggian commented 7 years ago

Hi there

I have been using the runnings file and runningArgs to setup my header. The header is working perfectly except that I cannot include an image.

I have tried: 1) Base64 encoded in img tag 2) Base64 encoded with img tag but through css 3) Normal URL from base of project in img tag 4) Normal URL from absolute location in img tag

Also including a class from my included css file also doesn't work, hence the inline style

None of these have worked.

Here is my current html for my header which is working except for the image:

<style>
    .header{
        width: 100%;
        display: block;
    }

    .header-logo{
        float: left;
        width: 100px;
        height: 100px;
        border: thin solid blue;
        background-image: url("./quote/logo.jpg");
        background-size: 100px 100px;
        background-repeat: no-repeat;
    }

    .header-content{
        float:right;
        font-weight: bold;
        font-family: Arial, sans-serif;
        text-align: center;
        color: #011669;
        border: thin solid red;
    }

    p{
        margin: 0;
        padding: 0;
    }

    .heading{
        font-size: 24px;
    }

    .subheading{
        font-size: 18px;
    }

    .content{
        font-size: 8px;
    }
</style>
<header >
    <div class="header">
        <img class="header-logo" >
        <div class="header-content">
            <p class="heading">MICRO MOTOR ENGINEERING</p>
            <p class="subheading">(PTY) LTD</p>
            <p class="content">P.O BOX 1530 BEDFORDVIEW 2008</p>
            <p class="content">149 ROVER ROAD, CNR JAGUAR RD, RUSTAVIA, 1401</p>
            <br>
            <p class="content">TELEPHONE: (011) 822-2822 (10 Lines)</p>
            <p class="content">FACSIMILEL (011) 822-5720 (admin) (011) 822-5317 (workshop)</p>
            <p class="content">E-MAIL: info@micromotoreng.co.za &nbsp; &nbsp; WEB: www.micromotoreng.co.za</p>
        </div>
    </div>
</header>
dustin-H commented 7 years ago

Hi @fabioloreggian,

thanks for creating a detailed issue.

First of all, you are using the image tag the wrong way.

An img tag needs a src attribute to display the image. If you want to use backgroundImage you need a container like a div.

However, with relative paths it isn't working anyway. There is a bug in PhantomJS: https://stackoverflow.com/a/20100387

With a direct path to the file on your computer it is working.

See the following example. This is working for me.

<!DOCTYPE html>
<html lang="en">
<style>
    .header{
        width: 100%;
        display: block;
    }

    .header-logo{
        float: left;
        width: 100px;
        height: 100px;
        border: thin solid blue;
    }

    .header-content{
        float:right;
        font-weight: bold;
        font-family: Arial, sans-serif;
        text-align: center;
        color: #011669;
        border: thin solid red;
    }

    p{
        margin: 0;
        padding: 0;
    }

    .heading{
        font-size: 24px;
    }

    .subheading{
        font-size: 18px;
    }

    .content{
        font-size: 8px;
    }
</style>
<body>
<header >
    <div class="header">
        <img class="header-logo" src="/Users/YOUR_USERNAME/GitHub/phantom-html2pdf/image.png">
        <div class="header-content">
            <p class="heading">MICRO MOTOR ENGINEERING</p>
            <p class="subheading">(PTY) LTD</p>
            <p class="content">P.O BOX 1530 BEDFORDVIEW 2008</p>
            <p class="content">149 ROVER ROAD, CNR JAGUAR RD, RUSTAVIA, 1401</p>
            <br>
            <p class="content">TELEPHONE: (011) 822-2822 (10 Lines)</p>
            <p class="content">FACSIMILEL (011) 822-5720 (admin) (011) 822-5317 (workshop)</p>
            <p class="content">E-MAIL: info@micromotoreng.co.za &nbsp; &nbsp; WEB: www.micromotoreng.co.za</p>
        </div>
    </div>
</header>
</body>
</html>

Edit: I removed the background attributes from header-logo class.

fabioloreggian commented 7 years ago

@dustin-H

Thanks for your quick reply, unfortunately I cannot replicate your success. I have tested with these files

<style>
    .header{
        width: 100%;
        height: 90px;
        display: block;
    }

    .header-logo{
        float: left;
        width: 100px;
        height: 100px;
        border: thin solid blue;
    }

    .header-content{
        float:right;
        font-weight: bold;
        font-family: Arial, sans-serif;
        text-align: center;
        color: #011669;
    }

    p{
        margin: 0;
        padding: 0;
    }

    .heading{
        font-size: 24px;
    }

    .subheading{
        font-size: 18px;
    }

    .content{
        font-size: 8px;
    }

    .details{
        width: 100%;
        height: 200px;
        border: thin solid purple;
    }
</style>
<header >
    <div class="header">
        <img class="header-logo" src="/home/fabio/Development/micro/micro-nodejs/src/resources/pdf/logo.jpg">
        <div class="header-content">
            <p class="heading">MICRO MOTOR ENGINEERING</p>
            <div style="font-size: 6px">
                <span style="float: left">VAT REG NO. 4780103059</span>
                <span style="float: right"> CO. REG No. 1966/003236/07</span>
            </div>
            <p class="subheading">(PTY) LTD</p>
            <p class="content">P.O BOX 1530 BEDFORDVIEW 2008</p>
            <p class="content">149 ROVER ROAD, CNR JAGUAR RD, RUSTAVIA, 1401</p>
            <br>
            <p class="content">TELEPHONE: (011) 822-2822 (10 Lines)</p>
            <p class="content">FACSIMILEL (011) 822-5720 (admin) (011) 822-5317 (workshop)</p>
            <p class="content">E-MAIL: info@micromotoreng.co.za &nbsp; &nbsp; WEB: www.micromotoreng.co.za</p>
        </div>
    </div>
    <br>
    <hr>
    <div class="details">

    </div>
</header>

And to test if the absolute path is correct I also tested the image in my actual html like this:

<!DOCTYPE html >
<html>
    <head>
        <link rel="stylesheet" href="quote.css">
    </head>
    <body>
        <p>Test</p>
        <img src="/home/fabio/Development/micro/micro-nodejs/src/resources/pdf/logo.jpg">
    </body>
</html>

And this does display the image, but I am still not getting an image in my header.

Here is my runnings.js file:

module.exports = function runnings(args) {
    return {
        header: {
            height: '12cm',
            contents: function(pageNum, totalPages) {
                var html = args.html;
                html = html.replace('{{pageNum}}', pageNum);
                html = html.replace('{{totalPages}}', totalPages);

                return html;
            }
        }
    };
};

The html gets generated and sent to this function with runningArgs

dustin-H commented 7 years ago

I think it is because your header needs to be inside body.

http://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/header

Here is my whole file:

'use strict';

var pdf = require('./lib/phantom-html2pdf');

var h = `
<!DOCTYPE html>
<html lang="en">
<style>
    .header{
        width: 100%;
        display: block;
    }

    .header-logo{
        float: left;
        width: 100px;
        height: 100px;
        border: thin solid blue;
        background-image: url("./image.png");
        background-size: 100px 100px;
        background-repeat: no-repeat;
    }

    .header-content{
        float:right;
        font-weight: bold;
        font-family: Arial, sans-serif;
        text-align: center;
        color: #011669;
        border: thin solid red;
    }

    p{
        margin: 0;
        padding: 0;
    }

    .heading{
        font-size: 24px;
    }

    .subheading{
        font-size: 18px;
    }

    .content{
        font-size: 8px;
    }
</style>
<body>
<header >
    <div class="header">
        <img class="header-logo" src="/Users/hex0r/GitHub/phantom-html2pdf/image.png">
        <div class="header-content">
            <p class="heading">MICRO MOTOR ENGINEERING</p>
            <p class="subheading">(PTY) LTD</p>
            <p class="content">P.O BOX 1530 BEDFORDVIEW 2008</p>
            <p class="content">149 ROVER ROAD, CNR JAGUAR RD, RUSTAVIA, 1401</p>
            <br>
            <p class="content">TELEPHONE: (011) 822-2822 (10 Lines)</p>
            <p class="content">FACSIMILEL (011) 822-5720 (admin) (011) 822-5317 (workshop)</p>
            <p class="content">E-MAIL: info@micromotoreng.co.za &nbsp; &nbsp; WEB: www.micromotoreng.co.za</p>
        </div>
    </div>
</header>
</body>
</html>
`

var pdfOptions = {
  'html': h,
  'papersize': {format: 'A4', orientation: 'portrait', border: '1cm'}
};

pdf.convert(pdfOptions, function(err, result) {
  result.toFile("./file.pdf", function() {
    console.log('Done');
  });
});
fabioloreggian commented 7 years ago

But that header does not repeat if I am not mistaken. That is why I am going through the runnings and runningArgs route

dustin-H commented 7 years ago

Ah, ok. Got it. I've been able to reproduce it.

However, I don't know how to fix it. I think it is an Issue with PhantomJS like https://github.com/ariya/phantomjs/issues/12887.

Sorry.

fabioloreggian commented 7 years ago

Hi thank you for the help, I have done the same as the others have in their 'fix' which is to reference their image in their header/footer in their main content. Like this:

<style>
    .header{
        width: 100%;
        height: 90px;
        display: block;
    }

    .header-logo{
        float: left;
        width: 100px;
        height: 100px;
    }

    .header-content{
        float:right;
        font-weight: bold;
        font-family: Arial, sans-serif;
        text-align: center;
        color: #011669;
    }

    p{
        margin: 0;
        padding: 0;
    }

    .heading{
        font-size: 24px;
    }

    .subheading{
        font-size: 18px;
    }

    .content{
        font-size: 8px;
    }
</style>
<header>
    <div class="header">
        <img class="header-logo" src="file:///home/fabio/Development/micro/micro-nodejs/src/resources/pdf/logo.jpg">
        <div class="header-content">
            <p class="heading">MICRO MOTOR ENGINEERING</p>
            <div style="font-size: 6px">
                <span style="float: left">VAT REG NO. 4780103059</span>
                <span style="float: right"> CO. REG No. 1966/003236/07</span>
            </div>
            <p class="subheading">(PTY) LTD</p>
            <p class="content">P.O BOX 1530 BEDFORDVIEW 2008</p>
            <p class="content">149 ROVER ROAD, CNR JAGUAR RD, RUSTAVIA, 1401</p>
            <p>&nbsp;</p>
            <p class="content">TELEPHONE: (011) 822-2822 (10 Lines)</p>
            <p class="content">FACSIMILEL (011) 822-5720 (admin) (011) 822-5317 (workshop)</p>
            <p class="content">E-MAIL: info@micromotoreng.co.za &nbsp; &nbsp; WEB: www.micromotoreng.co.za</p>
        </div>
    </div>
</header>

and with the main content like this:

<!DOCTYPE html >
<html>
    <head>
        <link rel="stylesheet" href="quote.css">
    </head>
    <body>
        <img class="header-logo" src="file:///home/fabio/Development/micro/micro-nodejs/src/resources/pdf/logo.jpg">
    </body>
</html>

with the css:

.header-logo{
    display: none;
}
dustin-H commented 7 years ago

Thanks for sharing your findings!