Как автоматизировать печать браузера в pdf с помощью Angular Directive

Question

прямо сейчас У меня есть Угловая директива, которая позволяет мне печатать HTML в модальном формате. Он открывает экран печати браузера и дает мне варианты печати. Мне нужно добавить PDF-вариант электронной почты для этого модального. Мне нужно распечатать это в pdf и прикрепить его к электронному письму. Будет ли этот процесс создавать временный .pdf? Как это будет работать? Можно ли это сделать с помощью Угловой Директивы?

мои модальный, где я должен включать в себя кнопку Email Pdf

<div class="modal-body"> 
       <div class="container" id="jobSetupPrintPdf"> 
        <form ng-submit="submitJob()" enctype="multipart/form-data"> 
         <div class="col-xs-12"> 
          <h3 style="margin-left:150px">Texas Exterior Systems</h3> 
          <p style="margin-left:225px">Job Setup Sheet</p> 
         </div><!--End col-xs-12--> 
         <div class="col-xs-6" style="margin-top:30px"> 
          <div class="inline-fields"> 
           <label style="margin-left:78px">Date:&nbsp;</label> 
           <span style="width:150px">{{currentItem.ContractDate | date : date : shortDate}}</span> 
          </div> 
          <div class="inline-fields"> 
           <label style="margin-left:55px">Number:&nbsp;</label> 
           <span style="width: 150px" class="underline_text">{{currentItem.JobNumber}}</span> 
          </div> 
          <div class="inline-fields"> 
           <label style="margin-left:41px">Job&nbsp;Name:&nbsp;</label> 
           <span style="width: 150px" class="underline_text">{{currentItem.JobName}}</span> 
          </div> 
          <div class="inline-fields"> 
           <label style="margin-left:43px">Customer:&nbsp;</label> 
           <span style="width:200px">{{currentItem.CustomerName}}</span><br /> 
           <span style="margin-left:120px">{{currentItem.CustomerAddress}}</span><br /> 
           <span style="margin-left: 120px" class="underline_text">{{currentItem.CustomerCity}} {{currentItem.CustomerState}} {{currentItem.CustomerZipcode}}</span> 
          </div> 
          <div class="inline-fields"> 
           <label style="margin-left:0px">Project&nbsp;Manager:&nbsp;</label> 
           <span style="width: 150px" class="underline_text">{{currentItem.TESPM}}</span> 
          </div> 
         </div><!--End col-xs-6--> 
         <div class="col-xs-6" style="margin-top:30px"> 
          <div class="inline-fields"> 
           <label style="margin-left:0px">Original&nbsp;Contract:&nbsp;</label> 
           <span style="width: 150px" class="underline_text">$ {{currentItem.OriginalContract | number : fractionSize}}</span> 
          </div> 
          <div class="inline-fields"> 
           <label style="margin-left:0px">Original&nbsp;Estimate:&nbsp;</label> 
           <span style="width: 150px" class="underline_text">$ {{currentItem.OriginalEstimate | number : fractionSize}}</span> 
          </div> 
          <div class="inline-fields"> 
           <label style="margin-left:49px">Retainage:&nbsp;</label> 
           <span style="width: 150px" class="underline_text">$ {{currentItem.Retainage | number : fractionSize}}</span> 
          </div> 
         <div class="col-xs-12" style="margin-top:300px"> 
          <label style="margin-left:0px">Budget</label><br /> 
          <textarea ng-model="currentItem.Budget" style="width: 540px; border: 0px none; resize: none;background-color:white " rows="5"></textarea> 
         </div><!--End col-xs-12--> 
         <br /> 
         <a href="#" print="jobSetupPrintPdf"><button style="float:right;margin-right:20px;width:70px">Print</button></a> 
         <a href="#"><button style="float:right; margin-right:20px;width:70px" data-dismiss="modal">Cancel</button></a> 

        </form> 
       </div> 
      </div> 

Угловой Директиву

app.directive('print', ['$compile', function ($compile) { 
return { 
    restrict: 'AEC', 
    link: function (scope, el, attrs) { 
     if (attrs.nopopup) { 
      el.bind('click', function() { 
       window.print(); 
      }); 
     } else { 
      el.bind('click', function() { 
       var html = document.getElementById(attrs.print); 
       var links = document.getElementsByTagName('link'); 
       var stylesheets = ""; 
       for (var i = 0; i < links.length; i++) { 
        stylesheets = stylesheets + links[i].outerHTML; 
       } 
       var printarea = window.open('', '', ''); 
       printarea.document.write('<html><head><title></title>'); 
       printarea.document.write(stylesheets); 
       printarea.document.write('</head><body>'); 
       printarea.document.write(html.innerHTML); 
       printarea.document.write('</body></html>'); 
       setTimeout(function() { 
        printarea.print(); 
        printarea.close(); 
       }, 100); 
      }); 
     } 
    } 
}; 
}]); 

Answer 1

Если я правильно Вас понял, вы хотите создать на сайте клиента в формат PDF из динамическога генерируется HTML , Существуют существующие библиотеки javascript, которые должны работать с Угловым:

например. http://parall.ax/products/jspdf