Background styles not visible on generated PDF #25
Comments
|
Could you please provide the URL you are using? My guess is that the page doesn't fully render until after the PDF is created. Using a CompletionTrigger should help: https://github.com/westy92/html-pdf-chrome#trigger-render-completion. |
|
This is the code, I added the completionTrigger still not sign of the css const CDP = require('chrome-remote-interface');
const htmlPdf = require('html-pdf-chrome');
CDP((client) => {
// Extract used DevTools domains.
const {Page, Runtime} = client;
// Enable events on domains we are interested in.
Promise.all([
Page.enable()
]).then(() => {
return Page.navigate({url: 'http://www.google.com/'});
});
// Evaluate outerHTML after page has loaded.
Page.loadEventFired(() => {
Runtime.evaluate({expression: 'document.body.outerHTML'}).then((result) => {
const html = result.result.value;
const options = {
port: 9222, // port Chrome is listening on
completionTrigger: new htmlPdf.CompletionTrigger.Timer(9000)
};
htmlPdf.create(html, options).then((pdf) => pdf.toFile('test2.pdf'));
//htmlPdf.create(html, options).then((pdf) => pdf.toBase64());
//htmlPdf.create(html, options).then((pdf) => pdf.toBuffer());
console.log(html);
client.close();
});
});
}).on('error', (err) => {
console.error('Cannot connect to browser:', err);
}); |
|
We had a similar issue where we felt the CSS was not the same as we would see on the page itself. This is actually a "feature" of chrome: E.g. chrome seems to drop background colors and images when printing. However if you're not getting any CSS then I don't really know. |
|
Just not really understanding if I run the unit tests from within the html-pdf-chrome project and generate the .pdf file still the pdf lacks part of the content from the original web page, eg. www.google.com. |
|
I understood the issue, were options parameters missing. How do you bundle the project? After I bundle with gulp-concat the when running shows the following.... SyntaxError: Identifier 'CompletionTrigger' has already been declared |
|
@tanelih : to enable the background pass |
|
@GautierT Thanks! We've been using the |
|
Thoughts on making this the default? @oscarlagatta @tanelih @GautierT await htmlPdf.create(html, {
printOptions: {
printBackground: true,
},
}); |
westy92
changed the title
|
@westy92 The current behavior seems to be pretty much equal to pressing the "print" button in the browser and people might expect this behavior. On the other hand some might find it confusing (including myself at first), that the background image, color or whatever is missing from the output. If questions or issues arise about this a lot, then I think defaulting to |
|
This CSS hack worked for us. We we're having the same issue around Chrome version 59-60. Edit: Sorry just saw someone else posted a similar solution XD |
|
The above webkit hack does not seem to work on Linux. Running Chrome 63 on pop os (ubuntu base) |
|
Thank you all for your input. For now, the "official" fix is to specify const result = await htmlPdf.create(html, {
port: 9222,
printOptions: {
printBackground: true,
},
});If an overwhelming number of users end up specifying this, I may make it the default in a future release. Other possible fixes: * {
-webkit-print-color-adjust: exact;
}Inline CSS: <body style="-webkit-print-color-adjust: exact;"> |
|
This issue is still alive. |
|
I currently try to do the same thing from the CLI. Does anybody know how to pass the options there? |
When loading from url the css styles are not taken into consideration
The text was updated successfully, but these errors were encountered: