Comments (14)
GautierT
commented on May 15, 2024
6
@tanelih : to enable the background pass
await htmlPdf.create(html, {
printOptions: {
printBackground: true,
}
})
from html-pdf-chrome.
tanelih
commented on May 15, 2024
2
@GautierT Thanks! We've been using the <body style="-webkit-print-color-adjust:exact;"> trick for now and it seems to work for our needs.
from html-pdf-chrome.
westy92
commented on May 15, 2024
2
Thank you all for your input. For now, the "official" fix is to specify printBackground: true in your printOptions:
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:
CSS:
* {
-webkit-print-color-adjust: exact;
}Inline CSS:
<body style="-webkit-print-color-adjust: exact;">from html-pdf-chrome.
westy92
commented on May 15, 2024
1
Thoughts on making this the default? @oscarlagatta @tanelih @GautierT
await htmlPdf.create(html, {
printOptions: {
printBackground: true,
},
});from html-pdf-chrome.
tanelih
commented on May 15, 2024
1
@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 true might be a good idea for the maintainer. 😄
from html-pdf-chrome.
westy92
commented on May 15, 2024
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.
from html-pdf-chrome.
oscarlagatta
commented on May 15, 2024
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);
});from html-pdf-chrome.
tanelih
commented on May 15, 2024
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.
from html-pdf-chrome.
oscarlagatta
commented on May 15, 2024
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.
from html-pdf-chrome.
oscarlagatta
commented on May 15, 2024
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
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Function.Module.runMain (module.js:605:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3
from html-pdf-chrome.
zimmermanw84
commented on May 15, 2024
This CSS hack worked for us. We we're having the same issue around Chrome version 59-60.
* {
-webkit-print-color-adjust:exact;
}
Edit: Sorry just saw someone else posted a similar solution XD
from html-pdf-chrome.
JeffHerb
commented on May 15, 2024
The above webkit hack does not seem to work on Linux. Running Chrome 63 on pop os (ubuntu base)
from html-pdf-chrome.
patrickehansen
commented on May 15, 2024
This issue is still alive.
The CSS fix doesn't work for me, and the printOptions.printBackground doesn't work either.
from html-pdf-chrome.
1kastner
commented on May 15, 2024
I currently try to do the same thing from the CLI. Does anybody know how to pass the options there?
from html-pdf-chrome.
Related Issues (20)
- Migrate from tslint to typescript-eslint
- Promises intermittently not resolved HOT 1
- CSS conic-gradient issue HOT 2
- Error: Cannot find module '/node_modules/html-pdf-chrome/dist/src/index.js'. Please verify that the package.json has a valid "main" entry HOT 2
- Log Handler HOT 1
- PDF with searchable text HOT 2
- Allow Chrome instance to launch on first run and persist for future runs HOT 5
- Editable form field creation HOT 1
- HtmlPdf.create() connection lost HOT 5
- Node.js 17 connect ECONNREFUSED ::1:49497 HOT 1
- Error: Cannot find module "html-pdf-chrome" HOT 3
- Module parse failed: /Users/pro/End/trunk/app/node_modules/html-pdf-chrome/dist/index.js HOT 2
- Page generate fails due to 'using unsafe HTTP verb GET' for new tab HOT 1
- setting up pm2 HOT 4
- Change return type of toStream() to Readable HOT 3
- Fonts are not working Azure DevOps HOT 2
- Consider cli support
- run with javascript and got CDP error HOT 3
- issue while deployed in pm2 linux HOT 2
- Timeout problem w/ external chrome browser
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from html-pdf-chrome.