PDF Quality

[harry101491]

I am trying to create a good quality pdf but no luck I have tried lot of things but not able to solve the issue.
jspdf v1.4.1
html2canvas ^1.0.0-alpha.12
Angular ^5.2.5

my implementation for converting a html to pdf by using jspdf and html2canvas.

html2canvas(sourceElement, {
scale: 2
}).then((canvas) => {
const imgWidth = 208;
const pageHeight = 295;
const imgHeight = canvas.height * imgWidth / canvas.width;
const heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png');
let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
pdf.internal.scaleFactor = 30;
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
pdf.save(file_name); // Generated PDF
});

I have been struggling for quite a some time. please, I really appreciate any help. if possible please, provide some article or code sample that could help me.

some observations:
I have pretty good quality in Mac but not that good in PC. Does the machine OS play any role?

[Uzlopak]

It depends imho on the browser. In Firefox toDataURL returns an 96 dpi Image. I guess safari on mac with probably retina gives a higher dpi.

I think this is more like an issue in html2canvas like
niklasvh/html2canvas#241
niklasvh/html2canvas#1087

You are using already the scale option.

Also sadly you are messing up with the internal scaleFactor. So I guess this is more for StackOverflow.

[Uzlopak]

Hey and thanks for posting this! This issue looks like a question that would be best asked on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only. Will close this as this is really a question that should be asked on SO.