jsPDF example from ng-bind-html

var app = angular.module('angularjs-starter', ['ui.bootstrap']);

//
//<ANY ng-bind-html="value | UnsafeHtml "></ANY
//
// Reason: with new version of
app.filter('UnsafeHtml', ["$sce",
  function($sce) {
    return function(val) {
      return $sce.trustAsHtml(val);
    };
  }
]);


app.controller('MainCtrl', function($scope) {

    $scope.order = {};
    $scope.order.showPopupAddedToCart = false;


    $scope.HtmlData = "<b>Hi Roadid. </b>";

    $scope.click = function() {
      //    console.log("button clicked");
      //  $scope.order.showPopupAddedToCart = !$scope.order.showPopupAddedToCart;
      var doc = new jsPDF();
      doc.text(20, 20, 'Hello world!');
      doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
      doc.addPage();
      doc.text(20, 20, 'Do you like that?');

      // Save the PDF
      doc.save('Test.pdf');




    };

    $scope.HTMLclick = function() {
      
      console.log("starting HTMLclick");
      var pdf = new jsPDF('p', 'pt', 'letter');

      // source can be HTML-formatted string, or a reference
      // to an actual DOM element from which the text will be scraped.

      var source = $scope.HtmlData;

      // we support special element handlers. Register them with jQuery-style 
      // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
      // There is no support for any other type of selectors 
      // (class, of compound) at this time.

      var specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function(element, renderer) {
          // true = "handled elsewhere, bypass text extraction"
          return true;
        }
      };

      var margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
      };

      console.log("Building  HTML" + source);
      // all coords and widths are in jsPDF instance's declared units
      // 'inches' in this case
      pdf.fromHTML(
        source // HTML string or DOM elem ref.
        , margins.left // x coord
        , margins.top // y coord
        , {
          'width': margins.width // max width of content on PDF
          ,
          'elementHandlers': specialElementHandlers
        },
        function(dispose) {
          // dispose: object with X, Y of the last line add to the PDF 
          //          this allow the insertion of new lines after html
          
          //Didn't work
          //   console.log("Saving HTMLclick");
         // pdf.save('Test.pdf');
        },
        margins
      );
      
        console.log("after from HTML.");
           pdf.save('Test.pdf');
      
    };


     

});

<!DOCTYPE html>
<html ng-app="angularjs-starter">

<head lang="en">
  <meta charset="utf-8">
  <title>Custom Plunker</title>

  <!-- Jquery -->
  <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

  <!-- Bootstrap -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">

  <!-- Angular -->
  <!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>-->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>

  <!-- UI- bootstrap -->
  <!-- <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>-->
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>


  <script src="http://parall.ax/parallax/js/jspdf.js?1391533408"></script>

  <link rel="stylesheet" href="style.css">
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <br />
  <br />
  <br />
  <br />
  
  
  

  

  <p>
    <div class="btn btn-primary" ng-click="click()">Create PDF File</div>
  </p>

  <p>
    <div class="btn btn-primary" ng-click="HTMLclick()">Create PDF File from Text box</div>
  </p>

  <textarea ng-model="HtmlData "></textarea>

<div ng-bind-html="HtmlData | UnsafeHtml">
   ...
  
</div>

  <br />


</body>

</html>


/* From: http://css-tricks.com/css-transparency-settings-for-all-broswers/ */
input[type='checkbox'].greyed {
  /* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
/* REMOVED:	width: 100%; */
		
	/* Theoretically for IE 8 & 9 (more valid) */	
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=30);
	
	/* Older than Firefox 0.9 */
	-moz-opacity:0.3;
	
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.3;
    
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.3;
}