Convert HTML to PDF with AngularJs

by apexdodge

HTML

<div id="banner-message" ng-app ng-controller="HtmlToPdfController">
  <p>Replace apikey variable with your own API key from <a href="https://portal.api2pdf.com" target="_blank">portal.api2pdf.com</a>. See full documentation <a href="https://www.api2pdf.com/documentation">here</a>.</p>
  <button ng-click="printToPdf()">Print to PDF</button>
</div>
<iframe id="my_iframe" style="display:none;"></iframe>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 500px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

function HtmlToPdfController($scope, $http) {
    $scope.printToPdf = function () {
        $http.defaults.headers.common.Authorization = 'YOUR-API-KEY'; //replace with our API key from portal.api2pdf.com
        var endpoint = "https://v2018.api2pdf.com/chrome/html"
        var payload = {
            html: "<p>Hello from AngularJS</p>", //set your HTML here!
            inlinePdf: true
        }
        
        $http.post(endpoint, payload).then(
        function(response) {
            console.log(response) //your PDF is in this response. 
        }, 
        function(error) {
        
        });
    };
}