Genera PDF da HTML utilizzando pdfMake in Angularjs Yocker

Ok, l’ho capito. 1. Avrai bisogno di html2canvas e pdfmake . NON è necessario eseguire alcuna iniezione nel tuo app.js, ma includi solo i tag dello script

Sul div di cui vuoi creare il PDF, aggiungi un nome ID come di seguito:
```
   
```
Nel tuo controller angular usa l’id di div nella tua chiamata a html2canvas:
cambia la canvas in un’immagine usando toDataURL ()
Quindi nella tua docDefinition per pdfmake assegna l’immagine al contenuto.

Il codice completato nel controller sarà simile a questo:

  html2canvas(document.getElementById('exportthis'), { onrendered: function (canvas) { var data = canvas.toDataURL(); var docDefinition = { content: [{ image: data, width: 500, }] }; pdfMake.createPdf(docDefinition).download("Score_Details.pdf"); } });

Spero che questo aiuti qualcun’altro. Buona programmazione!

So che non è rilevante per questo post, ma potrebbe aiutare gli altri a convertire HTML in PDF sul lato client. Questa è una soluzione semplice se usi il kendo. Conserva anche il css (la maggior parte dei casi).

 var generatePDF = function() { kendo.drawing.drawDOM($("#formConfirmation")).then(function(group) { kendo.drawing.pdf.saveAs(group, "Converted PDF.pdf"); }); }

                 
  
 
     Theme example
 This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.
 
  Buttons
 
         
         
         
         
  Tables
 
      #  First Name  Last Name  Username  
 
   1  Mark  Otto  @mdo  
  2  Jacob  Thornton  @fat  
  3  Larry  the Bird  @twitter  
 
 
 
     #  First Name  Last Name  Username  
 
   1  Mark  Otto  @mdo  
  2  Jacob  Thornton  @fat  
  3  Larry  the Bird  @twitter  
 
 
 
 
      #  First Name  Last Name  Username  
 
   1  Mark  Otto  @mdo  
  Mark  Otto  @TwBootstrap  
  2  Jacob  Thornton  @fat  
  3  Larry the Bird  @twitter  
 
 
 
     #  First Name  Last Name  Username  
 
   1  Mark  Otto  @mdo  
  2  Jacob  Thornton  @fat  
  3  Larry the Bird  @twitter  
 
 
 
 
  Thumbnails
 
   Labels
 
  Default Primary Success Info Warning Danger 
  Default Primary Success Info Warning Danger 
  Default Primary Success Info Warning Danger 
  Default Primary Success Info Warning Danger 
  Default Primary Success Info Warning Danger 
  Default Primary Success Info Warning Danger 
  Default Primary Success Info Warning Danger 
  Badges
 
  Inbox 42 
  Home 42 
 Profile 
 Messages 3 
 
  Dropdown menus
 
  Dropdown   Action 
 Another action 
 Something else here 
 
 Separated link 
 
 
  Navs
 
  Home 
 Profile 
 Messages 
 
  Home 
 Profile 
 Messages 
 
  Navbars
 
     Project name 
   Home 
 About 
 Contact 
  Dropdown   Action 
 Another action 
 Something else here 
 
 Nav header
 Separated link 
 One more separated link 
 
 
 
 
  
 
     Project name 
   Home 
 About 
 Contact 
  Dropdown   Action 
 Another action 
 Something else here 
 
 Nav header
 Separated link 
 One more separated link 
 
 
 
 
  
 
  Alerts
 
  Well done! You successfully read this important alert message. 
  Heads up! This alert needs your attention, but it's not super important. 
  Warning! Best check yo self, you're not looking too good. 
  Oh snap! Change a few things up and try submitting again. 
  Progress bars
 
  60% Complete 
 
  40% Complete (success) 
 
  20% Complete 
 
  60% Complete (warning) 
 
  80% Complete (danger) 
 
  60% Complete 
 
  35% Complete (success) 
 20% Complete (warning) 
 10% Complete (danger) 
 
  List groups
 
    Cras justo odio
 Dapibus ac facilisis in
 Morbi leo risus
 Porta ac consectetur ac
 Vestibulum at eros
 
 
     Cras justo odio  Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 
 
     List group item heading
 Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
   List group item heading
 Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
   List group item heading
 Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
  
 
  
  Panels
 
     Panel title
 
  Panel content 
 
   Panel title
 
  Panel content 
 
 
     Panel title
 
  Panel content 
 
   Panel title
 
  Panel content 
 
 
     Panel title
 
  Panel content 
 
   Panel title
 
  Panel content

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter

questo è quello che ha funzionato per me sto usando html2pdf da un’app Angular2, quindi ho fatto riferimento a questa funzione nel controller

 var html2pdf = (function(html2canvas, jsPDF) {

dichiarato in html2pdf.js.

Quindi ho aggiunto subito dopo le dichiarazioni di importazione nel mio controller angular questa dichiarazione:

 declare function html2pdf(html2canvas, jsPDF): any;

quindi, da un metodo del mio controller angular, sto chiamando questa funzione:

 generate_pdf(){ this.someService.loadContent().subscribe( pdfContent => { html2pdf(pdfContent, { margin: 1, filename: 'myfile.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { dpi: 192, letterRendering: true }, jsPDF: { unit: 'in', format: 'A4', orientation: 'portrait' } }); } ); }

Spero che sia d’aiuto