Develop Reference

How to set font for html2pdf in jsPDF?

I need to use a Bengali font while generating my pdf. I have converted the font using fontconverter and it works fine for adding text. I mean the following things are working, i.e., I can see my Bengali Text in the generated pdf -
var doc = new jsPDF();
doc.setFont('SolaimanLipi', 'normal');
doc.text("অতীশ", 10, 60);
doc.setFont('SolaimanLipi', 'normal'); // set font
doc.setFontSize(50);
However, doc.setFont('SolaimanLipi', 'normal') is not working if use html2pdf. For instance, following code is not working.
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.setFont('SolaimanLipi', 'normal');
html2pdf(document.body, pdf, function (canvas) {
var iframe = document.createElement('iframe');
iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px;font-family:SolaimanLipi;');
document.body.appendChild(iframe);
iframe.src = pdf.output('datauristring');
}
);
What is the way of setting font for html2pdf?

Trying to add image to pdf using jsPDF

Trying this code
pdfGenerate.js
generatePDF = function() {
var imgData = 'D:/work/TiffImages/png/895153.0000.png';
var doc = new jsPDF('p', 'pt', 'a4');
doc.text(20, 20, 'CTS Aarchival');
doc.addImage(imgData, 'PNG', 15, 40, 180, 180);
doc.save('CTStest.pdf'); }
Error:
Uncaught TypeError: doc.addImage is not a function
In HTML I am just calling this method onclick()
And all required js files are included.

addImage function is in another module called *drumroll please* addImage. So if you're importing the jsPdf.js it doens't contain that module.
Here is the doc link. Also check out these github issues here and here

Simple solution:
Instead of using jsPDF.js library use jsPDF.debug.js , it includes all the modules which we need.

You can also do it in this way:
var pdf = new jsPDF();
var img = new Image;
img.onload = function() {
pdf.addImage(this, 10, 10);
pdf.save("CTStest.pdf");
};
img.crossOrigin = "";
img.src = 'D:/work/TiffImages/png/895153.0000.png';

How to set a line width in jsPDF?

I am doing following code to produce big size of line width.
doc.setLineWidth(400);
but not happen anything and the line still thin size after that.
This is my complete code
var doc = new jsPDF('p','pt','a4');
doc.line(30, 30, 560, 30); // horizontal line
doc.setLineWidth(400);
How to set a line width correctly?

Because you have to understand that at first you have to set the width value and then you can use it. And you do it on the wrong way: you set it after using.
Correct example
function generatePDF()
{
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.setLineWidth(5.0);
pdf.line(30, 30, 560, 30);
pdf.save('test.pdf');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js" crossorigin="anonymous"></script>
<button onclick="generatePDF()">Generate PDF</button>

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.

How to break word in pdf header, PDF generated using jsPDF

How to break words in Headers in PDF file, while generating PDF using jsPDF(i.e. I want to break the headers like "Hello World" into two lines) and how to set font size in jsPDF.
I have tried with pdf.setFontSize(12); , but it does not work for me.
Any help would be appreciated. Thanks.
code:
var pdf = new jsPDF('l', 'pt', 'a3')
, source = $('#TableId')[0]
, specialElementHandlers = {
}
, margins = { top: 20, bottom: 20, left: 30, width: 922 };
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
, 'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
)

If you want to split hello and world on two different lines, add a newline \n between hello and world: "hello\nworld"
Example:
var pdf = new jsPDF();
pdf.setFontSize(12);
pdf.text(10, 10, "Hello\nWorld");
Or add two text fields:
doc.text(10, 10, "Hello");
doc.text(10, 25, "World");
ps. It would even more help if you could post all your code.

If You use FromHtml and your Text spent more than one Page, so you can add after the Text :
<!-- ADD_PAGE -->
But you should use the Jspdf from Mrrio libary
Link : Download the Jspdf