将HTML模板打印为PDF-Angular 2

Question

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>

Answer 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

Answer 2

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

Answer 3

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>