现在我有一个Angular Directive,它允许我以模态打印HTML。它打开了浏览器打印屏幕,并为我提供了打印位置的选项。我需要为此模式添加电子邮件PDF选项。我需要将其打印到pdf并将其附加到电子邮件中。这个过程会创建一个临时的.pdf吗?这怎么样?可以通过Angular Directive完成吗?
我的模式,我需要包含电子邮件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: </label>
<span style="width:150px">{{currentItem.ContractDate | date : date : shortDate}}</span>
</div>
<div class="inline-fields">
<label style="margin-left:55px">Number: </label>
<span style="width: 150px" class="underline_text">{{currentItem.JobNumber}}</span>
</div>
<div class="inline-fields">
<label style="margin-left:41px">Job Name: </label>
<span style="width: 150px" class="underline_text">{{currentItem.JobName}}</span>
</div>
<div class="inline-fields">
<label style="margin-left:43px">Customer: </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 Manager: </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 Contract: </label>
<span style="width: 150px" class="underline_text">$ {{currentItem.OriginalContract | number : fractionSize}}</span>
</div>
<div class="inline-fields">
<label style="margin-left:0px">Original Estimate: </label>
<span style="width: 150px" class="underline_text">$ {{currentItem.OriginalEstimate | number : fractionSize}}</span>
</div>
<div class="inline-fields">
<label style="margin-left:49px">Retainage: </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>
Angular Directive
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);
});
}
}
};
}]);
答案 0 :(得分:0)
如果我理解正确,您希望在客户端站点上创建动态生成的HTML的PDF。 现有的javascript库可以与Angular一起使用: