如何使用 Angular 指令自动将浏览器打印到 pdf

Question

现在我有一个 Angular 指令，它允许我以模式打印 HTML。它会打开浏览器打印屏幕，并为我提供打印位置的选项。我需要向此模式添加电子邮件 PDF 选项。我需要将其打印为 pdf 并将其附加到电子邮件中。这个过程会创建一个临时的 .pdf 吗？这将如何工作？可以使用 Angular 指令来完成吗？

我需要包含电子邮件 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

如果我理解正确，您想在客户端站点上从动态生成的 HTML 创建 PDF。 现有的 javascript 库应该可以与 Angular 一起使用：

例如http://parall.ax/products/jspdf