基于grid++打印插件二次封装

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i ydgridprint  -S 

CDN

函数暴露在window.ydgridprint下

<script src="http://baima.yundasys.com:30134/uploads/ydgridprint/grid.min.js"></script>

使用示例

初始化插件

import {
    initPrinter
} from 'ydgridprint'

//初始化打印机  ***************必须*****************
initPrinter({
    //socket接收消息回调
    socketCallback,
    //可选参数 用于自定义美化初始消息提示
    customTip
})

/**
 * socket接收消息回调
 * @param {Object} event 各种类型事件
 */
function socketCallback(event) {
    const obj = JSON.parse(event.data);

    //打印开始事件
    if (obj.event === "PrintBegin") {}
    //打印结束事件
    if (obj.event === "PrintEnd") {}
    //加载打印机列表
    if (obj.fun === 'Printers') {
        //obj.printers  这边根据打印机列表自行渲染
    }
}

/**
 * 若用户并未安装grid++插件或启动该插件,第一次进入页面会提示安装或者启动
 * 默认提示功能较为简洁
 * 该函数用于自定义美化初始消息提示
 * @param {Function} webapp_urlprotocol_startup  启动打印程序
 * @param {String} _grwebapp_url  打印程序下载地址
 */
function customTip(param) {
    const {
        webapp_urlprotocol_startup,
        _grwebapp_url
    } = param
    //例如这边渲染一个 UI框架的confirm插件  根据需求选择启动打印程序或者 下载
}

打印

import {
    webapp_ws_ajax_run
} from 'ydgridprint'

//与模板匹配的自定义数据字段
const testdata = [{
    "time": new Date(), //打印时间
    "position": '123', //一段码
    "position_no": '123 321', //二段码  三段码
    "tp_status": '412', //四段码
    "package_wdjc": '测试集包地', //集包地
    "mailno": '1234563216541', //运单号
    "sender_name": '张*', //发件人姓名
    "sender_mobile": '138****1922', //发件手机
    "sender_phone": '138****1922', //发件电话
    "sender_address": '上海市上海测试发件地址', //发件地址
    "receiver_name": '李*', //收件人姓名
    "receiver_mobile": '150****1922', //收件手机
    "receiver_phone": '150****1922', //收件电话
    "receiver_address": '北京市北京测试收件地址', //收件地址
    "cus_area1": '订单号：test_001 11111', //自定义1
    "cus_area2": '', //自定义2
}];

//打印参数
const args = {
    //打印类型 'preview'(预览)(默认) || 'print'(打印)  
    type: 'print',
    //模板url  ***************必须*****************
    report: './static/白马二联单.grf',
    //是否弹出打印对话框  打印配置选择
    showOptionDlg: false,
    //指定打印机 打印机下拉列表选择或者固定  ***************必须*****************
    PrinterName: '',
    //指定哪些事件需要回传响应数据, 多个事件用“;”隔开
    responseEvents: "PrintEnd;ExportEnd;PrintBegin",
    //需要打印的数据  row 必备格式  ***************必须*****************
    data: {
        row: testdata
    }
};

/***********调用打印功能****************/

//点击打印按钮调用打印功能
document.querySelector('.print-btn').addEventListener('click', () => {
    webapp_ws_ajax_run(args);
})

预览

将 webapp_ws_ajax_run 参数 type 换成 preview 即可

API说明

webapp_ws_ajax_run 打印参数说明

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 是否必填| |:-----------:|:---------------:|:-------------:|:-----------:|:------:|:----------------:| | type | 打印类型 | String |preview/print/pdf/xls/csv/txt/rtf/img/grd/fun/ui |preview (预览)|否| | report | 模板url | String |- |- |是| | showOptionDlg | 是否弹出打印对话框 | Boolean |true/false |true |否| | PrinterName | 打印机名称(准确值有效) | String | -| -|是| | responseEvents | 指定需要接收的报表事件消息 | String |Initialize/PrintBegin/PrintEnd/ExportBegin/ExportEnd |- |否| | data | 打印数据(data: {row: testdata}) | Object |- |- |是|

initPrinter参数说明

| 参数 | 说明 | 类型 | 默认值 | 是否必填 | |:-----------:|:-------:|:--------:|:-----------:|:-------:| | socketCallback | 消息回调 | Function |- |否 | | customTip | 自定义弹框提示 | Function |- |否 |

更多参考 Grid++ Report6帮助文档 web报表>web报表客户端 > 启动说明 + 脚本注入与事件消息接收说明