前端集成Lodop实现复杂业务单据打印技能实践

写过一篇  论坛元老 | 2025-2-23 05:32:16 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1774|帖子 1774|积分 5322

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
一、技能选型与预备工作

1.1 打印技能方案对比

方案优点缺点实用场景浏览器打印无需插件、跨平台格式控制差、无法精准分页简单报表打印Lodop精准控制、功能强大需要安装插件复杂业务单据打印PDF打印格式统一、跨平台依靠阅读器、动态内容受限标准化文档输出原生驱动打印直接控制打印机开辟复杂度高特种装备对接 1.2 情况搭建步骤

  1. <!-- 引入Lodop基础依赖 -->
  2. <script src="http://localhost:8000/CLodopfuncs.js"></script>
  3. <script src="http://localhost:8000/LodopFuncs.js"></script>
  4. <!-- 兼容性检测 -->
  5. <script>
  6. function checkLodop() {
  7.   try {   
  8.   const LODOP = getCLodop();   
  9.   if (!LODOP) {     
  10.    console.error("未检测到CLodop服务，请先安装打印插件");     
  11.     window.open('http://www.lodop.net/download.html');      
  12.     return false;
  13.      }   
  14.     return true;  
  15.     } catch (e) {   
  16.     console.error("Lodop初始化异常:", e);
  17.         return false;
  18.          }}
  19. </script>
复制代码
二、核心打印功能实现

2.1 连续打印实现（批量订单）

  1. function printContinuousOrders(orders) {  const LODOP = getCLodop();    LODOP.PRINT_INIT("批量订单打印");  LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', 'A4');    orders.forEach((order, index) => {    LODOP.ADD_PRINT_HTM( "10mm",       "10mm", "190mm", "277mm",   generateOrderHtml(order)   
  2. );        
  3. if (index < orders.length - 1) {      LODOP.NewPage();   
  4. }
  5. });   
  6. LODOP.PREVIEW();
  7. }
  8. // 动态生成订单HTML模板
  9. function generateOrderHtml(order) {  return
  10. `<div class="order-box">   
  11.    <h2>订单编号：${order.no}</h2>      <table border="1">        <tr>          <th>商品名称</th>          <th>规格</th>          <th>数量</th>          <th>单价</th>        </tr>
  12. ${order.items.map(item => `          <tr>
  13. <td>${item.name}</td>            <td>${item.spec}</td>            <td>${item.quantity}</td>            <td>${item.price.toFixed(2)}</td>          </tr>`).join('')}      
  14. </table>
  15. <div class="total">总金额：¥${order.total.toFixed(2)}</div>    </div>  `;
  16. }
复制代码
2.2 智能分页打印（主动分页处理）

  1. function smartPagePrint(htmlContent) {  const LODOP = getCLodop();  
  2. const PAGE_HEIGHT = 277;
  3. // A4可打印高度(mm)   
  4. LODOP.PRINT_INIT("智能分页打印");  LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', 'A4');   
  5. let currentY = 10;  
  6. let pageIndex = 1;    LODOP.ADD_PRINT_HTM(`${currentY}mm`, "10mm", "190mm", "277mm",htmlContent  );    // 自动分页检测  
  7. while(true) {   
  8. const contentHeight = LODOP.GET_PRINT_HEIGHT(pageIndex);        if (contentHeight <= PAGE_HEIGHT)
  9. break;        LODOP.SET_PRINT_MODE("CONTENT_SPLIT", pageIndex, 1);   
  10. pageIndex++;
  11. }   
  12. LODOP.SET_PRINT_MODE("FULL_PAGE", true);  LODOP.PREVIEW();
  13. }
复制代码
2.3 标签打印实现（100x150mm标签）

  1. function printLabels(labels) {  
  2. const LODOP = getCLodop();  
  3. const LABEL_WIDTH = 100;  
  4. const LABEL_HEIGHT = 150;   
  5. LODOP.PRINT_INIT("标签打印");  LODOP.SET_PRINT_PAGESIZE(3, `${LABEL_WIDTH}mm`, `${LABEL_HEIGHT}mm`, '自定义标签');   
  6. // 设置标签模板  
  7. LODOP.ADD_PRINT_RECT("1mm", "1mm", "98mm", "148mm", 0, 1);    labels.forEach((label, index) => {    const row = Math.floor(index / 3);    const col = index % 3;        LODOP.ADD_PRINT_TEXT(      "10mm",       `${10 + col*(LABEL_WIDTH+5)}mm`,      "90mm", "20mm",label.title);        LODOP.ADD_PRINT_BARCODE("30mm",      `${10 + col*(LABEL_WIDTH+5)}mm`,      "90mm","40mm","128Auto",   label.barcode);        
  8. if ((index + 1) % 6 === 0) {      LODOP.NewPage();   
  9. }
  10. });    LODOP.SET_PRINT_MODE("POS_BASEON_PAPER", true);
  11. LODOP.PREVIEW();
  12. }
复制代码
三、高级功能实现

3.1 打印任务队列管理

  1. class PrintQueue {  
  2. constructor() {   
  3. this.queue = [];   
  4. this.isPrinting = false;  
  5. }  
  6. addTask(taskFn) {    this.queue.push(taskFn);   
  7. if (!this.isPrinting) this.processNext();  
  8. }  
  9. processNext() {   
  10. if (this.queue.length === 0) {
  11. this.isPrinting = false;     
  12. return;   
  13. }   
  14. this.isPrinting = true;   
  15. const task = this.queue.shift();        try {      
  16. task(() => {        
  17. setTimeout(() => this.processNext(), 500);      
  18. });   
  19. } catch (e) {      
  20. console.error('打印任务失败:', e);      this.processNext();   
  21. }
  22. }}
  23. // 使用示例
  24. const queue = new PrintQueue();
  25. queue.addTask((done) => {  printContinuousOrders(orderList);  LODOP.On_Return = (taskID, value) => {    if(value) done();
  26. };
  27. });
复制代码
3.2 打印模板动态天生

  1. function createDynamicTemplate(data, templateConfig) {
  2. const { fields, layout, styles } = templateConfig;   
  3.   return ` <style> .template-container {        width: ${layout.width}mm;height: ${layout.height}mm;        font-family: ${styles.fontFamily};        padding: ${layout.padding}mm;      }      ${styles.customCSS}    </style>    <div class="template-container">      ${fields.map(field => `        <div class="field ${field.className}"              style="position: absolute;                    left: ${field.x}mm;                    top: ${field.y}mm;                    width: ${field.width}mm;                    height: ${field.height}mm;">          ${data[field.key]}        </div>      `).join('')}    </div>  `;}
  4. // 配置示例
  5. const config = {  
  6. layout: {   
  7. width: 210,   
  8. height: 297,   
  9. padding: 5
  10. },  
  11. fields: [   
  12. {      
  13. key: 'orderNo',      
  14. x: 10,      
  15. y: 15,      
  16. width: 50,      
  17. height: 10,      
  18. className: 'order-number'   
  19. },   
  20. // 更多字段配置...  
  21. ],  
  22. styles: {   
  23. fontFamily: 'SimSun',   
  24. customCSS: `      .order-number {        font-size: 14pt;        font-weight: bold;      }    `  
  25. }};
复制代码
四、常见题目解决方案

4.1 打印偏移校准

  1. function calibratePrinter() {  
  2. const LODOP = getCLodop();   
  3. // 生成校准模板  
  4. LODOP.PRINT_INIT("打印机校准");  LODOP.ADD_PRINT_LINE("0mm", "0mm", "0mm", "210mm", 0, 1);  LODOP.ADD_PRINT_LINE("0mm", "0mm", "297mm", "0mm", 0, 1);  LODOP.ADD_PRINT_TEXT("145mm", "95mm", "20mm", "10mm", "中线校准标记");   
  5. // 保存偏移量  
  6. LODOP.SET_PRINT_MODE("OFFSET_PERCENT", (dx, dy) => {    localStorage.setItem('PRINT_OFFSET_X', dx);    localStorage.setItem('PRINT_OFFSET_Y', dy);  });    LODOP.PREVIEW();}
  7. // 应用校准参数
  8. function applyCalibration() {  
  9. const dx = localStorage.getItem('PRINT_OFFSET_X') || 0;
  10. const dy = localStorage.getItem('PRINT_OFFSET_Y') || 0;    LODOP.SET_PRINT_MODE("POS_BASEON_PAPER", true);  LODOP.SET_PRINT_MODE("OFFSET_PERCENT", dx, dy);}
复制代码
4.2 打印异常处理

  1. function safePrint(printFn) {  
  2. try {   
  3. if (!checkLodop())
  4. return;      
  5. printFn();        
  6. LODOP.On_Return = (taskID, success) => {      
  7. if (!success) {
  8. console.error(`打印任务失败，错误码：
  9.      ${LODOP.GetStatus()}`);             showErrorMessage(LODOP.GetStatusDes());
  10.   }   
  11. };
  12. } catch (e) {   
  13.     console.error("打印过程发生异常:", e);
  14.      showErrorMessage("打印系统异常，请联系管理员");  }}
  15. function showErrorMessage(msg) {  
  16. const errorBox = document.createElement('div');  errorBox.className = 'print-error';  errorBox.innerHTML = `<div class="error-header">打印错误</div>    <div class="error-content">${msg}</div>    <button onclick="this.parentElement.remove()">关闭</button>  `;  document.body.appendChild(errorBox);
  17. }
复制代码
五、性能优化实践

5.1 打印缓存计谋

  1. const templateCache = new Map();
  2. function getCachedTemplate(templateKey, generator) {  
  3. if (templateCache.has(templateKey)) {
  4.    return
  5.       templateCache.get(templateKey);  
  6.    }   
  7. const html = generator();  
  8. const parser = new DOMParser();  
  9. const doc = parser.parseFromString(html, 'text/html');    templateCache.set(templateKey, doc);  return doc;}
  10. // 使用示例
  11. function printOrder(order) {  
  12. const cachedDoc = getCachedTemplate('order', () =>     generateOrderHtml(defaultOrder));    const clone = cachedDoc.cloneNode(true);  // 填充动态数据...  
  13. const html = clone.documentElement.outerHTML;    LODOP.ADD_PRINT_HTM("10mm", "10mm", "190mm", "277mm", html);}
复制代码
5.2 批量数据分块打印

  1. async function chunkedPrint(data, chunkSize = 50) {  
  2. for (let i = 0; i < data.length; i += chunkSize) {   
  3. const chunk = data.slice(i, i + chunkSize);      
  4. await new Promise(resolve => {  
  5.          printContinuousOrders(chunk);
  6.          LODOP.On_Return = (taskID, success) => {        
  7.          if (success) resolve();      
  8.          };   
  9.          });        
  10.          // 防止内存泄漏
  11.          LODOP.CLEAR_PRINT_STYLE();
  12.               if (i + chunkSize < data.length) {     
  13.                LODOP.NewPageA();   
  14.                }  
  15. }}
复制代码
六、总结与扩展

本文详细讲解了基于Lodop的复杂打印场景实现方案，涵盖以下关键技能点：

  • 多类型打印控制：通过精确的坐标盘算实现标签打印、智能分页等复杂需求
  • 打印任务管理：引入队列机制确保打印任务有序实行
  • 动态模板系统：实现设置化模板天生，提升系统机动性
  • 稳固性增强：完满的异常处理机制和校准方案扩展方向建议：- 结合WebSocket实现远程打印监控- 集成电子署名实现单据防伪- 开辟可视化的模板设计器- 对接称重装备实现主动打标通过以上技能方案，企业可以构建稳固可靠的打印服务系统，满足各类业务场景的打印需求，同时为后续的物联网集成打下结实基础

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

写过一篇

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

渠道 国产数据库 集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表