Generate PDF from HTML using pdfMake in Angularjs

Question

I am trying to create a PDF from my HTML using pdfMake and Angular  I ve also tried jsPDF and couldn t get it to work either    I tried using the following code in my Angular controller   var blob   new Blob  document getElementById  exportable   innerHTML   var docDefinition         content   blob    pdfMake createPdf docDefinition  open      but I receive the following error       Unrecognized document structure     margin  null      My HTML consists of two simple tables in a div exportable   If anyone knows a solution to this issue  or another way to get the HTML into a PDF from Angular  PLEASE help   Any assistance is GREATLY appreciated

User · Answer

was implemented that in service-now platform. No need to use other library - makepdf have all you need!

that my html part (include preloder gif):

   <div class="pdf-preview" ng-init="generatePDF(true)">
    <object data="{{c.content}}" type="application/pdf" style="width:58vh;height:88vh;" ng-if="c.content" ></object>
    <div ng-if="!c.content">
      <img src="https://support.lenovo.com/esv4/images/loading.gif" width="50" height="50">
    </div>
  </div>

this is client script (js part)

$scope.generatePDF = function (preview) {
    docDefinition = {} //you rootine to generate pdf content
    //...
    if (preview) {
        pdfMake.createPdf(docDefinition).getDataUrl(function(dataURL) {
            c.content = dataURL;
        });
    }
}

So on page load I fire init function that generate pdf content and if required preview (set as true) result will be assigned to c.content variable. On html side object will be not shown until c.content will got a value, so that will show loading gif.

User · Answer

Okay  I figured this out    You will need html2canvas and pdfmake   You do NOT need to do any injection in your app js to either  just include in your script tags On the div that you want to create the PDF of  add an ID name like below     lt div id  exportthis  gt   In your Angular controller use the id of the div in your call to html2canvas  change the canvas to an image using toDataURL   Then in your docDefinition for pdfmake assign the image to the content  The completed code in your controller will look like this          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                                 I hope this helps someone else   Happy coding

User · Answer

I know its not relevant to this post but might help others converting HTML to PDF on client side  This is a simple solution if you use kendo  It also preserves the css  most of the cases     x000D   x000D  var generatePDF   function     x000D    kendo drawing drawDOM     formConfirmation    then function group    x000D      kendo drawing pdf saveAs group   Converted PDF pdf    x000D        x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta http-equiv  X-UA-Compatible  content  IE edge  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D     lt  -- Latest compiled and minified CSS -- gt  x000D     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D     lt  -- Optional theme -- gt  x000D     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap-theme min css  gt  x000D     lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D     lt  -- Latest compiled and minified JavaScript -- gt  x000D     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D     lt script src    kendo cdn telerik com 2016 3 914 js kendo all min js  gt  lt  script gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt br  gt  x000D     lt button class  btn btn-primary  onclick  generatePDF    gt  lt i class  fa fa-save  gt  lt  i gt  Save as PDF lt  button gt  x000D     lt br  gt  x000D     lt br  gt  x000D     lt div id  formConfirmation  gt  x000D   x000D       lt div class  container theme-showcase  role  main  gt  x000D         lt  -- Main jumbotron for a primary marketing message or call to action -- gt  x000D         lt div class  jumbotron  gt  x000D           lt h1 gt Theme example lt  h1 gt  x000D           lt p gt 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  lt  p gt  x000D         lt  div gt  x000D         lt div class  page-header  gt  x000D           lt h1 gt Buttons lt  h1 gt  x000D         lt  div gt  x000D         lt p gt  x000D           lt button type  button  class  btn btn-lg btn-default  gt Default lt  button gt  x000D           lt button type  button  class  btn btn-lg btn-primary  gt Primary lt  button gt  x000D           lt button type  button  class  btn btn-lg btn-success  gt Success lt  button gt  x000D           lt button type  button  class  btn btn-lg btn-info  gt Info lt  button gt  x000D           lt button type  button  class  btn btn-lg btn-warning  gt Warning lt  button gt  x000D           lt button type  button  class  btn btn-lg btn-danger  gt Danger lt  button gt  x000D           lt button type  button  class  btn btn-lg btn-link  gt Link lt  button gt  x000D         lt  p gt  x000D         lt p gt  x000D           lt button type  button  class  btn btn-default  gt Default lt  button gt  x000D           lt button type  button  class  btn btn-primary  gt Primary lt  button gt  x000D           lt button type  button  class  btn btn-success  gt Success lt  button gt  x000D           lt button type  button  class  btn btn-info  gt Info lt  button gt  x000D           lt button type  button  class  btn btn-warning  gt Warning lt  button gt  x000D           lt button type  button  class  btn btn-danger  gt Danger lt  button gt  x000D           lt button type  button  class  btn btn-link  gt Link lt  button gt  x000D         lt  p gt  x000D         lt p gt  x000D           lt button type  button  class  btn btn-sm btn-default  gt Default lt  button gt  x000D           lt button type  button  class  btn btn-sm btn-primary  gt Primary lt  button gt  x000D           lt button type  button  class  btn btn-sm btn-success  gt Success lt  button gt  x000D           lt button type  button  class  btn btn-sm btn-info  gt Info lt  button gt  x000D           lt button type  button  class  btn btn-sm btn-warning  gt Warning lt  button gt  x000D           lt button type  button  class  btn btn-sm btn-danger  gt Danger lt  button gt  x000D           lt button type  button  class  btn btn-sm btn-link  gt Link lt  button gt  x000D         lt  p gt  x000D         lt p gt  x000D           lt button type  button  class  btn btn-xs btn-default  gt Default lt  button gt  x000D           lt button type  button  class  btn btn-xs btn-primary  gt Primary lt  button gt  x000D           lt button type  button  class  btn btn-xs btn-success  gt Success lt  button gt  x000D           lt button type  button  class  btn btn-xs btn-info  gt Info lt  button gt  x000D           lt button type  button  class  btn btn-xs btn-warning  gt Warning lt  button gt  x000D           lt button type  button  class  btn btn-xs btn-danger  gt Danger lt  button gt  x000D           lt button type  button  class  btn btn-xs btn-link  gt Link lt  button gt  x000D         lt  p gt  x000D         lt div class  page-header  gt  x000D           lt h1 gt Tables lt  h1 gt  x000D         lt  div gt  x000D         lt div class  row  gt  x000D           lt div class  col-md-6  gt  x000D             lt table class  table  gt  x000D               lt thead gt  x000D                 lt tr gt  x000D                   lt th gt   lt  th gt  x000D                   lt th gt First Name lt  th gt  x000D                   lt th gt Last Name lt  th gt  x000D                   lt th gt Username lt  th gt  x000D                 lt  tr gt  x000D               lt  thead gt  x000D               lt tbody gt  x000D                 lt tr gt  x000D                   lt td gt 1 lt  td gt  x000D                   lt td gt Mark lt  td gt  x000D                   lt td gt Otto lt  td gt  x000D                   lt td gt  mdo lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt 2 lt  td gt  x000D                   lt td gt Jacob lt  td gt  x000D                   lt td gt Thornton lt  td gt  x000D                   lt td gt  fat lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt 3 lt  td gt  x000D                   lt td gt Larry lt  td gt  x000D                   lt td gt the Bird lt  td gt  x000D                   lt td gt  twitter lt  td gt  x000D                 lt  tr gt  x000D               lt  tbody gt  x000D             lt  table gt  x000D           lt  div gt  x000D           lt div class  col-md-6  gt  x000D             lt table class  table table-striped  gt  x000D               lt thead gt  x000D                 lt tr gt  x000D                   lt th gt   lt  th gt  x000D                   lt th gt First Name lt  th gt  x000D                   lt th gt Last Name lt  th gt  x000D                   lt th gt Username lt  th gt  x000D                 lt  tr gt  x000D               lt  thead gt  x000D               lt tbody gt  x000D                 lt tr gt  x000D                   lt td gt 1 lt  td gt  x000D                   lt td gt Mark lt  td gt  x000D                   lt td gt Otto lt  td gt  x000D                   lt td gt  mdo lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt 2 lt  td gt  x000D                   lt td gt Jacob lt  td gt  x000D                   lt td gt Thornton lt  td gt  x000D                   lt td gt  fat lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt 3 lt  td gt  x000D                   lt td gt Larry lt  td gt  x000D                   lt td gt the Bird lt  td gt  x000D                   lt td gt  twitter lt  td gt  x000D                 lt  tr gt  x000D               lt  tbody gt  x000D             lt  table gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  row  gt  x000D           lt div class  col-md-6  gt  x000D             lt table class  table table-bordered  gt  x000D               lt thead gt  x000D                 lt tr gt  x000D                   lt th gt   lt  th gt  x000D                   lt th gt First Name lt  th gt  x000D                   lt th gt Last Name lt  th gt  x000D                   lt th gt Username lt  th gt  x000D                 lt  tr gt  x000D               lt  thead gt  x000D               lt tbody gt  x000D                 lt tr gt  x000D                   lt td rowspan  2  gt 1 lt  td gt  x000D                   lt td gt Mark lt  td gt  x000D                   lt td gt Otto lt  td gt  x000D                   lt td gt  mdo lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt Mark lt  td gt  x000D                   lt td gt Otto lt  td gt  x000D                   lt td gt  TwBootstrap lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt 2 lt  td gt  x000D                   lt td gt Jacob lt  td gt  x000D                   lt td gt Thornton lt  td gt  x000D                   lt td gt  fat lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt 3 lt  td gt  x000D                   lt td colspan  2  gt Larry the Bird lt  td gt  x000D                   lt td gt  twitter lt  td gt  x000D                 lt  tr gt  x000D               lt  tbody gt  x000D             lt  table gt  x000D           lt  div gt  x000D           lt div class  col-md-6  gt  x000D             lt table class  table table-condensed  gt  x000D               lt thead gt  x000D                 lt tr gt  x000D                   lt th gt   lt  th gt  x000D                   lt th gt First Name lt  th gt  x000D                   lt th gt Last Name lt  th gt  x000D                   lt th gt Username lt  th gt  x000D                 lt  tr gt  x000D               lt  thead gt  x000D               lt tbody gt  x000D                 lt tr gt  x000D                   lt td gt 1 lt  td gt  x000D                   lt td gt Mark lt  td gt  x000D                   lt td gt Otto lt  td gt  x000D                   lt td gt  mdo lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt 2 lt  td gt  x000D                   lt td gt Jacob lt  td gt  x000D                   lt td gt Thornton lt  td gt  x000D                   lt td gt  fat lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt 3 lt  td gt  x000D                   lt td colspan  2  gt Larry the Bird lt  td gt  x000D                   lt td gt  twitter lt  td gt  x000D                 lt  tr gt  x000D               lt  tbody gt  x000D             lt  table gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  page-header  gt  x000D           lt h1 gt Thumbnails lt  h1 gt  x000D         lt  div gt  x000D         lt 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  gt  x000D         lt div class  page-header  gt  x000D           lt h1 gt Labels lt  h1 gt  x000D         lt  div gt  x000D         lt h1 gt  x000D           lt span class  label label-default  gt Default lt  span gt  x000D           lt span class  label label-primary  gt Primary lt  span gt  x000D           lt span class  label label-success  gt Success lt  span gt  x000D           lt span class  label label-info  gt Info lt  span gt  x000D           lt span class  label label-warning  gt Warning lt  span gt  x000D           lt span class  label label-danger  gt Danger lt  span gt  x000D         lt  h1 gt  x000D         lt h2 gt  x000D           lt span class  label label-default  gt Default lt  span gt  x000D           lt span class  label label-primary  gt Primary lt  span gt  x000D           lt span class  label label-success  gt Success lt  span gt  x000D           lt span class  label label-info  gt Info lt  span gt  x000D           lt span class  label label-warning  gt Warning lt  span gt  x000D           lt span class  label label-danger  gt Danger lt  span gt  x000D         lt  h2 gt  x000D         lt h3 gt  x000D           lt span class  label label-default  gt Default lt  span gt  x000D           lt span class  label label-primary  gt Primary lt  span gt  x000D           lt span class  label label-success  gt Success lt  span gt  x000D           lt span class  label label-info  gt Info lt  span gt  x000D           lt span class  label label-warning  gt Warning lt  span gt  x000D           lt span class  label label-danger  gt Danger lt  span gt  x000D         lt  h3 gt  x000D         lt h4 gt  x000D           lt span class  label label-default  gt Default lt  span gt  x000D           lt span class  label label-primary  gt Primary lt  span gt  x000D           lt span class  label label-success  gt Success lt  span gt  x000D           lt span class  label label-info  gt Info lt  span gt  x000D           lt span class  label label-warning  gt Warning lt  span gt  x000D           lt span class  label label-danger  gt Danger lt  span gt  x000D         lt  h4 gt  x000D         lt h5 gt  x000D           lt span class  label label-default  gt Default lt  span gt  x000D           lt span class  label label-primary  gt Primary lt  span gt  x000D           lt span class  label label-success  gt Success lt  span gt  x000D           lt span class  label label-info  gt Info lt  span gt  x000D           lt span class  label label-warning  gt Warning lt  span gt  x000D           lt span class  label label-danger  gt Danger lt  span gt  x000D         lt  h5 gt  x000D         lt h6 gt  x000D           lt span class  label label-default  gt Default lt  span gt  x000D           lt span class  label label-primary  gt Primary lt  span gt  x000D           lt span class  label label-success  gt Success lt  span gt  x000D           lt span class  label label-info  gt Info lt  span gt  x000D           lt span class  label label-warning  gt Warning lt  span gt  x000D           lt span class  label label-danger  gt Danger lt  span gt  x000D         lt  h6 gt  x000D         lt p gt  x000D           lt span class  label label-default  gt Default lt  span gt  x000D           lt span class  label label-primary  gt Primary lt  span gt  x000D           lt span class  label label-success  gt Success lt  span gt  x000D           lt span class  label label-info  gt Info lt  span gt  x000D           lt span class  label label-warning  gt Warning lt  span gt  x000D           lt span class  label label-danger  gt Danger lt  span gt  x000D         lt  p gt  x000D         lt div class  page-header  gt  x000D           lt h1 gt Badges lt  h1 gt  x000D         lt  div gt  x000D         lt p gt  x000D           lt a href     gt Inbox  lt span class  badge  gt 42 lt  span gt  lt  a gt  x000D         lt  p gt  x000D         lt ul class  nav nav-pills  role  tablist  gt  x000D           lt li role  presentation  class  active  gt  lt a href     gt Home  lt span class  badge  gt 42 lt  span gt  lt  a gt  x000D           lt  li gt  x000D           lt li role  presentation  gt  lt a href     gt Profile lt  a gt  x000D           lt  li gt  x000D           lt li role  presentation  gt  lt a href     gt Messages  lt span class  badge  gt 3 lt  span gt  lt  a gt  x000D           lt  li gt  x000D         lt  ul gt  x000D         lt div class  page-header  gt  x000D           lt h1 gt Dropdown menus lt  h1 gt  x000D         lt  div gt  x000D         lt div class  dropdown theme-dropdown clearfix  gt  x000D           lt a id  dropdownMenu1  href     class  sr-only dropdown-toggle  data-toggle  dropdown  role  button  aria-haspopup  true  aria-expanded  false  gt Dropdown  lt span class  caret  gt  lt  span gt  lt  a gt  x000D           lt ul class  dropdown-menu  aria-labelledby  dropdownMenu1  gt  x000D             lt li class  active  gt  lt a href     gt Action lt  a gt  x000D             lt  li gt  x000D             lt li gt  lt a href     gt Another action lt  a gt  x000D             lt  li gt  x000D             lt li gt  lt a href     gt Something else here lt  a gt  x000D             lt  li gt  x000D             lt li role  separator  class  divider  gt  lt  li gt  x000D             lt li gt  lt a href     gt Separated link lt  a gt  x000D             lt  li gt  x000D           lt  ul gt  x000D         lt  div gt  x000D         lt div class  page-header  gt  x000D           lt h1 gt Navs lt  h1 gt  x000D         lt  div gt  x000D         lt ul class  nav nav-tabs  role  tablist  gt  x000D           lt li role  presentation  class  active  gt  lt a href     gt Home lt  a gt  x000D           lt  li gt  x000D           lt li role  presentation  gt  lt a href     gt Profile lt  a gt  x000D           lt  li gt  x000D           lt li role  presentation  gt  lt a href     gt Messages lt  a gt  x000D           lt  li gt  x000D         lt  ul gt  x000D         lt ul class  nav nav-pills  role  tablist  gt  x000D           lt li role  presentation  class  active  gt  lt a href     gt Home lt  a gt  x000D           lt  li gt  x000D           lt li role  presentation  gt  lt a href     gt Profile lt  a gt  x000D           lt  li gt  x000D           lt li role  presentation  gt  lt a href     gt Messages lt  a gt  x000D           lt  li gt  x000D         lt  ul gt  x000D         lt div class  page-header  gt  x000D           lt h1 gt Navbars lt  h1 gt  x000D         lt  div gt  x000D         lt nav class  navbar navbar-default  gt  x000D           lt div class  container  gt  x000D             lt div class  navbar-header  gt  x000D               lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   navbar-collapse  gt  x000D                 lt span class  sr-only  gt Toggle navigation lt  span gt  x000D                 lt span class  icon-bar  gt  lt  span gt  x000D                 lt span class  icon-bar  gt  lt  span gt  x000D                 lt span class  icon-bar  gt  lt  span gt  x000D               lt  button gt  x000D               lt a class  navbar-brand  href     gt Project name lt  a gt  x000D             lt  div gt  x000D             lt div class  navbar-collapse collapse  gt  x000D               lt ul class  nav navbar-nav  gt  x000D                 lt li class  active  gt  lt a href     gt Home lt  a gt  x000D                 lt  li gt  x000D                 lt li gt  lt a href   about  gt About lt  a gt  x000D                 lt  li gt  x000D                 lt li gt  lt a href   contact  gt Contact lt  a gt  x000D                 lt  li gt  x000D                 lt li class  dropdown  gt  x000D                   lt a href     class  dropdown-toggle  data-toggle  dropdown  role  button  aria-haspopup  true  aria-expanded  false  gt Dropdown  lt span class  caret  gt  lt  span gt  lt  a gt  x000D                   lt ul class  dropdown-menu  gt  x000D                     lt li gt  lt a href     gt Action lt  a gt  x000D                     lt  li gt  x000D                     lt li gt  lt a href     gt Another action lt  a gt  x000D                     lt  li gt  x000D                     lt li gt  lt a href     gt Something else here lt  a gt  x000D                     lt  li gt  x000D                     lt li role  separator  class  divider  gt  lt  li gt  x000D                     lt li class  dropdown-header  gt Nav header lt  li gt  x000D                     lt li gt  lt a href     gt Separated link lt  a gt  x000D                     lt  li gt  x000D                     lt li gt  lt a href     gt One more separated link lt  a gt  x000D                     lt  li gt  x000D                   lt  ul gt  x000D                 lt  li gt  x000D               lt  ul gt  x000D             lt  div gt  x000D             lt  --  nav-collapse -- gt  x000D           lt  div gt  x000D         lt  nav gt  x000D         lt nav class  navbar navbar-inverse  gt  x000D           lt div class  container  gt  x000D             lt div class  navbar-header  gt  x000D               lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   navbar-collapse  gt  x000D                 lt span class  sr-only  gt Toggle navigation lt  span gt  x000D                 lt span class  icon-bar  gt  lt  span gt  x000D                 lt span class  icon-bar  gt  lt  span gt  x000D                 lt span class  icon-bar  gt  lt  span gt  x000D               lt  button gt  x000D               lt a class  navbar-brand  href     gt Project name lt  a gt  x000D             lt  div gt  x000D             lt div class  navbar-collapse collapse  gt  x000D               lt ul class  nav navbar-nav  gt  x000D                 lt li class  active  gt  lt a href     gt Home lt  a gt  x000D                 lt  li gt  x000D                 lt li gt  lt a href   about  gt About lt  a gt  x000D                 lt  li gt  x000D                 lt li gt  lt a href   contact  gt Contact lt  a gt  x000D                 lt  li gt  x000D                 lt li class  dropdown  gt  x000D                   lt a href     class  dropdown-toggle  data-toggle  dropdown  role  button  aria-haspopup  true  aria-expanded  false  gt Dropdown  lt span class  caret  gt  lt  span gt  lt  a gt  x000D                   lt ul class  dropdown-menu  gt  x000D                     lt li gt  lt a href     gt Action lt  a gt  x000D                     lt  li gt  x000D                     lt li gt  lt a href     gt Another action lt  a gt  x000D                     lt  li gt  x000D                     lt li gt  lt a href     gt Something else here lt  a gt  x000D                     lt  li gt  x000D                     lt li role  separator  class  divider  gt  lt  li gt  x000D                     lt li class  dropdown-header  gt Nav header lt  li gt  x000D                     lt li gt  lt a href     gt Separated link lt  a gt  x000D                     lt  li gt  x000D                     lt li gt  lt a href     gt One more separated link lt  a gt  x000D                     lt  li gt  x000D                   lt  ul gt  x000D                 lt  li gt  x000D               lt  ul gt  x000D             lt  div gt  x000D             lt  --  nav-collapse -- gt  x000D           lt  div gt  x000D         lt  nav gt  x000D         lt div class  page-header  gt  x000D           lt h1 gt Alerts lt  h1 gt  x000D         lt  div gt  x000D         lt div class  alert alert-success  role  alert  gt  x000D           lt strong gt Well done  lt  strong gt  You successfully read this important alert message  x000D         lt  div gt  x000D         lt div class  alert alert-info  role  alert  gt  x000D           lt strong gt Heads up  lt  strong gt  This alert needs your attention  but it s not super important  x000D         lt  div gt  x000D         lt div class  alert alert-warning  role  alert  gt  x000D           lt strong gt Warning  lt  strong gt  Best check yo self  you re not looking too good  x000D         lt  div gt  x000D         lt div class  alert alert-danger  role  alert  gt  x000D           lt strong gt Oh snap  lt  strong gt  Change a few things up and try submitting again  x000D         lt  div gt  x000D         lt div class  page-header  gt  x000D           lt h1 gt Progress bars lt  h1 gt  x000D         lt  div gt  x000D         lt div class  progress  gt  x000D           lt div class  progress-bar  role  progressbar  aria-valuenow  60  aria-valuemin  0  aria-valuemax  100  style  width  60    gt  lt span class  sr-only  gt 60  Complete lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  progress  gt  x000D           lt div class  progress-bar progress-bar-success  role  progressbar  aria-valuenow  40  aria-valuemin  0  aria-valuemax  100  style  width  40   gt  lt span class  sr-only  gt 40  Complete  success  lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  progress  gt  x000D           lt div class  progress-bar progress-bar-info  role  progressbar  aria-valuenow  20  aria-valuemin  0  aria-valuemax  100  style  width  20   gt  lt span class  sr-only  gt 20  Complete lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  progress  gt  x000D           lt div class  progress-bar progress-bar-warning  role  progressbar  aria-valuenow  60  aria-valuemin  0  aria-valuemax  100  style  width  60   gt  lt span class  sr-only  gt 60  Complete  warning  lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  progress  gt  x000D           lt div class  progress-bar progress-bar-danger  role  progressbar  aria-valuenow  80  aria-valuemin  0  aria-valuemax  100  style  width  80   gt  lt span class  sr-only  gt 80  Complete  danger  lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  progress  gt  x000D           lt div class  progress-bar progress-bar-striped  role  progressbar  aria-valuenow  60  aria-valuemin  0  aria-valuemax  100  style  width  60   gt  lt span class  sr-only  gt 60  Complete lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  progress  gt  x000D           lt div class  progress-bar progress-bar-success  style  width  35   gt  lt span class  sr-only  gt 35  Complete  success  lt  span gt  x000D           lt  div gt  x000D           lt div class  progress-bar progress-bar-warning  style  width  20   gt  lt span class  sr-only  gt 20  Complete  warning  lt  span gt  x000D           lt  div gt  x000D           lt div class  progress-bar progress-bar-danger  style  width  10   gt  lt span class  sr-only  gt 10  Complete  danger  lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  page-header  gt  x000D           lt h1 gt List groups lt  h1 gt  x000D         lt  div gt  x000D         lt div class  row  gt  x000D           lt div class  col-sm-4  gt  x000D             lt ul class  list-group  gt  x000D               lt li class  list-group-item  gt Cras justo odio lt  li gt  x000D               lt li class  list-group-item  gt Dapibus ac facilisis in lt  li gt  x000D               lt li class  list-group-item  gt Morbi leo risus lt  li gt  x000D               lt li class  list-group-item  gt Porta ac consectetur ac lt  li gt  x000D               lt li class  list-group-item  gt Vestibulum at eros lt  li gt  x000D             lt  ul gt  x000D           lt  div gt  x000D           lt  --   col-sm-4 -- gt  x000D           lt div class  col-sm-4  gt  x000D             lt div class  list-group  gt  x000D               lt a href     class  list-group-item active  gt  x000D                Cras justo odio x000D               lt  a gt  x000D               lt a href     class  list-group-item  gt Dapibus ac facilisis in lt  a gt  x000D               lt a href     class  list-group-item  gt Morbi leo risus lt  a gt  x000D               lt a href     class  list-group-item  gt Porta ac consectetur ac lt  a gt  x000D               lt a href     class  list-group-item  gt Vestibulum at eros lt  a gt  x000D             lt  div gt  x000D           lt  div gt  x000D           lt  --   col-sm-4 -- gt  x000D           lt div class  col-sm-4  gt  x000D             lt div class  list-group  gt  x000D               lt a href     class  list-group-item active  gt  x000D                 lt h4 class  list-group-item-heading  gt List group item heading lt  h4 gt  x000D                 lt p class  list-group-item-text  gt Donec id elit non mi porta gravida at eget metus  Maecenas sed diam eget risus varius blandit  lt  p gt  x000D               lt  a gt  x000D               lt a href     class  list-group-item  gt  x000D                 lt h4 class  list-group-item-heading  gt List group item heading lt  h4 gt  x000D                 lt p class  list-group-item-text  gt Donec id elit non mi porta gravida at eget metus  Maecenas sed diam eget risus varius blandit  lt  p gt  x000D               lt  a gt  x000D               lt a href     class  list-group-item  gt  x000D                 lt h4 class  list-group-item-heading  gt List group item heading lt  h4 gt  x000D                 lt p class  list-group-item-text  gt Donec id elit non mi porta gravida at eget metus  Maecenas sed diam eget risus varius blandit  lt  p gt  x000D               lt  a gt  x000D             lt  div gt  x000D           lt  div gt  x000D           lt  --   col-sm-4 -- gt  x000D         lt  div gt  x000D         lt div class  page-header  gt  x000D           lt h1 gt Panels lt  h1 gt  x000D         lt  div gt  x000D         lt div class  row  gt  x000D           lt div class  col-sm-4  gt  x000D             lt div class  panel panel-default  gt  x000D               lt div class  panel-heading  gt  x000D                 lt h3 class  panel-title  gt Panel title lt  h3 gt  x000D               lt  div gt  x000D               lt div class  panel-body  gt  x000D                Panel content x000D               lt  div gt  x000D             lt  div gt  x000D             lt div class  panel panel-primary  gt  x000D               lt div class  panel-heading  gt  x000D                 lt h3 class  panel-title  gt Panel title lt  h3 gt  x000D               lt  div gt  x000D               lt div class  panel-body  gt  x000D                Panel content x000D               lt  div gt  x000D             lt  div gt  x000D           lt  div gt  x000D           lt  --   col-sm-4 -- gt  x000D           lt div class  col-sm-4  gt  x000D             lt div class  panel panel-success  gt  x000D               lt div class  panel-heading  gt  x000D                 lt h3 class  panel-title  gt Panel title lt  h3 gt  x000D               lt  div gt  x000D               lt div class  panel-body  gt  x000D                Panel content x000D               lt  div gt  x000D             lt  div gt  x000D             lt div class  panel panel-info  gt  x000D               lt div class  panel-heading  gt  x000D                 lt h3 class  panel-title  gt Panel title lt  h3 gt  x000D               lt  div gt  x000D               lt div class  panel-body  gt  x000D                Panel content x000D               lt  div gt  x000D             lt  div gt  x000D           lt  div gt  x000D           lt  --   col-sm-4 -- gt  x000D           lt div class  col-sm-4  gt  x000D             lt div class  panel panel-warning  gt  x000D               lt div class  panel-heading  gt  x000D                 lt h3 class  panel-title  gt Panel title lt  h3 gt  x000D               lt  div gt  x000D               lt div class  panel-body  gt  x000D                Panel content x000D               lt  div gt  x000D             lt  div gt  x000D             lt div class  panel panel-danger  gt  x000D               lt div class  panel-heading  gt  x000D                 lt h3 class  panel-title  gt Panel title lt  h3 gt  x000D               lt  div gt  x000D               lt div class  panel-body  gt  x000D                Panel content x000D               lt  div gt  x000D             lt  div gt  x000D           lt  div gt  x000D           lt  --   col-sm-4 -- gt  x000D         lt  div gt  x000D       lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

this is what it worked for me I m using html2pdf from an Angular2 app  so I made a reference to this function in the controller  var html2pdf    function html2canvas  jsPDF      declared in html2pdf js   So I added just after the import declarations in my angular-controller this declaration   declare function html2pdf html2canvas  jsPDF   any    then  from a method of my angular controller I m calling this function   generate pdf        this someService loadContent   subscribe        pdfContent   gt            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                                     Hope it helps

[javascript] Generate PDF from HTML using pdfMake in Angularjs

Examples related to javascript

Examples related to angularjs

Examples related to pdf

Examples related to pdfmake