PDF pages in wrong order - jspdf

Question

I have this
$('#create_pdf').on('click', function () {
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF() {
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
const pdfWidth = doc.internal.pageSize.width - 20;
current_div = current_div1;
cache_width = current_div.width();
cache_width = current_div.width();
getCanvas(document.querySelector("#thediv1")).then(function (canvas) {
var img = canvas.toDataURL("image/png", wid = canvas.width, hgt = canvas.height) ;
var hratio = hgt/wid;
const TheHeight = doc.internal.pageSize.width;
const pdfHeight = TheHeight * hratio
doc.addImage(img, 'JPEG', 10, 10, pdfWidth, pdfHeight);
doc.addPage(595, 842);
});
current_div = current_div2;
cache_width = current_div.width();
getCanvas(document.querySelector("#thediv2")).then(function (canvas) {
var img = canvas.toDataURL("image/png", wid = canvas.width, hgt = canvas.height) ;
var hratio = hgt/wid;
const TheHeight = doc.internal.pageSize.width;
const pdfHeight = TheHeight * hratio
doc.addImage(img, 'JPEG', 10, 10, pdfWidth, pdfHeight);
doc.addPage(595, 842);
});
current_div = current_div3;
cache_width = current_div.width();
getCanvas(document.querySelector("#thediv3")).then(function (canvas) {
var img = canvas.toDataURL("image/png", wid = canvas.width, hgt = canvas.height) ;
var hratio = hgt/wid;
const TheHeight = doc.internal.pageSize.width;
const pdfHeight = TheHeight * hratio
doc.addImage(img, 'JPEG', 10, 10, pdfWidth, pdfHeight);
doc.addPage(595, 842);
});
etc etc
current_div = current_div14;
cache_width = current_div.width();
getCanvas(document.querySelector("#thediv14")).then(function (canvas) {
var img = canvas.toDataURL("image/png", wid = canvas.width, hgt = canvas.height) ;
var hratio = hgt/wid;
const TheHeight = doc.internal.pageSize.width;
const pdfHeight = TheHeight * hratio
doc.addImage(img, 'JPEG', 10, 10, pdfWidth, pdfHeight);
doc.addPage(595, 842);
doc.autoPrint();
window.open(doc.output('bloburl'));
});
}
// create canvas object
function getCanvas(Link) {
current_div.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(Link, {
imageTimeout: 2000,
removeContainer: true
});
}
I have two problems.
I am getting all the pages but not always in the right order. Why is that and what can I do about it?
Is there a way of stopping it from writing to the original page as the width is smaller than the original so it looks terrible. The original page needs to look the same as it did before clicking the print button
Thanks

Answer 1

I used Dompdf in the end. I was much easier