I can't render a image for my pdf using jspdf - javascript

I have a method that generate a pdf for me but i need to make a image (png ou jpg) for this pdf, i have already make a pdf but i can't do a image for my pdf, it shows a error.
I'm using angular and ionic, and i don't using html2canvas because doesn't support web components yet.
My method that generates a pdf:
generatePdf(){
let imgData = 'data:image/jpeg;base64,verylongbase64;'
let doc = new jsPDF();
let specialElementsHandlers = {
'#editor': function(element, renderer){
return true;
}
};
let report = this.report.nativeElement;
doc.fromHTML(report.innerHTML, 15, 15, {
'width': 100,
'elementHandlers': specialElementsHandlers
});
doc.text('my pdf', 15, 15);
doc.text(this.product.data, 15,290);
doc.text(this.product.local, 80,290);
doc.text(this.product.tag, 150, 290);
//render and download pdf
doc.save('teste.pdf');
doc.setFontSize(40);
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);
}
Error in console:
ERROR Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData

Related

can we convert docx file into PDF using javascript without js libraries

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
});

Not able to add image to PDF using jspdf in IE11

I am using jsPDF to generate PDF file using JavaScript. In my PDF file I am adding images. I am able to generate PDF in Chrome and Firefox, but adding image to PDF creates security error in IE11.
JS Code:
(function() {
var doc = new jsPDF();
doc.setFont("courier");
doc.setFontType("bolditalic");
doc.setFontSize(20);
doc.text(105, 15, 'IE 11 PDF Image Insert Test', null, null, 'center');
var img = new Image();
img.onload = function() {
console.log('img onload');
doc.addImage(img, 'png', 24, 63, 80, 80);
doc.save('ie11_test.pdf');
};
img.src = 'https://developers.google.com/maps/solutions/images/storelocator_clothing.png';
img.crossOrigin = "anonymous";
})();
How fix this image insert issue with IE11?

convert web page to a pdf with styles

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.

why multiple image is not display?

I am trying to display multiple images in a PDF using jspdf. It only shows the first image. It's not showing another image? Can we show multiple images using jspdf? Here is my code:
PLUNKER: http://plnkr.co/edit/HxharsFKeOPn2JgTb6pu?p=preview
var doc = new jsPDF();
doc.setFontSize(40);
doc.text(35, 25, "Paranyan loves jsPDF");
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180, 'Octonyan');
doc.addImage('Octonyan', 'JPEG', 15, 400, 180, 180);
doc.save('Test.pdf');

You're adding an image outside of the page of a single-paged document
The following works, mind the changed y coordinate 400 -> 220
doc.addImage(imgData1, 'JPEG', 15, 220, 180, 180);

How to make jsPDF convert big text?

I'm using jsPDF to convert html to pdf. When a page has a lot of text I just got a blank pdf or a gray page with no contentsanf data: in url
I have no errors in console.
How can I make it print pdf correctly?
To convert to pdf I use this code:
$(document).ready(function(){
var specialElementHandlers = {
'#editor': function (element,renderer) {
return true;
}
};
$('#topdf').click(function () {
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
doc.fromHTML($('.post-content p').get(0), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.output("dataurlnewwindow");
});
});

The problem is in length of URL limit 2000 chars (more here: What is the maximum length of a URL in different browsers?), so I suggest you to use doc.output('save', 'filename.pdf') but this have limitation (more: How to open generated pdf using jspdf in new window)

Categories

Resources