Angular8中集成lodap打印功能

第一次写文档时间： 2019-11-19

官网地址

• 官网示例： www.lodop.net/LodopDemo.h…
• 下载地址： www.lodop.net/download.ht…

集成过程

1. 本机需要安装lodap综合版

• 下载地址： www.lodop.net/download.ht…

如图:

下载安装包到本地，右键安装包，点击使用管理员安装，如图:

2. 在angular.json中引入lodap.js

如图：

3. 修改LodopFuncs.js 源码

导出 getLodop 方法，如图：

4. 在ts中导入LodopFuncs.js

如图:

5. 改写代码

html代码

<div class="fc-print">
  <div>
    <p>
      1：若只打印《表单一》,看一下<a
        href="javascript:;"
        (click)="printPreview()"
        >打印预览</a
      >,可<a href="javascript:;" (click)="directPrint()">直接打印</a>也可
      <a href="javascript:;" (click)="printerSelect()">选择打印机</a
      >打印。<br /><br />
      2：若《表单一》和《表单二》一起并列输出,看一下<a
        href="javascript:;" (click)="prn2_preview()"
        >打印预览</a
      >,其布局风格可<a href="javascript:;" (click)="prn2_manage()">打印维护</a>调整。
    </p>

    <p>
      3：若打印整个页面,看看<a href="javascript:;" (click)="prn3_preview()">打印预览</a
      >。<br /><br />
      本例要点是用Document的innerHTML方法把打印目标的超文本送给控件。
    </p>
  </div>

  <div class="fc-conetent">
    <!-- 需要打印的内容 -->
    <form id="form1">
      <table border="1">
        <tr>
          <th>Month</th>
          <th>Savings</th>
          <th>Month</th>
          <th>Savings</th>
          <th>Month</th>
          <th>Savings</th>
          <th>Month</th>
          <th>Savings</th>
          <th>Month</th>
          <th>Savings</th>
          <th>Month</th>
          <th>Savings</th>
          <th>Savings</th>
          <th>Savings</th>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
          <td>January</td>
          <td>$100</td>
        </tr>
      </table>
    </form>

    <div id="form2">
      <table
        border="1"
        width="100%"
        id="tb01"
        bgcolor="#CCFFCC"
        style="border:solid 1px black;border-collapse:collapse"
      >
        <tr>
          <td width="133" id="mtb001">
            <font face="黑体" color="#FF0000" size="3">《表单二》&copy;</font>
          </td>
        </tr>
      </table>

      <table
        border="1"
        width="100%"
        height="106"
        cellspacing="0"
        bgcolor="#CCFFFF"
        style="border:solid 1px black;border-collapse:collapse"
      >
        <tr>
          <td width="66" height="16" style="border:solid 1px black">
            <font color="#0000FF">X</font><font color="#0000FF">等</font>
          </td>
          <td width="51" height="16" style="border:solid 1px black">
            <font color="#0000FF">Y等</font>
          </td>
          <td width="51" height="16" style="border:solid 1px black">
            <font color="#0000FF">Z等</font>
          </td>
        </tr>
        <tr>
          <td width="66" height="12" style="border:solid 1px black">
            <span style="font-family:Wingdings;font-size:25px;">&#254;</span
            >X001
          </td>
          <td width="51" height="12" style="border:solid 1px black">
            <strike>Y001</strike>
          </td>
          <td width="51" height="44" rowspan="3" style="border:solid 1px black">
            <ol style="list-style-type:upper-alpha;list-style-position:inside;">
              <li>Z001</li>
              <li>Z002</li>
              <li>Z003</li>
              <li>Z004</li>
              <li>Z005</li>
            </ol>
          </td>
        </tr>
        <tr>
          <td width="30%" height="16" style="border:solid 1px black">
            <strong>X002</strong>
          </td>
          <td width="51" height="16" style="border:solid 1px black">
            <u>Y002</u><span style="visibility: hidden">hidesome</span>
          </td>
        </tr>
        <tr>
          <td width="30%" height="16" style="border:solid 1px black">
            <span style="text-decoration: overline">X003</span>
          </td>
          <td width="40%" height="16" style="border:solid 1px black">
            <em>Y003</em><input type="radio" name="R1" /><input
              type="radio"
              name="R1"
              checked
            />
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

ts代码

import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { getLodop } from '../../../../assets/plugin/lodop/LodopFuncs.js';
@Component({
  // tslint:disable-next-line:component-selector
  selector: 'fc-print',
  templateUrl: './fcprint.component.html',
  styles: [``]
})
export class FcprintComponent {
  LODOP: any;
  constructor(public router: Router, public activedRoute: ActivatedRoute) {}
  CreateOneFormPage() {
    this.LODOP = getLodop();
    this.LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_表单一');
    this.LODOP.SET_PRINT_STYLE('FontSize',18);
    this.LODOP.SET_PRINT_STYLE('Bold',1);
    this.LODOP.ADD_PRINT_TEXT(50,231,260,39, '打印页面部分内容');
    this.LODOP.ADD_PRINT_HTM(88,200,350,600, document.getElementById('form1').innerHTML);
  }
  /**
   * 打印预览
   */
  printPreview() {
    this.CreateOneFormPage();
    this.LODOP.PREVIEW();
  }
  /**
   * 直接打印
   */
  directPrint() {
    this.CreateOneFormPage();
    this.LODOP.PRINT();
  }
  /**
   * 选择打印机
   */
  printerSelect() {
    this.CreateOneFormPage();
    this.LODOP.PRINTA();
  }
  CreateTwoFormPage() {
    this.LODOP=getLodop();
    this.LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_表单二');
    this.LODOP.ADD_PRINT_RECT(70,27,634,242,0,1);
    this.LODOP.ADD_PRINT_TEXT(29,236,279,38,'页面内容改变布局打印');
    this.LODOP.SET_PRINT_STYLEA(2,'FontSize',18);
    this.LODOP.SET_PRINT_STYLEA(2,'Bold',1);
    this.LODOP.ADD_PRINT_HTM(88,40,321,185,document.getElementById('form1').innerHTML);
    this.LODOP.ADD_PRINT_HTM(87,355,285,187,document.getElementById('form2').innerHTML);
    this.LODOP.ADD_PRINT_TEXT(319,58,500,30,'注：其中《表单一》按显示大小，《表单二》在程序控制宽度(285px)内自适应调整');
  }
  /**
   * 《表单一》和《表单二》一起并列输出
   */
  prn2_preview() {
    this.CreateTwoFormPage();
    this.LODOP.PREVIEW();
  }
  /**
   * 打印维护
   */
  prn2_manage() {
    this.CreateTwoFormPage();
    this.LODOP.PRINT_SETUP();
  }
  /**
   * 打印整个页面 打印预览
   */
  prn3_preview() {
    this.LODOP=getLodop();
    this.LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_全页');
    this.LODOP.ADD_PRINT_HTM(0,0,'100%','100%',document.documentElement.innerHTML);
    this.LODOP.PREVIEW();
  }
}

6. 可能会遇到的问题

（1）不能解析HTML不能识别的标签

在module.ts中加入 schemas: [NO_ERRORS_SCHEMA] 如图：

7. 更多的详细文档请下载《技术手册》查看

• 下载地址：www.lodop.net/download.ht…

如图:

效果预览

图1:

图2:

图3:

图4:

图5:

结语

感谢大家的阅读, 文章中如果有不对的地方或者建议, 麻烦指出来, 我及时改正。