0.0.8 • Published 4 years ago
ydgridprint v0.0.8
基于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报表客户端 > 启动说明 + 脚本注入与事件消息接收说明