angular打印功能实现方式
<p>目前主流的前端打印方式有两种：一种是使用浏览器打印功能直接打印页面，另一种是调用本地控件实现。浏览器打印功能单一，不适用于复杂的业务表单，而打印控件可以设计打印模板，实现复杂表单的打印，十分适合复杂的业务系统。</p><p>下面为大家介绍angular中的这两种打印。</p>
<p>1、浏览器打印：</p>
<p>这种方式在angular中十分简单，获取html元素，弹出打印窗口，打印完成关闭窗口，三步完成。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">browserPrint(){
const printContent </span>= document.getElementById("report"<span style="color: rgba(0, 0, 0, 1)">);
const WindowPrt </span>= window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0'<span style="color: rgba(0, 0, 0, 1)">);
WindowPrt.document.write(printContent.innerHTML);
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
WindowPrt.close();
}</span></pre>
</div>
<p>2、插件打印：</p>
<p>web打印插件有很多种，可以根据需求选择合适打印控件。这里给大家推荐的是lodop控件，功能强大，关键是免费。</p>
<p>首先需要将lodop的js翻译成ts并添加到项目中；</p>
<p>然后需要添加lodop打印服务，打印服务中包括打印、批量打印、设计、重置等方法，这些均通过调用本地lodop控件实现。所以服务中没有复杂的业务，只有一些判断和本地服务的调用。</p>
<p>实现套打：</p>
<p>获取当前业务的所有打印模板列表，选择模板并打印</p>
<p><img src="https://img2018.cnblogs.com/blog/1509072/201906/1509072-20190627171024182-339594691.png" alt=""></p>
<div class="cnblogs_code">
<pre>templatePrint(input: string): <span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>._Service.print(input).subscribe(result =><span style="color: rgba(0, 0, 0, 1)"> {</span>
<span style="color: rgba(0, 0, 255, 1)">this</span>.lodopService.attachCode(result, <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.data);
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.lodop!<span style="color: rgba(0, 0, 0, 1)">.PREVIEW();
})
}</span></pre>
</div>
<p>根据选择的模板查询模板内容，然后填充打印模板进行预览打印。</p>
<p>由于业务系统中的web通用打印设计十分复杂，这里仅提供angular实现两种打印的方法思路，如果有疑问的可以提出，有空我会为大家一一解答。</p><br><br>
来源：https://www.cnblogs.com/abp-microservice/p/11098562.html
頁:
[1]