We Keep Coding

Conversion of html string to pdf in angular results distorted page in downloaded pdf using jsPDF

I am getting a html page's complete code as a string in an api response. I need to convert it to PDF.
I have tried using jsPDF.i successfully converted the page but the page i not exactly same as its html view. The design is distorted. i have given reference to the expected image and what i am getting below.
the funtion in which the conversion code is written .
getHtmlForPdf(id, name) {
this.appService
.GET('Order/details?OrderId=' + id + '&ReportName=' + name)
.subscribe((response) => {
// console.log(response?.result.html_ContentForPdf);
this.htmlData = response?.result.html_ContentForPdf
});
// this.saveAsPdf(response.result.html_ContentForPdf);
const options = {
background: 'white',
scale: 3
};
html2canvas(this.htmlData, options)
.then((canvas) => {
var img = canvas.toDataURL('image/PNG');
var doc = new jsPDF('l', 'mm', 'a4');
// Add image Canvas to PDF
const bufferX = 5;
const bufferY = 5;
const imgProps = (<any>doc).getImageProperties(img);
const pdfWidth = doc.internal.pageSize.getWidth() - 2 * bufferX;
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
doc.addImage(
img,
'PNG',
bufferX,
bufferY,
pdfWidth,
pdfHeight,
undefined,
'FAST'
);
return doc;
})
.then((doc) => {
doc.save('postres.pdf');
});
}
I have tried without using html canvas also.still not working
saveAsPdf(data) {
window['html2canvas'] = html2canvas;
var doc = new jsPDF('p', 'pt', 'a4');
doc.html(data, {
callback: function (pdf) {
pdf.save('cv-a4.pdf');
},
});
}
I found many solution for converting html file to pdf. But in my case i am converting the html code as a string to pdf file. Please give me a solution what I am missing.

Jspdf (imgage to pdf) not converting whole image to pdf

var pdff ;
function encodeImageFileAsURL(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function() {
console.log(reader.result)
pdff = reader.result;
pdf();
}
reader.readAsDataURL(file);
}
function pdf() {
var doc = new jsPDF();
var img = new Image();
img.src = pdff;
var width = doc.internal.pageSize.getWidth;
var height = doc.internal.pageSize.getHeight;
doc.addImage(img, 'JPG', 0, 0, width, height);
doc.save('imkk.pdf'); // downloads pdf
}
This is the code I am using currently to convert image to base64 string and then to pdf, it works with small images but I need to make a pdf in which the image is large it makes the pdf but only with a portion of image here is the image link that I want in pdf :- https://drive.google.com/file/d/1X3G3gGsTUKvAtBh78iHMh_G4oy2-O73D/

// You need to make your image into a Data URL and declare page size
var imgData = 'data:image/jpeg;base64,/9j/.............../an/9k='
var width = 8.33
var height = 125
var doc = new jsPDF({ unit: 'in', format: [width, height],})
doc.addImage(imgData, 'JPG', 0, 0, width, height)
doc.save('imkk.pdf')
The default will just be the start of image on the page, by declaring page width and height that one page can be whatever the URL length limit is for that environment, so note it can often be 1.5 MB.

html2canvas jspdf table data word-break not working

I am trying to export some tables to pdf in my application. The export functionality works. However, if table data has some long text in it, it overflows into the other rows when it is exported. I have word-break:break-word for that data, but it is being ignored when exporting to PDF. I also have letterRendering set to true. Here is my function:
var data = document.getElementById('table');
html2canvas(data).then(canvas => {
// Few necessary setting options
var imgWidth = 208;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'mm', 'a4');
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
pdf.save('table.pdf');
letterRendering: true;
});
Here is an image of part of the exported table that is showing the problem:
It looks fine on the webpage itself:
How should I modify my function to prevent this overflow from happening?

OK, so, I changed work-break:break-word to word-break:break-all and it is working perfectly now. Happy Coding!

Getting Image height and width from base64 Image string in GoJS

I am trying to get the Image height and width from a base64 string representation of the image and I am using GoJS.
What I eventually want to do is to add that image to a PDF using jspdf library.
Here is what I have done so far:
download() {
let imgData = this.diagram.makeImageData({background: "white", returnType: "string"});
let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
var position = 0;
var imgWidth = imgData.width; //Reading width from Image Data
var imgHeight = imgData.height; //Reading height from Image Data
pdf.setFontSize(30);
pdf.text("Diagram", 100, 20, 'center');
pdf.addImage(imgData, 'PNG', 1, 25, position, imgWidth, imgHeight);
pdf.save("Diagram.pdf');
}
In that imgData.width and imgData.height, the visual studio intellisense is showing "Property 'height' and 'width' does not exist on type 'string'.
How can I get the height and width property of the image?

Create an HTMLImageElement using that image data, and then get its naturalWidth and naturalHeight once it has been loaded:
var imgData = myDiagram.makeImageData(. . .);
var img = document.createElement("img");
img.addEventListener('load', function(e) {
console.log(img.naturalWidth + " " + img.naturalHeight);
});
img.src = imgData;

jspdf convert html to pdf with multiple pages

I'm using jsPdf and html2pdf to convert html to a pdf file.
I can convert the html fine and download the file but if the html is too big to fit onto a single page, it does not create the other page(s), how do I do this?
code is:
var pdf = new jsPDF('l', 'pt', 'a4');
pdf.canvas.height = 72 * 11;
pdf.canvas.width = 72 * 8.5;
html2pdf(document.getElementById(id), pdf, function(pdf){
pdf.save('file.pdf');
});

Another Solution.
var pdf = new jsPDF('p', 'pt', 'a4');
var options = {
pagesplit: true
};
pdf.addHTML($(".pdf-wrapper"), options, function()
{
pdf.save("test.pdf");
});
Source : jsPDF multi page PDF with HTML renderrer
another answer : jsPDF multi page PDF with HTML renderrer

If above answer does not work i have done it like this :
download and include in order :
Jquery
html2canvas
jspdf
google them they are easy to find. then have your printable code in a div wrapper report. and call the function with print button.
for example (In jsfiddle code will not work because it does not allow external code from non cdn sites but it will work on server)
$(document).ready(function() {
var form = $('#report');
var cache_width = form.width();
var a4 = [595.28, 841.89];
$('#create_pdf').on('click', function() {
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF() {
getCanvas().then(function(canvas) {
var imgWidth = 200;
var pageHeight = 290;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;
var img = canvas.toDataURL("image/jpeg");
doc.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save('Report.pdf');
form.width(cache_width);
});
}
// create canvas object
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: false
});
}
});
https://jsfiddle.net/vnfts73o/1