活字格打印页面方案(Hiprint + JS)

概述

介绍活字格中使用 Hiprint 实现自定义打印的方案。Hiprint 是一个开源的 Web 打印设计器,支持自定义模板和丰富的打印配置。

方案一:Hiprint 打印设计器

在线设计器地址:hiprint.io

可以在线设计打印模板,然后通过 JS 进行数据填充和打印。

活字格 JS 调用代码

// 获取页面数据
var page = Forguncy.Page;
var printData = {
    shd: page.getCell("送货单").getValue(),
    kh: page.getCell("客户").getValue(),
    rq: page.getCell("日期").getValue(),
    ch: page.getCell("车号").getValue(),
    dz: page.getCell("地址").getValue(),
    zxg: page.getCell("装箱工").getValue(),
    jsy: page.getCell("驾驶员").getValue(),
    cky: page.getCell("仓管员").getValue(),
    ywy: page.getCell("业务员").getValue(),
    qsr: page.getCell("签收人").getValue(),
    po: page.getCell("PO号").getValue(),
    hth: page.getCell("合同号").getValue(),
    table: []
};

// 获取表格数据
var listview = page.getListView("表格1");
var count = listview.getRowCount();
for (var i = 0; i < count; i++) {
    printData.table.push({
        ht: listview.getValue(i, 0),   // 合同
        hp: listview.getValue(i, 1),   // 货品编号
        gg: listview.getValue(i, 2),   // 规格
        sl: listview.getValue(i, 3),   // 数量
        // ... 按需添加更多字段
    });
}

使用流程

  1. 在 Hiprint 设计器中设计打印模板,保存为 JSON
  2. 在活字格页面中通过 JS 获取表单和表格数据
  3. 将数据和模板传入 Hiprint,调用打印预览或直接打印

方案二:浏览器原生打印

如果需求简单,可以直接使用浏览器的 window.print() 配合 CSS @media print 实现:

/* 打印样式 */
@media print {
    .no-print { display: none !important; }
    body { font-size: 12pt; }
}

// JS 触发打印
function doPrint() {
    window.print();
}

两种方案对比

方案优点缺点
Hiprint模板可设计、支持套打、灵活需引入额外库、学习成本
浏览器打印零依赖、简单样式控制有限、分页难处理

标签: