CODEWITHSUNDEEP
javascriptjspdf
Leonardo Wildt
Leonardo Wildt

Reputation: 2599

Create Pdf with Div border using jspdf

I am trying to use the JsPdf library to create a pdf based on html elements. I am wanting to know if it is possible to do with a div border or if i have to use the doc.line property and essentially draw each line around my div. I.E.

var doc = new jsPDF()

doc.line(20, 20, 60, 20)

I would much rather use <div style="border: solid; width: 300px ">

Has anyone had any luck with this?

Here is my Fiddle

Upvotes: 9

Views: 15546

Answers (4)

avnesh nigam
avnesh nigam

Reputation: 1

Found out the solution to this,putting a rectangle as border for each pdf page and also starting the second page and other pages from a litte down by making difference in pageHeight,hope this will resolve for few...

html2canvas(myCanvas, { useCORS: false }, { allowTaint: true }).then(function (canvas) {

  var imgWidth = 210;
  var pageHeight = 290;
  var imgHeight = canvas.height * imgWidth / canvas.width;
  var heightLeft = imgHeight;


  var doc = new jsPDF('p', 'mm');
  var position = 0;
  var pageData = canvas.toDataURL('image/jpeg', 1.0);
  var imgData = encodeURIComponent(pageData);
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  doc.setLineWidth(5);
  doc.setDrawColor(255, 255, 255);
  doc.rect(0, 0, 210, 295);
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    doc.setLineWidth(5);
    doc.setDrawColor(255, 255, 255);
    doc.rect(0, 0, 210, 295);
    heightLeft -= pageHeight;
  }
  doc.save('file.pdf');

});};

Upvotes: 0

Prem Kumar Nayak
Prem Kumar Nayak

Reputation: 11

for (var i=1;i<pdf.internal.pages.length;i++){
pdf.internal.pages[i].push("0.00 595.28 841.89 -595.28 re");
pdf.internal.pages[i].push("S");
}

Upvotes: 0

phil652
phil652

Reputation: 1506

Instead of drawing each lines you can use doc.rect to draw the rectangle. You can also change the border width using doc.setLineWidth.

doc.setLineWidth(2);
doc.rect(10, 20, 150, 75);

doc.save('sample-file.pdf');

See example here http://jsfiddle.net/508p61r6/5/

Upvotes: 2

lancew
lancew

Reputation: 780

How about using jsPdf in conjunction with Html2Canvas? Render the html to canvas, then add the canvas to the pdf as an image like so:

var img = canvas.toDataURL("image/png");
doc.addImage(img, 'JPEG', 300, 200);
doc.save('test.pdf');

See fiddle for full example: http://jsfiddle.net/nLLuvnwL/

Upvotes: 3

Related Questions