I want to convert a web page to PDF including all the styles I've added.
I've used jspdf.js and html2Canvas. But I got only a blur picture in PDF form.
I've searched for many JavaScript codes but didn't find a correct one.
Script I have written is:
function getPDF() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("Image/jpeg");
//window.open(img);
var doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 0, 0, 440, 627);
doc.save("download");
}
});
}
Thank You!
There may be a few things that are contributing.
Your encoder options for the canvas.toDataURL are missing, so you're getting the defaults. The defaults may be creating a low quality image. Try this for the highest quality JPEG image:
var img = canvas.toDataURL("Image/jpeg", 1.0);
You might also try creating your jsPDF object with measurements, rather than pixels:
var pdf = new jsPDF("p", "mm", "a4"); // jsPDF(orientation, units, format)
And when you add the image, scale it to the dimensions of the page:
pdf.addImage(imgData, 'JPEG', 10, 10, 190, 277); // 190x277 mm # (10,10)mm
See if that gives you a better image quality.
Related
I want to create LWC component in which I have one file selector which is uploading '.pdf', '.png','.jpg','.jpeg','.docx','.doc' types of file in salesforce. but on button click I want that file to get converted into PDF and gets download immediately.
Is it possible to convert file using js in LWC?.
I got this code but it is only working on string containing HTML element. I want it to work on whole file.
window.jsPDF = window.jspdf.jsPDF;
var doc = new jsPDF();
// Source HTMLElement or a string containing HTML.
var elementHTML = document.querySelector("#content");
doc.html(elementHTML, {
callback: function(doc) {
// Save the PDF
doc.save('sample-document.pdf');
},
margin: [10, 10, 10, 10],
autoPaging: 'text',
x: 0,
y: 0,
width: 190, //target width in the PDF document
windowWidth: 675 //window width in CSS pixels
});
I'm trying to embedd an image into a PDF with jsPDF. For some reason this is not working . This is the Code when I create my PDF:
exportPDF () {
const doc = new jsPDF('p', 'pt')
var footer = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC...'
var header = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...'
/* Some other stuff */
doc.addImage(this.output, 'PNG', 400, 400, 500, 500) #This does not work
doc.addImage(header, 'PNG', 0, 0, 600, 139.86) #For some reason these images work
doc.addImage(footer, 'PNG', 0, 800, 600, 54.68)
/* Some other stuff */
doc.save('Containertreppen Teileliste.pdf')
}
The Variable output is passed from another page and therefore not created in the method (I'm using vuejs). In this Variable the Screenshot of a Babylonjs Scene is stored, encoded in base64.
This is the Code when a take the Screenshot:
printDiv() {
this.scene.render();
const self = this
const options = {
type: "dataURL",
};
this.$html2canvas(document.getElementById("renderCanvas"), options).then(function(canvas){
self.output = canvas
})
},
I'm able to display the screenshot in an HTML-element and I can download it as a normal png but for some reason when I try to add it to my PDF the following error occurs in my console:
Error in v-on handler: "Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData"
I also tried to put the String as src for an HTML-image-element but it changed nothing.
This is the beginning of the Variable output:
"data:image/png;base64,iVBORw..."
Can someone help me with this?
I have few images in my web page , i am trying to convert a div element which has images to pdf as :
var element = document.getElementById(canvasId);
let doc = new jsPDF('p', 'pt', 'a4');
doc.addHTML(element, function () {
doc.save('testdoc.pdf');
});
The pdf doesn't show images in testdoc.pdf , should i need to add any more attributes ?
A Quick Q :
Is it possible to convert full page to image (with all images and styles of web page) similar to pdf by jsPDF with other libraries ?
If so please guide me with some links , any help is much appreciated thanks .
After a little surfing and workaround :
Images should be in .JPG
If you are trying any images from say online or from AWS add this below conf :
var opt = {
image: { type: 'jpeg', quality: 0.98 }, // as per req
html2canvas: { dpi: 300,
letterRendering: true,
useCORS: true },
};
I've got a function that takes a div, and saves it to a PDF document using jsPDF.
What I'm struggling with is why jsPDF isn't respecting my options
I want the PDF file to be landscape, 297mm wide (A4 landscape width) and then, then set the height of the PDF to the scaled size, and fill the PDF with the image.
My function is as below:
const input = document.getElementById(id);
const inputHeightMm = pxToMm(input.offsetHeight);
const inputWidthMm = pxToMm(input.offsetWidth);
const a4WidthMm = 297;
const a4HeightMm = 210;
const ratio = inputHeightMm/inputWidthMm;
console.log(a4WidthMm, a4WidthMm * ratio )
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'landscape',
unit: "mm",
format: [a4WidthMm, a4WidthMm * ratio ]
});
pdf.addImage(imgData, 'PNG', 0, 0, a4WidthMm, a4WidthMm* ratio );
return pdf.save(`${v}.pdf`);
});
What happens though is that I get a PDF whereby the image is cut off, as it doesn't appear to scale it to the right size.
When checking the PDF it outputs, it also says its only 4.13" x 1.96" which is 104mm wide, not the 297mm passed to it
Can you try
pdf.addImage(imgData, 'PNG', 0, 0, undefined, undefined );
instead of
pdf.addImage(imgData, 'PNG', 0, 0, a4WidthMm, a4WidthMm* ratio );
and see if produces the same result?
the documentation points that addImage(imageData, format, x, y, width, height, alias, compression, rotation), width and height is used for resizing the image generated.
If you leave it undefined the image will be placed on the PDF in it's original size and ratio.
I have a report with charts and tables.
I am using the html2canvas with jsPDF to export this report to PDF file.
But the process is taking a long time, more than 11000ms.
I've tried to change the format, the quality, but nothing worked.
See below the code I used:
html2canvas($('#first-page'), {
onrendered: function(canvas) {
firstPage = canvas.toDataURL('image/jpeg', 0.5);
},
background: '#ffffff'
});
I'm doing something wrong or really is a problem?
How I can improve the performance?
You don't need to use toDataUrl.http://jsfiddle.net/davidmather/sxp0meer/3/
html2canvas($('#first-page'), {
onrendered: function(canvas) {
var doc = new jsPDF('p', 'mm');
doc.addImage(canvas, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});