marcbachmann / node-html-pdf Goto Github PK
View Code? Open in Web Editor NEWThis repo isn't maintained anymore as phantomjs got dreprecated a long time ago. Please migrate to headless chrome/puppeteer.
License: MIT License
This repo isn't maintained anymore as phantomjs got dreprecated a long time ago. Please migrate to headless chrome/puppeteer.
License: MIT License
I'm creating a pdf from a html with thead and tbody tags, I have already removed all style I had and I'm still with the same problem.
Starting from second page the tbody overwrite thead, like on image bellow:
It is very strange because it works on the first page (image below) and I don't have any style on this page.
It seems to happened too with the guy who opened this issue: #36. But he didn't want to have table headers on all pages, I want to.
Do you ever experienced this problem? Is there a way to solve it?
Hi, I am trying to used personalized fonts with the @font-face CSS tag. When I use it in my HTML page inside a <style></style> in the header, I get some strange results.
The only custom font-family referenced in my HTML and CSS is Helvetica Neue Light Italic. However, for reasons I don't know, the document also has Helvetica Neue (named 'Regular') and Helvetica Neue Light (named 'Light') applied on other sections. Even more bizarre, if in the CSS I specify 'Regular' as font-family for the section weirdly having 'Regular' as font-family, it sets it to some basic HTML font.
Here are some screenshots.
Html (Part 1)
Even if I use ejs to generate my HTML template, I verified and the links to the files are correct. Here are the 2 states I talked about:
-CSS only refers to 'Light' (as shown in the previous screenshot)
The title 'Basic Report' should not be in Helvetiva, but it is.
-CSS now sets .reportTitle to 'Regular'
You can see that the title clearly doesn't have Helvetica as font-family:
I also got some other weird side effets during my testing.
I found that post about PhantomJS.
ariya/phantomjs#12132
I reverted to version 1.9.1 but it didn't correct the problem.
if i use border on my body , i get seperate borders around my #pageHeader, # pageContent en #pageFooter.
how do i set border-color in options ?
When I convert my html page to pdf, the page doesn't fit the pdf width, and the right side get cut off.
The simple html is just using width="100%"
I am trying to use en external CSS file in my header and my footer, but it doesn't seems to works. Even bootstrap style that works in the body doesn't work in footer and header. However, the inline CSS works, but I would prefer to have cleaner code and to split the CSS from the HTML.
Thanks.
Hi there,
I'm having no luck getting html-pdf to render webfonts that are included within the HTML itself. For example, the fonts are included within a <style>
block on the HTML:-
@font-face {
font-family: 'Raleway';
src: url('/static/fonts/raleway/raleway-regular-webfont.eot');
src: url('/static/fonts/raleway/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/static/fonts/raleway/raleway-regular-webfont.woff') format('woff'),
url('/static/fonts/raleway/raleway-regular-webfont.ttf') format('truetype'),
url('/static/fonts/raleway/raleway-regular-webfont.svg#ralewayregular') format('svg');
font-weight: normal;
font-style: normal;
}
body
{
font-family: 'Raleway';
font-size: 14px;
}
The fonts are rendered when visiting the template HTML manually. But when html-pdf renders the page to PDF, it is output in Helvetica throughout. My assumption is this is a race condition, with html-pdf rendering before the fonts are called and rendered -- but I maybe simplifying it. Can you offer any steer as to how this can be achieved?
Many thanks
Hey,
Is it possible to do a single page pdf?
Thanks!
Is possible add css and image file path ?
var fs = require('fs');
var pdf = require('html-pdf');
var options = { filename: 'businesscard.pdf', format: 'Letter' };
console.log("sadfasdf")
console.log(html="<body><div style='background-color: #000088' >dfasdf</div><table></table><td>fsdafsdf</table></body>")
pdf.create(html, options).toFile(function(err, res) {
if (err) return console.log(err);
console.log(res); // { filename: '/tmp/html-pdf-8ymPV.pdf' }
});
if my code has more content oh the same line new line automatically not getting inserted.
From what I saw this library creates temporary files and probably pipes them from there.
Is it possible not to create them?
The table headers gets rendered twice, overlapping the table body.
The header only gets rendered once.
Here you can find the actual PDF, but the following screenshot shows the problem as well:
I am trying to add header and footer containing images/logo, but when the pdf is getting generated, it is removing the images from the header and footer.
The image src is base 64 encoded string and shows up when I put that in the main content.
Only it is getting removed from header and footer.
Thanks.
Hi,
can you please add a license agreement for your project?
Cheers,
Andreas
Hi Team,
when convert html to pdf i am getting this error . kindly give me correct solution. i tried lot ways from google .
i belive this is phantomJS issue on Ubuntu
simply
<a href="http://google.com">This is a link</a>
doesn't seem to work. The link is text is blue, but the cursor doesn't change when hovered, and it's not possible to click it. What could be the problem?
Is it possible to use html-pdf from the command line?
I am using Foxit Reader to open the PDF files. I opened the PDF file that was generated by Prince and the links work well. However, but the links in PDF generated by node-html-pdf do not.
On Windows 7 when trying to convert a .html to .pdf I get this message: [Error: PDF creation timeout. PDF generation script did not end.].
and no .pdf.
Script
var fs = require('fs');
var pdf = require('html-pdf');
var html = fs.readFileSync('LICENSE.md.html', 'utf8')
pdf.create(html, { width: '50mm', height: '90mm'}, function(err, buffer) {
if (err) return console.log(err);
fs.writeFile('LICENSE.md.html.pdf', buffer);
});
LICENSE.md.html
<p>Copyright (c) 2014 GitHub Inc.</p>
Note: Originally discovered the issue in the markdown-pdf module for Atom.
I'm trying to schematize a pdf, but there's no way to make page breaks.
It would be nice to have a script that allows to run it as command:
$ html-pdf input.html output.pdf
...or so.
Is it possible to use the @media print
CSS when generating a PDF? That would allow html-pdf
to more closely match a browser's print function.
Edit: The answer to this might be "no" according to https://stackoverflow.com/questions/24055513/phantom-js-for-node-use-print-stylesheet unless anyone knows different.
I have created https://github.com/bapatel1/node-html-pdf-sample with your lib and using angular.js in html. Now my problem is , I have to send filtered data to display from node.js to html file to generate pdf from that. (Kind of like html is template and pass data from node.js )
Any idea how may i achieve that, really appreciate your help in this matter as have release in near future.
Thank you
Using AWS Lambda (works locally on OSX)
[Error: /var/task/node_modules/html-pdf/node_modules/phantomjs/lib/phantom/bin/phantomjs: /var/task/node_modules/html-pdf/node_modules/phantomjs/lib/phantom/bin/phantomjs: cannot execute binary file
One thing to note is the npm install is done on OSX before zipping up and uploading to Lambda (amazon linux). Is that what cause this issue?
I have this issue on Debian Wheezy when running this code:
pdf.create(html, {
width: '297mm',
height: '400mm',
directory: '/tmp/ramdisk',
timeout: '60000'
}, function(err, buffer) {});
After taking some time to check, and play around with html-pdf, here is what I did:
Hi,
Could you put the source file of the Receipt example ?
I wonder if this module can run in browser via browserify
I'm trying with your example code and replacing the line
var fs = require('fs');
with
var fs = require('browserify-fs');
or with
var fs = require('brfs');
but I always gey the same error
TypeError: fs.readFileSync is not a function
Is there a chance to pass an object like this into the border option:
{
top: '1cm',
right: '2cm',
bottom: '1cm',
left: '2cm'
}
It would make it sometimes much easier.
My code 👍
var fs = require('fs');
var pdf = require('html-pdf');
var html = fs.readFileSync('./test/businesscard.html', 'utf8')
var options = { filename: './businesscard.pdf', format: 'Letter', width: '210mm', height: '297mm', border: '10mm', timeout: 30000 };
pdf.create(html, options, function(err, buffer) {
if (err) return console.log(err);
console.log("Converted successfully. Output in " + outputPath);
});
[Error: html-pdf: PDF generation timeout. Phantom.js script did not exit.]
Running the following on a single Node.js server is fine.
console.log('create PDF');
pdf.create(html).toBuffer(function(err, buffer){
//console.log('This is a buffer:', Buffer.isBuffer(buffer));
console.log('create PDF async call returned');
try{
posterBuffer = buffer;
callback();
}
catch (err){
callback( err );
}
});
But if you have two servers behind an HAPROXY load balancer both servers crash with (no state):
* START ERROR***
Un-Caught exception (reported from app.js):
{ [Error: write EPIPE] code: 'EPIPE', errno: 'EPIPE', syscall: 'write' }
Error: write EPIPE
at exports._errnoException (util.js:746:11)
at WriteWrap.afterWrite (net.js:775:14)
****************** END ERROR ********************
I read a post about a double callback failure with phantom but now I cannot find it again.
Server OS Ubuntu 14.0.4
Node 12.5
Lets say I pass in a long html content and I would want to break the page at a particular meaningful spot, can i do that? Is there some parameter that i can leverage for it.
Hi @marcbachmann,
I couldn't understand how you get the data from phantom and transform it in pdf binary. You create something like an image? Because the content is not selectable or links can't be clicked.
Can you explain if you have some time?
Thanks anyways =)
when setting the color of text , it shows always black
example :
I'm using nunjucks to render a template into a string, i then try to convert that html to a pdf file however everytime i get this error:
Error: write EPIPE
at errnoException (net.js:905:11)
at Object.afterWrite (net.js:721:19)
Here is the code i use to create the pdf file:
nunjucks.render(path.join(__dirname, '../views/mail/receipt.html'), {
__: res.__,
query: req.query,
payment: payment
}, function(err, html) {
if (err) {
next(err);
}
htmlPdf.create(html, {
type: 'pdf'
}).toBuffer(function(erro, fileBuffer) {
// Code never gets this far, errors out before it happens and the error object is still null.
if (erro) {
next(erro);
}
var transporter = nodemailer.createTransport({
host: config.email.host,
port: config.email.port,
secure: config.email.secure
});
transporter.sendMail({
from: config.email.from,
to: payment.receipt_email,
subject: res.__({
phrase: 'Receipt_Email_Subject',
locale: payment.lang
}),
attachments: [{
filename: 'receipt.pdf',
content: fileBuffer,
contentType: 'application/pdf'
}],
text: 'test'
}, function(error, info) {
if (error) {
next(error);
}
res.json(info);
});
});
});
Here is the HTML string that is generated by nunjucks, not the most readable i know but figured i should post it like it is instead of trying to make it prettier
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="utf-8">\n <meta content="IE=edge" http-equiv="X-UA-Compatible">\n <meta content="width=device-width, initial-scale=1" name="viewport">\n <title>Snerpa WiFi Receipt</title>\n <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"\n rel="stylesheet">\n </head>\n <body>\n <div class="container">\n <div class="row">\n <div class="col-xs-6 col-sm-5 col-md-4 col-lg-3">\n <img src="http://wifi.snerpa.is/assets/images/wifi_logo.png" class="img-responsive" alt="WiFi Logo">\n </div>\n </div>\n <div class="row">\n <div class="col-xs-12">\n <div class="invoice-title">\n <h2>Invoice</h2>\n <h3 class="pull-right">Pöntun # 0575741</h3>\n </div>\n <hr>\n <div class="row">\n <div class="col-xs-6">\n <address>\n <strong>Greiðslumáti:</strong><br>\n VISA 999999******9999<br>\n [email protected]\n </address>\n </div>\n <div class="col-xs-6 text-right">\n <address>\n <strong>Dagsetning:</strong><br>\n 03.06.2015<br><br>\n </address>\n </div>\n </div>\n </div>\n </div>\n <div class="row">\n <div class="col-md-12">\n <div class="panel panel-default">\n <div class="panel-heading">\n <h3 class="panel-title"><strong>Samantekt</strong></h3>\n </div>\n <div class="panel-body">\n <div class="table-responsive">\n <table class="table table-condensed">\n <thead>\n <tr>\n <td><strong>Vara</strong></td>\n <td class="text-center"><strong>Verð</strong></td>\n <td class="text-center"><strong>Magn</strong></td>\n <td class="text-right"><strong>Samtals</strong></td>\n </tr>\n </thead>\n <tbody>\n \n <tr>\n <td>Snerpa WiFi 1 Klst Aðgangur</td>\n <td class="text-center">€1</td>\n <td class="text-center">1</td>\n <td class="text-right">€1</td>\n </tr>\n \n </tbody>\n </table>\n </div>\n </div>\n </div>\n </div>\n </div>\n <style>\n .invoice-title h2,\n .invoice-title h3 {\n display: inline-block;\n }\n\n .table> tbody> tr> .no-line {\n border-top: none;\n }\n\n .table> thead> tr> .no-line {\n border-bottom: none;\n }\n\n .table> tbody> tr> .thick-line {\n border-top: 2px solid;\n }\n </style>\n </body>\n </html>\n
I've been stuck at this for hours and can't see that im doing anything wrong, any ideas?
Hi,
I am using this module to transform html to pdf on the fly in my website. What i observed is whenever there are Chinese characters in my html, it transforms to boxes in pdf. Is this you are aware of?
Here is the snippet
var options = {format: 'Letter'};
options.border = {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
};
pdf.create(html, options).toStream(function (err, stream) {
//TODO:Handle err
res.setHeader('Content-Type', 'application/pdf');
res.setHeader('Content-disposition', 'attachment; filename="'+ 'Document - '+result.docId + '.pdf"');
stream.pipe(res);
});
What is the maximum size to PDF ?
How do we go about passing command line options to phantomjs? For instance I need to pass the --ignore-ssl-errors=yes option. See this page to see what I'm talking about: http://phantomjs.org/api/command-line.html
I try to make a PDF with but my fonts does not render.
All my pdf's looks like this: http://kevinmeijer.com/html-pdf-9072.pdf
I'am on CentOS 6.
i try use a base64 image for background on my html and throws 'Parse error'
.main{
background-origin: content-box;
background-image: url(data:image/png;base64,blablabalbalbaba);
border: 26px solid #D5D5D5;
box-sizing: border-box;
display: inline-flex;
height: 100%;
width: 100%;
}
I am using Stylus to generate the CSS for my web page. When I enable flexbox layout (flexbox=true), nothing is rendered by node-html-pdf, but Chrome displays the page fine. When I disable flexbox layout, node-html-pdf and Chrome render the same output.
Hi
Is there a way i can attach my external stylesheets ...
I tried to convert html to pdf with this module, and html file size is over 3MB.
But it failed to convert. Converted pdf file size is variable for each case, and it's about 70~90MB.
What's a reason for this? How can I solve this issue?
Hello,
is there any secret in using overflow:hidden or is it just not supported?
When positioning two divs absolute in a relative container and using overflow:hidden, the image beneath the other one is shown out of bounds.
Is it my fault or does your module don't support overflow:hidden property?
Greetings
phantomArgs: ["--ignore-ssl-errors=yes"] is not passed correctly.
In pdf.js phantom args should be set before script
fix ed
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.