We Keep Coding

html2canvas/jsPDF - images not showing when converting html to a pdf

I'm looking to convert some simple HTML into a PDF. It seems the easiest way to do this and keep the css styling is to use the 'html2canvas' js library to convert the html to canvas first, and then create the PDF using jsPDF.
The issue I'm getting is that I have both a background image and inline image in my HTML but neither are showing in the PDF once converted. I've created a Codepen here: https://codepen.io/adamboother/pen/NWGeqom
Here's my js that does the conversion:
function convertToPdf()
{
html2canvas(document.querySelector('#certificate')).then(canvas => {
let pdf = new jsPDF('landscape', 'mm', 'a4');
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pdf.internal.pageSize.width, pdf.internal.pageSize.height);
pdf.save('certificate.pdf');
});
}
Has anyone found a fix for this?

I am using useCORS: true to your code and it works, assuming your image is in the server. Besides you can follow below code:
function convertToPdf()
{
html2canvas(document.querySelector('#certificate'), {useCORS: true}).then(function(canvas) {
let img = new Image();
img.src = canvas.toDataURL('image/png');
img.onload = function () {
let pdf = new jsPDF('landscape', 'mm', 'a4');
pdf.addImage(img, 0, 0, pdf.internal.pageSize.width, pdf.internal.pageSize.height);
pdf.save('certificate.pdf');
};
});
}

can't able to get the select value in JSPDF

I am trying to save my html page as a PDF domtoimage.toPng(document.getElementById('PrintForm'))
.then(function (blob) {
var pdf = new jsPDF('p', 'pt', [$('#PrintForm').width(), $('#PrintForm').height()]);
pdf.addImage(blob, 'PNG', 0, 0, $('#PrintForm').width(), $('#PrintForm').height());
pdf.save("test.pdf");
that.options.api.optionsChanged();
});</pre>
In this I can't able to get my select tag value am while am saving as pdf i will get the Default in the select tag.Like below

Try this...
var obj = $(".yourclassname")[0]
var srcwidth = obj.scrollWidth;
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.html(obj, {
html2canvas: {
scale: 600 / srcwidth
//600 is the width of a4 page. 'a4': [595.28, 841.89]
},
callback: function () {
window.open(pdf.output('bloburl'));
}
});
Where yourclassname is your object in the page (or #yourobjectid). srcwidth is the width calculation so your html fits the width of the page. You might need to add some padding to the html to fit inside the pdf (I added 20px to my div). You should be using this version 1.5.3 of jsPdf for the above to work. Hope this helps (works perferctly for me). You should also be using the latest version of html2canvas 1.0.0-rc.5

Rendering HTML to PDF with images included Django

I have a django app where users would print some pages which include images as a part of Data processing.
I tried jsPDF but it didn't render my images and I ended up with just text
$(document).ready(function() {
$("#pdfDownloader").click(function() {
var doc = new jsPDF('p', 'pt', 'a4', true);
doc.fromHTML($('#renderMe').get(0), 15, 15, {
'width': 500
}, function (dispose) {
doc.save('thisMotion.pdf');
});
});
})
This was my code and it didn't render the images so do I need to change anything?
is using a Django view would solve this and is there any alternatives to xhtml2pdf as with this I need to include my CSS in the HTML file ?

fromHTML is used to get text from the HTML to form a PDF. Try using html2canvas js library instead.
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
You can create a canvas image and add it to the PDF with code like this,
$(document).ready(function() {
$("#pdfDownloader").click(function() {
html2canvas($("#renderMe")).then(canvas => {
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'pt', 'a4', true); // A4 size page of PDF
var positionX = 0;
var positionY = 0;
pdf.addImage(contentDataURL, 'PNG', positionY, positionY, undefined, undefined)
pdf.save('thisMotion.pdf'); // Generated PDF
});
});
})
This will get you a PDF just like the HTML rendered on screen.

Generate a PDF in Angular2

I am trying to generate a PDF in Angular2, it downloads the PDF and it downloads a blank page without any content, when I change it from addHTML to fromHTML PDF has the content when I open it in browser but when I open it using adobe it shows error 'contact the person who generated this PDF'. Can you help me with this?
generatePDF() {
let doc = new jsPDF('p', 'pt', 'a4');
let source = document.getElementById("printOffers1");
doc.addHTML(source, () => {
});
doc.save('fileName.pdf');
}

Try this code to generate PDF:
generatePDF() {
let doc = new jsPDF('p', 'pt', 'a4');
let options = {
background : "#ffff",
pagesplit: true
};
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let constant = document.getElementById("printOffers1");
doc.addHTML(constant,0,0,options,()=>{
doc.save("test.pdf");
});
}

Html2Canvas only renders viewport

Using html2canvas to try to create pdfs and/or pngs and its working, except it only renders the visible section of the screen.
Anyone have any idea how to fix this?
//create pdf
$(document).ready(function() {
$('#downloadpdf').click(function() {
html2canvas($("#fullreporttoprint"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('mywindassessment.pdf');
}
});
});
});
Before someone marks this, I've checked everywhere online and SO for this problem, and was unable to find a working solution.