1. casa
  2. Domanda e risposta
  3. Genera PDF da HTML utilizzando pdfMake in Angularjs

Genera PDF da HTML utilizzando pdfMake in Angularjs

2015-12-02 23 views
39

Sto cercando di creare un PDF dal mio codice HTML utilizzando pdfMake e Angular (ho anche provato jsPDF e non riuscivo a farlo funzionare). Ho provato ad utilizzare il seguente codice nel mio controller angolare:Genera PDF da HTML utilizzando pdfMake in Angularjs

var blob = new Blob([document.getElementById('exportable').innerHTML]) 
var docDefinition = { 
    content: [blob] 
} 
pdfMake.createPdf(docDefinition).open();

ma ricevo il seguente errore:

Unrecognized document structure: {"_margin":null}".

mio HTML è costituito da due semplici tabelle in un div exportable.

Se qualcuno conosce una soluzione a questo problema o un altro modo per ottenere l'HTML in un PDF da Angular, PER FAVORE aiuta.

Qualsiasi assistenza è GRANDE apprezzata!

fonte

2015-12-02 Rani Radcliff

risposta

73

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

  1. Sul div di cui vuoi creare il PDF, aggiungi un nome ID come di seguito:

    <div id="exportthis">

  2. nel controller angolare utilizzare l'id del div nella chiamata a html2canvas:

  3. cambiamento della tela per un'immagine utilizzando toDataURL()

  4. Quindi nella tua docDefinition per pdfmake assegna l'immagine al contenuto.

  5. Il codice compilato nel controller sarà simile a questa:

     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 aiuta a qualcun altro. Buona programmazione!

fonte

2015-12-08 18:05:52

+0

Come possiamo aggiungere del contenuto aggiuntivo in file pdf utilizzando la stessa libreria? Qualche idea? –

+3

Può creare più pagine se l'immagine è grande? – TechTurtle

+0

Sì, probabilmente dovrai giocarci un po '. –

19

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"); 
 
    }); 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <br/> 
 
    <button class="btn btn-primary" onclick="generatePDF()"><i class="fa fa-save"></i> Save as PDF</button> 
 
    <br/> 
 
    <br/> 
 
    <div id="formConfirmation"> 
 

 
    <div class="container theme-showcase" role="main"> 
 
     <!-- Main jumbotron for a primary marketing message or call to action --> 
 
     <div class="jumbotron"> 
 
     <h1>Theme example</h1> 
 
     <p>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.</p> 
 
     </div> 
 
     <div class="page-header"> 
 
     <h1>Buttons</h1> 
 
     </div> 
 
     <p> 
 
     <button type="button" class="btn btn-lg btn-default">Default</button> 
 
     <button type="button" class="btn btn-lg btn-primary">Primary</button> 
 
     <button type="button" class="btn btn-lg btn-success">Success</button> 
 
     <button type="button" class="btn btn-lg btn-info">Info</button> 
 
     <button type="button" class="btn btn-lg btn-warning">Warning</button> 
 
     <button type="button" class="btn btn-lg btn-danger">Danger</button> 
 
     <button type="button" class="btn btn-lg btn-link">Link</button> 
 
     </p> 
 
     <p> 
 
     <button type="button" class="btn btn-default">Default</button> 
 
     <button type="button" class="btn btn-primary">Primary</button> 
 
     <button type="button" class="btn btn-success">Success</button> 
 
     <button type="button" class="btn btn-info">Info</button> 
 
     <button type="button" class="btn btn-warning">Warning</button> 
 
     <button type="button" class="btn btn-danger">Danger</button> 
 
     <button type="button" class="btn btn-link">Link</button> 
 
     </p> 
 
     <p> 
 
     <button type="button" class="btn btn-sm btn-default">Default</button> 
 
     <button type="button" class="btn btn-sm btn-primary">Primary</button> 
 
     <button type="button" class="btn btn-sm btn-success">Success</button> 
 
     <button type="button" class="btn btn-sm btn-info">Info</button> 
 
     <button type="button" class="btn btn-sm btn-warning">Warning</button> 
 
     <button type="button" class="btn btn-sm btn-danger">Danger</button> 
 
     <button type="button" class="btn btn-sm btn-link">Link</button> 
 
     </p> 
 
     <p> 
 
     <button type="button" class="btn btn-xs btn-default">Default</button> 
 
     <button type="button" class="btn btn-xs btn-primary">Primary</button> 
 
     <button type="button" class="btn btn-xs btn-success">Success</button> 
 
     <button type="button" class="btn btn-xs btn-info">Info</button> 
 
     <button type="button" class="btn btn-xs btn-warning">Warning</button> 
 
     <button type="button" class="btn btn-xs btn-danger">Danger</button> 
 
     <button type="button" class="btn btn-xs btn-link">Link</button> 
 
     </p> 
 
     <div class="page-header"> 
 
     <h1>Tables</h1> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <table class="table"> 
 
      <thead> 
 
       <tr> 
 
       <th>#</th> 
 
       <th>First Name</th> 
 
       <th>Last Name</th> 
 
       <th>Username</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td>1</td> 
 
       <td>Mark</td> 
 
       <td>Otto</td> 
 
       <td>@mdo</td> 
 
       </tr> 
 
       <tr> 
 
       <td>2</td> 
 
       <td>Jacob</td> 
 
       <td>Thornton</td> 
 
       <td>@fat</td> 
 
       </tr> 
 
       <tr> 
 
       <td>3</td> 
 
       <td>Larry</td> 
 
       <td>the Bird</td> 
 
       <td>@twitter</td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <table class="table table-striped"> 
 
      <thead> 
 
       <tr> 
 
       <th>#</th> 
 
       <th>First Name</th> 
 
       <th>Last Name</th> 
 
       <th>Username</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td>1</td> 
 
       <td>Mark</td> 
 
       <td>Otto</td> 
 
       <td>@mdo</td> 
 
       </tr> 
 
       <tr> 
 
       <td>2</td> 
 
       <td>Jacob</td> 
 
       <td>Thornton</td> 
 
       <td>@fat</td> 
 
       </tr> 
 
       <tr> 
 
       <td>3</td> 
 
       <td>Larry</td> 
 
       <td>the Bird</td> 
 
       <td>@twitter</td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <table class="table table-bordered"> 
 
      <thead> 
 
       <tr> 
 
       <th>#</th> 
 
       <th>First Name</th> 
 
       <th>Last Name</th> 
 
       <th>Username</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td rowspan="2">1</td> 
 
       <td>Mark</td> 
 
       <td>Otto</td> 
 
       <td>@mdo</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Mark</td> 
 
       <td>Otto</td> 
 
       <td>@TwBootstrap</td> 
 
       </tr> 
 
       <tr> 
 
       <td>2</td> 
 
       <td>Jacob</td> 
 
       <td>Thornton</td> 
 
       <td>@fat</td> 
 
       </tr> 
 
       <tr> 
 
       <td>3</td> 
 
       <td colspan="2">Larry the Bird</td> 
 
       <td>@twitter</td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <table class="table table-condensed"> 
 
      <thead> 
 
       <tr> 
 
       <th>#</th> 
 
       <th>First Name</th> 
 
       <th>Last Name</th> 
 
       <th>Username</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td>1</td> 
 
       <td>Mark</td> 
 
       <td>Otto</td> 
 
       <td>@mdo</td> 
 
       </tr> 
 
       <tr> 
 
       <td>2</td> 
 
       <td>Jacob</td> 
 
       <td>Thornton</td> 
 
       <td>@fat</td> 
 
       </tr> 
 
       <tr> 
 
       <td>3</td> 
 
       <td colspan="2">Larry the Bird</td> 
 
       <td>@twitter</td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </div> 
 
     <div class="page-header"> 
 
     <h1>Thumbnails</h1> 
 
     </div> 
 
     <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera"> 
 
     <div class="page-header"> 
 
     <h1>Labels</h1> 
 
     </div> 
 
     <h1> 
 
     <span class="label label-default">Default</span> 
 
     <span class="label label-primary">Primary</span> 
 
     <span class="label label-success">Success</span> 
 
     <span class="label label-info">Info</span> 
 
     <span class="label label-warning">Warning</span> 
 
     <span class="label label-danger">Danger</span> 
 
     </h1> 
 
     <h2> 
 
     <span class="label label-default">Default</span> 
 
     <span class="label label-primary">Primary</span> 
 
     <span class="label label-success">Success</span> 
 
     <span class="label label-info">Info</span> 
 
     <span class="label label-warning">Warning</span> 
 
     <span class="label label-danger">Danger</span> 
 
     </h2> 
 
     <h3> 
 
     <span class="label label-default">Default</span> 
 
     <span class="label label-primary">Primary</span> 
 
     <span class="label label-success">Success</span> 
 
     <span class="label label-info">Info</span> 
 
     <span class="label label-warning">Warning</span> 
 
     <span class="label label-danger">Danger</span> 
 
     </h3> 
 
     <h4> 
 
     <span class="label label-default">Default</span> 
 
     <span class="label label-primary">Primary</span> 
 
     <span class="label label-success">Success</span> 
 
     <span class="label label-info">Info</span> 
 
     <span class="label label-warning">Warning</span> 
 
     <span class="label label-danger">Danger</span> 
 
     </h4> 
 
     <h5> 
 
     <span class="label label-default">Default</span> 
 
     <span class="label label-primary">Primary</span> 
 
     <span class="label label-success">Success</span> 
 
     <span class="label label-info">Info</span> 
 
     <span class="label label-warning">Warning</span> 
 
     <span class="label label-danger">Danger</span> 
 
     </h5> 
 
     <h6> 
 
     <span class="label label-default">Default</span> 
 
     <span class="label label-primary">Primary</span> 
 
     <span class="label label-success">Success</span> 
 
     <span class="label label-info">Info</span> 
 
     <span class="label label-warning">Warning</span> 
 
     <span class="label label-danger">Danger</span> 
 
     </h6> 
 
     <p> 
 
     <span class="label label-default">Default</span> 
 
     <span class="label label-primary">Primary</span> 
 
     <span class="label label-success">Success</span> 
 
     <span class="label label-info">Info</span> 
 
     <span class="label label-warning">Warning</span> 
 
     <span class="label label-danger">Danger</span> 
 
     </p> 
 
     <div class="page-header"> 
 
     <h1>Badges</h1> 
 
     </div> 
 
     <p> 
 
     <a href="#">Inbox <span class="badge">42</span></a> 
 
     </p> 
 
     <ul class="nav nav-pills" role="tablist"> 
 
     <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a> 
 
     </li> 
 
     <li role="presentation"><a href="#">Profile</a> 
 
     </li> 
 
     <li role="presentation"><a href="#">Messages <span class="badge">3</span></a> 
 
     </li> 
 
     </ul> 
 
     <div class="page-header"> 
 
     <h1>Dropdown menus</h1> 
 
     </div> 
 
     <div class="dropdown theme-dropdown clearfix"> 
 
     <a id="dropdownMenu1" href="#" class="sr-only dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
      <li class="active"><a href="#">Action</a> 
 
      </li> 
 
      <li><a href="#">Another action</a> 
 
      </li> 
 
      <li><a href="#">Something else here</a> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="page-header"> 
 
     <h1>Navs</h1> 
 
     </div> 
 
     <ul class="nav nav-tabs" role="tablist"> 
 
     <li role="presentation" class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li role="presentation"><a href="#">Profile</a> 
 
     </li> 
 
     <li role="presentation"><a href="#">Messages</a> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav nav-pills" role="tablist"> 
 
     <li role="presentation" class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li role="presentation"><a href="#">Profile</a> 
 
     </li> 
 
     <li role="presentation"><a href="#">Messages</a> 
 
     </li> 
 
     </ul> 
 
     <div class="page-header"> 
 
     <h1>Navbars</h1> 
 
     </div> 
 
     <nav class="navbar navbar-default"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Project name</a> 
 
      </div> 
 
      <div class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a> 
 
       </li> 
 
       <li><a href="#about">About</a> 
 
       </li> 
 
       <li><a href="#contact">Contact</a> 
 
       </li> 
 
       <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Action</a> 
 
        </li> 
 
        <li><a href="#">Another action</a> 
 
        </li> 
 
        <li><a href="#">Something else here</a> 
 
        </li> 
 
        <li role="separator" class="divider"></li> 
 
        <li class="dropdown-header">Nav header</li> 
 
        <li><a href="#">Separated link</a> 
 
        </li> 
 
        <li><a href="#">One more separated link</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
      <!--/.nav-collapse --> 
 
     </div> 
 
     </nav> 
 
     <nav class="navbar navbar-inverse"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Project name</a> 
 
      </div> 
 
      <div class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a> 
 
       </li> 
 
       <li><a href="#about">About</a> 
 
       </li> 
 
       <li><a href="#contact">Contact</a> 
 
       </li> 
 
       <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Action</a> 
 
        </li> 
 
        <li><a href="#">Another action</a> 
 
        </li> 
 
        <li><a href="#">Something else here</a> 
 
        </li> 
 
        <li role="separator" class="divider"></li> 
 
        <li class="dropdown-header">Nav header</li> 
 
        <li><a href="#">Separated link</a> 
 
        </li> 
 
        <li><a href="#">One more separated link</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
      <!--/.nav-collapse --> 
 
     </div> 
 
     </nav> 
 
     <div class="page-header"> 
 
     <h1>Alerts</h1> 
 
     </div> 
 
     <div class="alert alert-success" role="alert"> 
 
     <strong>Well done!</strong> You successfully read this important alert message. 
 
     </div> 
 
     <div class="alert alert-info" role="alert"> 
 
     <strong>Heads up!</strong> This alert needs your attention, but it's not super important. 
 
     </div> 
 
     <div class="alert alert-warning" role="alert"> 
 
     <strong>Warning!</strong> Best check yo self, you're not looking too good. 
 
     </div> 
 
     <div class="alert alert-danger" role="alert"> 
 
     <strong>Oh snap!</strong> Change a few things up and try submitting again. 
 
     </div> 
 
     <div class="page-header"> 
 
     <h1>Progress bars</h1> 
 
     </div> 
 
     <div class="progress"> 
 
     <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span> 
 
     </div> 
 
     </div> 
 
     <div class="progress"> 
 
     <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span> 
 
     </div> 
 
     </div> 
 
     <div class="progress"> 
 
     <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span> 
 
     </div> 
 
     </div> 
 
     <div class="progress"> 
 
     <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span> 
 
     </div> 
 
     </div> 
 
     <div class="progress"> 
 
     <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span> 
 
     </div> 
 
     </div> 
 
     <div class="progress"> 
 
     <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete</span> 
 
     </div> 
 
     </div> 
 
     <div class="progress"> 
 
     <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span> 
 
     </div> 
 
     <div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span> 
 
     </div> 
 
     <div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span> 
 
     </div> 
 
     </div> 
 
     <div class="page-header"> 
 
     <h1>List groups</h1> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-4"> 
 
      <ul class="list-group"> 
 
      <li class="list-group-item">Cras justo odio</li> 
 
      <li class="list-group-item">Dapibus ac facilisis in</li> 
 
      <li class="list-group-item">Morbi leo risus</li> 
 
      <li class="list-group-item">Porta ac consectetur ac</li> 
 
      <li class="list-group-item">Vestibulum at eros</li> 
 
      </ul> 
 
     </div> 
 
     <!-- /.col-sm-4 --> 
 
     <div class="col-sm-4"> 
 
      <div class="list-group"> 
 
      <a href="#" class="list-group-item active"> 
 
       Cras justo odio 
 
      </a> 
 
      <a href="#" class="list-group-item">Dapibus ac facilisis in</a> 
 
      <a href="#" class="list-group-item">Morbi leo risus</a> 
 
      <a href="#" class="list-group-item">Porta ac consectetur ac</a> 
 
      <a href="#" class="list-group-item">Vestibulum at eros</a> 
 
      </div> 
 
     </div> 
 
     <!-- /.col-sm-4 --> 
 
     <div class="col-sm-4"> 
 
      <div class="list-group"> 
 
      <a href="#" class="list-group-item active"> 
 
       <h4 class="list-group-item-heading">List group item heading</h4> 
 
       <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 
 
      </a> 
 
      <a href="#" class="list-group-item"> 
 
       <h4 class="list-group-item-heading">List group item heading</h4> 
 
       <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 
 
      </a> 
 
      <a href="#" class="list-group-item"> 
 
       <h4 class="list-group-item-heading">List group item heading</h4> 
 
       <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 
 
      </a> 
 
      </div> 
 
     </div> 
 
     <!-- /.col-sm-4 --> 
 
     </div> 
 
     <div class="page-header"> 
 
     <h1>Panels</h1> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-4"> 
 
      <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h3 class="panel-title">Panel title</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
       Panel content 
 
      </div> 
 
      </div> 
 
      <div class="panel panel-primary"> 
 
      <div class="panel-heading"> 
 
       <h3 class="panel-title">Panel title</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
       Panel content 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <!-- /.col-sm-4 --> 
 
     <div class="col-sm-4"> 
 
      <div class="panel panel-success"> 
 
      <div class="panel-heading"> 
 
       <h3 class="panel-title">Panel title</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
       Panel content 
 
      </div> 
 
      </div> 
 
      <div class="panel panel-info"> 
 
      <div class="panel-heading"> 
 
       <h3 class="panel-title">Panel title</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
       Panel content 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <!-- /.col-sm-4 --> 
 
     <div class="col-sm-4"> 
 
      <div class="panel panel-warning"> 
 
      <div class="panel-heading"> 
 
       <h3 class="panel-title">Panel title</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
       Panel content 
 
      </div> 
 
      </div> 
 
      <div class="panel panel-danger"> 
 
      <div class="panel-heading"> 
 
       <h3 class="panel-title">Panel title</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
       Panel content 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <!-- /.col-sm-4 --> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

fonte

2016-10-18 19:31:36 Mahib

+1

che dire di scorrimento, se ci fossero dati molto lunghi, quindi il pdf dovrebbe essere esportato come quello non è vero ?, l'ho provato e ha votato, ma nel mio caso ci sono dati scrollabili nel mio div, puoi aggiungere per favore scroll-true vero? ho provato molto – Jigar7521

+0

@ Jigar7521 per quanto ho visto nell'esportazione di kendo pdf, ci sono dei limiti. Come se il tuo div è nascosto, ti darà un pdf vuoto. C'è un aggiramento come suggerito nel kendo, qui http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#off-screen-content. Quindi se hai un elemento in grado di scrollare la soluzione, crea un div con style = "position: absolute; width: 800px; left: -10000px; top: 0;" e pan tutto ciò che vuoi esportare in pdf. Oppure usa la griglia di kendo con scrollabile-> virtuale e ha la possibilità di esportare pdf con tutti i dati nella griglia. – Mahib

+0

@Mahib Che dire degli elementi svg come i grafici nvd3? perché non è visualizzato in pdf. – Dixit

0

questo è ciò che ha funzionato per me sto usando html2pdf da un app Angular2, così ho fatto un riferimento a questa funzione nel regolatore

var html2pdf = (function(html2canvas, jsPDF) {

dichiarato in html2pdf.js.

così ho aggiunto subito dopo le dichiarazioni di importazione nel mio angolare-Controller questa dichiarazione:

declare function html2pdf(html2canvas, jsPDF): any;

poi, da un metodo di mio controller angolare Chiamo 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 aiuti

fonte

2017-06-23 13:18:28

+0

Mi viene restituito 'html2pdf non è definito 'error –

+0

puoi per favore mostrarmi il tuo codice componente angular2? –

+0

il codice è lì, hai qualche link al tuo github o qualcosa del genere in modo da verificarlo –

Problemi correlati

 Problemi correlati