0

I am trying to use jsPDF to print my HTML template as a PDF, but I get an error. How should I do it?

Let's say that I have this template:

<div style="text-align:center;" class="sub-header col-lg-12 col-md-12 col-sm-12">
    <span class="welcome-message col-lg-12 col-md-12 col-sm-12">Hola mundo</span>
</div>
bellotas
  • 2,349
  • 8
  • 29
  • 60
  • 2
    [Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.](https://stackoverflow.com/help/on-topic) – Liam Dec 14 '17 at 13:31

3 Answers3

1

You can also use jsPDF.

Here is an example using jsPDF.

After implementing jsPDF then you also need to install html2Canvas and add it in package.json:

"dependencies": {
"html2canvas": "0.5.0-beta4",
"@types/html2canvas": "0.5.32"
.........
}

Run npm install

chirag sorathiya
  • 1,223
  • 8
  • 29
0

I have used jsPDF but the printed html was quite ugly so I have decided to create the table manualy.

Here is an example of the frame:

doc.setFontSize(22)
lineNumber = lineNumber - 6  // total number of mm in the table
doc.text(80, 20, 'Dayly tasks')  // Title
doc.setFontSize(12)   
doc.line(18, 30, 18, lineNumber)  //first vertical line
doc.line(192, 30, 192, lineNumber) //last vertical line
doc.line(18, lineNumber, 192, lineNumber)// last horizontal line
doc.line(18, 30, 192, 30) // first horizontal line
//drax inside the table
doc.line(18, 40, 192, 40)  // colon name
doc.line(42, 30, 42, lineNumber)  //col day
doc.line(172, 30, 172, lineNumber) // col activity
doc.line(152, 30, 152, lineNumber) // col duration
doc.setFontType("bold");
doc.text(20, 35, 'Date');
doc.text(70, 35, 'Activity Comment');
doc.text(154, 35, 'Duration');
doc.text(174, 35, 'Overtime')
doc.setFontType("normal");
doc.text(180, 280, pageNumber + '')

Where lineNumber is firstly calculated.

with best regards

Milo
  • 3,365
  • 9
  • 30
  • 44
Nailik
  • 1
  • 2
0

At the end, what I have used is this two links:

1st link It is used to check how to install the needed library: Link

npm install jspdf --save

npm install @types/jspdf --save

angular-cli.json

"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]

2nd link Used as a model to developed the needed code (sorry but this answer is in Spanish)

Link

Component TS

  pruebaDivAPdf() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    var source = $('#imprimir')[0];

    var specialElementHandlers = {
      '#bypassme': function (element, renderer) {
        return true
      }
    };
    var margins = {
      top: 60,
      bottom: 40,
      left: 20,
      width: 522
    };

    pdf.fromHTML(
      source,
      margins.left, // x coord
      margins.top, { // y coord
        'width': margins.width,
        'elementHandlers': specialElementHandlers
      },

      function (dispose) {
        pdf.save('Prueba.pdf');
      }, margins
    );
  }

Component HTML

<a (click)="pruebaDivAPdf()" class="button">Pasar a PDF</a>
bellotas
  • 2,349
  • 8
  • 29
  • 60