templateData为所有数据，json为jsoncontent
<div class="flex-5 center">
<!-- 设计器的容器 -->
<div id="hiprint-printTemplate" :key="shouldUpdate"></div>
</div>
<div class="flex-2 right">
<!-- 元素参数的容器 -->
<div id="PrintElementOptionSetting"></div>
</div>
init(json,templateData){
hiprint.init({
providers: [defaultElementTypeProvider()],
});
if(this.jsonContent||json){
this.templateData=templateData
this.templateJson = this.jsonContent?JSON.parse(this.jsonContent):JSON.parse(json);
}
this.buildLeftElement();
this.buildDesigner();
},
showTemplateData(){
hiprint.init({
providers: [defaultElementTypeProvider()],
});
this.buildLeftElement();
this.buildDesigner();
},
// 获取模板JSON数据
fetchTemplateJson(id) {},
// 构建左侧可拖拽元素
buildLeftElement() {
hiprint.PrintElementTypeManager.build($("#provider-container1"), "providerModule1");
hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
},
// 构建设计器
buildDesigner() {
$("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
(this.hiprintTemplate = new hiprint.PrintTemplate({
template:this.templateJson,
settingContainer: "#PrintElementOptionSetting", // 元素参数容器
}));
// 构建并填充到容器中
this.hiprintTemplate.design("#hiprint-printTemplate");
},
// 浏览器打印
print() {
// 打印数据，key 对应 元素的 字段名
let printData = this.dataList;
// 参数: 打印时设置 左偏移量，上偏移量
let options = { leftOffset: 5, topOffset: -1 };
// 扩展
let ext = {
callback: () => {
console.log("浏览器打印窗口已打开");
},
styleHandler: () => {
// 重写 文本 打印样式
return "<style>.hiprint-printElement-text{color:red !important;}</style>";
},
};
// 调用浏览器打印
this.hiprintTemplate.print(printData, options,ext);
console.log('模板数据1',printData)
this.$nextTick(()=>{
// 创建打印日志模板
let jsonData = this.hiprintTemplate.getJson();
console.log(jsonData,'创建打印日志模板数据')
let data={
"printTemplateId": this.templateData.id,
"jsonContent": JSON.stringify(jsonData),
"printData":JSON.stringify(printData),
"title": this.templateData.title,
"source": this.templateData.source,
"type": this.templateData.type,
}
createTemplateLog(data).then(response => {
console.log('创建打印成功')
})
})
},
// 直接打印: 借助客户端,静默打印(无弹窗直接打印)
print2() {
if (hiprint.hiwebSocket.opened) {
this.hiprintTemplate.print2({});
} else {
alert("请先连接客户端(刷新网页), 然后再点击「直接打印」");
}
},
// json打印
exportJson() {
let json = this.hiprintTemplate.getJson();
},
