基于MVC+EasyUI的Web开发框架使用C-Lodop打印控件打印页面或套打报关运单信息

1. 简介

C-Lodop是一款免费的打印控件，可以实现Web页面的高级打印功能和套打功能。在MVC+EasyUI的Web开发框架中使用C-Lodop可以实现打印发票、报告、运单和标签等功能，是Web开发常用的技术之一。

2. 安装C-Lodop

首先需要到官网（http://www.lodop.net/）下载C-Lodop的安装包，并按照页面提示安装。安装完成后需要打开浏览器，访问http://localhost:8000/install.html，确保C-Lodop已经正确安装，并且可以在浏览器中正常启动。

3. 配置EasyUI页面加载C-Lodop

为了保证页面中能够正确使用C-Lodop，需要在EasyUI的页面中配置加载C-Lodop。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>EasyUI+CLodop</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="CLodopfuncs.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

以上代码中，需要引入EasyUI相关的CSS和JS文件，以及C-Lodop的配置文件CLodopfuncs.js。

4. 打印页面

使用C-Lodop实现打印页面的功能，需要按照以下步骤进行配置：

在页面中定义打印对象

定义以下代码：

<script type="text/javascript">
    var LODOP;
    LODOP=getCLodop();
</script>

打印按钮

在页面中定义打印按钮，如下代码：

<a href="javascript:printContent()">打印</a>

实现打印页面功能

function printContent() {
  LODOP=getCLodop();
  var strHtml=document.getElementById("printContent").innerHTML;
  LODOP.PRINT_INIT("");
  LODOP.ADD_PRINT_HTML(0, 0, "100%", "100%", strHtml);
  LODOP.SET_PRINT_MODE("POS_BASEON_PAPER", true);
  LODOP.PRINT();
}

以上代码中，首先获取C-Lodop的打印对象LODOP，然后获取需要打印的页面内容，将内容添加到打印队列中，并通过打印模式设置打印内容的位置。

5. 套打报关运单信息

套打报关运单信息需要将运单数据与运单模板进行关联输出。

获取运单模板

运单模板需要在C-Lodop中进行设计生成。

定义打印对象

同样需要在页面中定义LODOP打印对象。

<script type="text/javascript">
  var LODOP; //声明C-Lodop对象
</script>

获取运单数据

需要获取运单数据，并将运单数据放入运单模板中，生成最终的打印内容。

function getPrintContent() {
  var orderData = getOrderData(); //获取运单数据
  var printContent = generatePrintContent(orderData); //将运单数据与运单模板合并，生成打印内容
  return printContent;
}

生成运单内容的函数可以根据具体需求自行编写。

实现套打功能

function printOrder() {
  LODOP=getCLodop();
  var printContent = getPrintContent(); //获取运单内容
  LODOP.PRINT_INIT("打印报关运单"); //设置打印任务的标题
  LODOP.SET_PRINTER_INDEX(-1);
  LODOP.SET_PRINT_PAGESIZE(0,574,840,"CreateCustomPage"); //设置打印页面大小
  LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", printContent); //将打印内容添加到队列
  LODOP.SET_PRINT_MODE("POS_BASEON_PAPER", true); //设置打印模式
  LODOP.PREVIEW(); //打印预览
}

以上代码中，首先获取C-Lodop的打印对象LODOP，获取运单内容，将运单内容添加到打印队列中，并通过打印模式设置打印内容的位置。最后通过LODOP.PREVIEW()进行打印预览。

6. 示例

下面给出两个示例：

打印页面

页面中有一个div，需要将该div中的内容打印出来。

HTML代码：

<div id="printContent">
  这里是需要打印的内容
</div>
<a href="javascript:printContent()">打印</a>

JavaScript代码：

<script type="text/javascript">
  var LODOP;
  LODOP=getCLodop(); //获取C-Lodop打印对象

  function printContent() {
    LODOP=getCLodop();
    var strHtml=document.getElementById("printContent").innerHTML;
    LODOP.PRINT_INIT("");
    LODOP.ADD_PRINT_HTML(0, 0, "100%", "100%", strHtml);
    LODOP.SET_PRINT_MODE("POS_BASEON_PAPER", true);
    LODOP.PRINT();
  }
</script>

套打报关运单信息

需要根据运单数据生成报关运单，并打印出来。

HTML代码：

<a href="javascript:printOrder()">打印报关运单</a>

JavaScript代码：

<script type="text/javascript">
  var LODOP;

  function getPrintContent() {
    var orderData = getOrderData(); //获取运单数据
    var printContent = generatePrintContent(orderData); //将运单数据与运单模板合并，生成打印内容
    return printContent;
  }

  function printOrder() {
    LODOP=getCLodop(); //获取C-Lodop打印对象
    var printContent = getPrintContent(); //获取运单内容
    LODOP.PRINT_INIT("打印报关运单"); //设置打印任务的标题
    LODOP.SET_PRINTER_INDEX(-1);
    LODOP.SET_PRINT_PAGESIZE(0,574,840,"CreateCustomPage"); //设置打印页面大小
    LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", printContent); //将打印内容添加到队列
    LODOP.SET_PRINT_MODE("POS_BASEON_PAPER", true); //设置打印模式
    LODOP.PREVIEW(); //打印预览
  }
</script>

以上示例代码仅供参考，实际使用时需要根据具体需求进行调整和修改。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息 - Python技术站

基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息