node-html-pdf
node-html-pdf copied to clipboard
marcbachmann
image is not displayed after generating the pdf ?
Currently not in the header using the options.header variable.
You have to use <div id="pageHeader"></div>
But in the body it should work. There are some open issues. Please read through them if you don't figure it out by yourself. Please report back if you find your solution. I'll need to update the documentation with a bit more informations.
Sorry , i didn't understood your statement , i have attached my code below, can you give some solution ?
var html = '
Hi,
I am also having the same problem. I am not using the options.header variable. Its just a simple image in the body which is loaded locally. The generated pdf just shows an empty white box.
This is the html that I am trying to print. I have verified that the image exists and has the proper permissions.
<html>
<head></head>
<body>
<div id="contact_us">
<div id="talk_text">Talk to us:</div>
<div id="icons">
<div id="mail"><img src="/home/agniva/email.png">[email protected]</div>
</div>
</div>
<div id="thank_you" class="center">Thank you! enjoy your meal!</div>
</body>
</html>
You have to use the file:// protocol for local files. I believe
file:///home/agniva/email.png works.
Sent from my iPhone
On Jul 7, 2015, at 10:45 PM, Agniva De Sarker [email protected] wrote:
Hi,
I am also having the same problem. I am not using the options.header variable. Its just a simple image in the body which is loaded locally. The generated pdf just shows an empty white box.
This is the html that I am trying to print. I have verified that the image exists and has the proper permissions.
— Reply to this email directly or view it on GitHub https://github.com/marcbachmann/node-html-pdf/issues/44#issuecomment-119331980 .
I dont know how to put this protocol in action, my code is this:
<img src="file://imagen.jpg" alt="BQueen">
So when I make the pdf the image didn't show
I am guessing you are on a linux system. So the part of 'file://' is just the prefix. If your file is in /imagen.jpg (which it should not btw), then your path should be 'file:///imagen.jpg' (Note the extra /).
@agnivade thanks for the answer.
The important thing is to link to the file using an absolute path. It can't be relative to your application. So it should look like file:///home/app/files/image.png
Thank you @agnivade and @marcbachmann for your answers.
I was missing the extra " / " but now its working fine.
Another thing in <img src="file:///C:/home/app/files/image.jpg"/> the slashes need to be inverted like this:
<img src="file:\\\C:\\home\\app\\files\\image.jpg" />
I'm in a mac and I still can't create the pdf with the images, the images are broken.
My code is:
<div class="col-lg-4" align="center">
<img src="file:\\Users\DiegOrtega\Desktop\cotizador\cotizador-3m\public\img\logoleo.png" class="img-responsive center-block" alt="Artículos Innovadores Leo" title="Artículos Innovadores Leo">
</div>
Still not working for me. My Code:
var pdf = require('html-pdf');
var html = fs.readFileSync('./Media/index.html', 'utf8');
var _basePath = 'file:///' + __dirname + '\\Media\\';
var options = {
format: 'A4',
base: _basePath
};
pdf.create(html, options).toFile('./Media/123.pdf', function (err, res) {
if (err) return console.log(err);
console.log(res); // { filename: '/app/businesscard.pdf' }
});
HTML:
<img src="logo.png" alt="Logo" />
@DiegOrtega works for me on mac:
const options = {
format: 'A4',
base: 'file://' + path.resolve('./public') + '/'
};
<img class="logo" src="img/logo.png">
Works for me
1.Get the path of the folder where images reside using "path.join"
2.Change the '\' backward slashes into forward slashes '/'.
3.Now use the base:"file:///"+path
provide src of the images just the public folder contains, as: public/images/logo.png should be img src="images/logo.png"
I had the same problem. Then i try this:
$mpdf = new mPDF();
$html= "img src='http://google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png' alt=''>";
$mpdf->WriteHTML($html);
$mpdf->debug = true;
$output = $mpdf->Output();
die(__FILE__.':'.__LINE__);
WTF... This works! Why???
The crucial line was: $mpdf->debug = true;.
I put that before my $mpdf->Output(); and the pictures were back.
I also had the same problem , and it git solved using the file:// solution Thanks!!
i tried file:// and File:/// but still image is not displayed in Pdf.
<img src="file:///var/mobile/Containers/Data/Application/0085BA55-C65D-4714-A57B-9CCF644EE0FB/Documents/tmp.png"> I use this Line of Code but Image not show in PDF File .
Inside the MPDF directory there is a subdirectory called "tmp", give write permissions to it.
I also had the same problem. please help me. I used the https:// instead file://.
The .img-thumbnail class creates a thumbnail of the image:
">
If i am include id='pageHeader' image is not visible otherwise its showing
<div class="container" id="pageHeader-first">
<div class="logo">
<img src="uploads/logo/logo.png">
</div>
<div class="header-title">
<h2><%= data.insName %> Report</h2>
<span>15 May 2018</span>
</div>
</div>
If I remove id="pageHeader-first"
<div class="container" >
<div class="logo">
<img src="uploads/logo/logo.png">
</div>
<div class="header-title">
<h2><%= data.insName %> Report</h2>
<span>15 May 2018</span>
</div>
</div>
Then its working But I have to include header
I am facing same issue after adding id='pageHeader', image gets disappear.
var imgSrc = 'file:///E:/sri/new/vishnu/phase_2/public/uploads/logo/logo.png';
var options = {
'border': '0.5cm',
format: 'A3',
base: 'file:///E:/sri/new/vishnu/bes/public/',
type: "pdf",
"header": {
"contents": ""
},
"footer": {
"height": "50mm",
"contents": {
default: '<footer>Page: {{page}}/<span>{{pages}}</span></div></footer>', // fallback value
}
}
};
var html = '<div></div>';
var result = "<div id='pageHeader'><img src='" + imgSrc + "' /></div>";
result += result1
result += html
var destination = pro_root_path+'/public/uploads/inspection/output.pdf' (Here Mention Your location)
pdf.create(result, options).toFile(destination,function(err, pdf) {
if (err) return console.log(err);
// console.log("Generated");
});
});
Try this one @vikashRawat You have to include base file path
I have a similar problem and I dont think the file path is an issue. I tried to using the command: xvfb-run wkhtmltopdf http://google.com google.pdf The rsults looks something like this:
I am working on a linux machine
@Vishnupriya112 , It worked without base file path. Actual problem was image source path, After using file:///(referenced from your code) path it worked successfully.
Thank for the solution :-)
Hi,
I got the image in the PDF though absolute path:
<img src="file:\\\C:\\Projects\\logo.png" />
But when I tried it with relative path:
<img src="file:\\\.\\logo.png" />
I couldn't get the image in the PDF, anyone knows what is wrong?
I was working on .NET Core and reading comments I resolved it doing the following.
var PDF = Renderer.RenderHtmlAsPdf(html, "file:///" + path);
PDF.SaveAs(returnedPath);
So append following string to path of folder where you store PDF files and in your html, just use folder where images are:
<img src="images/footer-image.png" />
I have used jsPdf in angular 6 to convert div to pdf. After downloading the pdf, the image inside the div is not coming in pdf. Please anybody help me. urgent requirement
It is taking only from src="assets/image.png" but not taking dynamic value [src]="profile?.image"