vue-plugin-hiprint 打印模版使用

下面是使用效果图，主要用于一些文档资料的模版生成
vue-plugin-hiprint 文档及 Demo

插件安装

npm install vue-plugin-hiprint

npm install jquery --save

在项目的index.html里加入样式

<!-- 打印模版 -->
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">

在Index.html同层的public下放print-lock.css文件，可以在演示项目里找样式文件，也可以复制本文下面的print-lock.css

使用页面，我是用jquery获取的元素，也可以直接用js直接获取
providers.js和printData.js的代码在最下面
providers.js和printData.js的代码在最下面

import { computed, onMounted, ref } from 'vue';
import { hiprint, hiPrintPlugin } from 'vue-plugin-hiprint';
import printData from './print-data'//元素对应的数据，根据实际需求变化
import providers from './providers'//拖拽元素
import $ from 'jquery';
let hiprintTemplate;
let templateModel = ref();// 模版对象
const init = () => {// 初始化可拖拽的元素，可参考vue-plugin-hiprint 文档及 Demo里的代码const provider = providers[0];//切换这个就能切换拖拽元素hiprint.init({providers: [provider.f],});const modeldata = templateJson || {};//回显已保存的模版jsonhiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端$('.ep-draggable-item').empty(); // 清空配置hiprint.PrintElementTypeManager.build('.ep-draggable-item', provider.value);$('#hiprint-printTemplate').empty(); // 清空内容templateModel.value = hiprintTemplate = new hiprint.PrintTemplate({template: modeldata, // 回显模板jsonsettingContainer: '#PrintElementOptionSetting', // 元素参数容器paginationContainer: '.hiprint-printPagination', // 多面板的容器， 实现多面板， 需要在添加一个 <div class="hiprint-printPagination"/>// ------- 下列是可选功能 -------// 图片选择功能onImageChooseClick: (target) => {// 将选取的图片直接转成base64// let input = document.createElement("input");//  input.setAttribute("type", "file");// input.click();//  input.onchange = function () {//    var file = this.files[0];//    var reader = new FileReader();//    if (file) {//      var reader = new FileReader();//      //通过文件流行文件转换成Base64字行串//      reader.readAsDataURL(file);//      //转换成功后//      reader.onloadend = function () {//        // 通过 target.refresh 更新图片元素//        target.refresh(reader.result);//      };//    }//  };//  input.remove();// 将选取的图片通过接口转成base64替换到模版JSON里去，我这是需求导致，不需要的可以用上面的方法console.warn('图片选择', target);const input = document.createElement('input');input.setAttribute('type', 'file');input.setAttribute('accept', 'image/*'); // 仅允许选择图片文件input.click();input.addEventListener('change', function () {const file = this.files[0];if (!file) return;// 校验文件类型if (!file.type.startsWith('image/')) {console.warn('请选择图片文件（支持jpg、png、webp等格式）');return;}console.warn('图片文件', file);// 准备FormData（若服务器要求multipart/form-data）const formData = new FormData();formData.append('file', file); // 字段名'file'需与服务器保持一致fetch('图片上传路径', {method: 'POST',headers: {Authorization: `${token}`, // 替换为真实Token// 无需手动设置Content-Type，FormData会自动处理},body: formData, // 或使用file（直接二进制），根据服务器要求选择}).then((response) => {if (!response.ok) {throw new Error(`上传失败：${response.status} ${response.statusText}`,);}return response.json();}).then((data) => {console.warn('上传成功', data.data);// 转换成base64ImageBasePrintApi(data.data.fileName).then((resl) => {console.warn('返回base64', resl);if (resl.data) {target.refresh(resl.data); // 将图片base64替换}});// 假设服务器返回{ url: "xxx" }，更新图片显示// if (data.data.url) {//   target.refresh(data.data.url); // 根据实际需求调用刷新方法// }}).catch((error) => {console.error('上传失败', error);});});input.remove();},// 自定义可选字体// 或者使用 hiprintTemplate.setFontList([])// 或元素中 options.fontList: []fontList: [{ title: '微软雅黑', value: 'Microsoft YaHei' },{ title: '黑体', value: 'STHeitiSC-Light' },{ title: '思源黑体', value: 'SourceHanSansCN-Normal' },{ title: '王羲之书法体', value: '王羲之书法体' },{ title: '宋体', value: 'SimSun' },{ title: '华为楷体', value: 'STKaiti' },{ title: 'cursive', value: 'cursive' },],dataMode: 1, // 1:getJson 其他：getJsonTid 默认1history: true, // 是否需要 撤销重做功能// onDataChanged: (type, json) => {//   // 模板发生改变回调//   console.warn('删除？？？', type); // 新增、移动、删除、修改(参数调整)、大小、旋转//   console.warn(json); // 返回 template// },// onUpdateError: (e) => {//   // 更新失败回调//   console.warn('更新', e);// },});// 设计器的容器hiprintTemplate.design('#hiprint-printTemplate');hiprintTemplate.update(modeldata);
};<div class="bigbox"><!-- 设计器的 容器 --><ElCard class="box-card" style="width: 250px"><div class="ep-draggable-item"></div></ElCard><ElCard class="box-card" style="flex: 1; padding-left: 10px"><div id="hiprint-printTemplate"></div></ElCard><ElCard class="box-card" style="width: 280px"><div id="PrintElementOptionSetting"></div></ElCard>
</div>
<style lang="scss" scoped>
::v-deep .hiprint-printElement-type {padding: 0;list-style: none;
}::v-deep .hiprint-printElement-type > li > .title {clear: both;display: block;padding: 4px 0;margin-bottom: 6px;font-weight: 600;
}::v-deep .hiprint-printElement-type > li > ul {display: block;padding: 0;list-style: none;
}::v-deep .hiprint-printElement-type > li > ul > li {float: left;display: block;width: 50%;max-width: 100px;
}::v-deep .hiprint-printElement-type > li > ul > li > a {box-sizing: border-box;display: inline-block;display: flex;align-items: center;justify-content: center;width: 95%;max-width: 100px;height: 92px;padding: 12px 6px;margin-right: 5px;margin-bottom: 7px;margin-left: -1px;font-size: 16px;color: #b9a5a6;text-align: center;word-break: break-all;word-wrap: break-word;text-decoration: none;background-color: #fff;border: 1px solid rgb(0 0 0 / 20%);border-radius: 3px;box-shadow: 0 1px 0 0 rgb(0 0 0 / 15%);
}::v-deep .hiprint-option-items > .hiprint-option-item {font-size: 14px;// .hiprint-option-item-field {//   div {//     width: 30% !important;//     // padding-right: 10px;//   }//   // .auto-submit {//   //   width: 70% !important;//   // }// }
}// ::v-deep .hiprint-option-items > .hiprint-option-item-row {
//   .hiprint-option-item-field > input {
//     width: 100% !important;
//   }
// }// // 默认图片
// /deep/ .hiprint-printElement-image-content {
//   img {
//     content: url('~@/assets/logo.png');
//   }
// }
.pagetop {display: flex;justify-content: space-between;width: 100%;height: 40px;
}.pagetop-right {display: flex;flex: 1;align-items: center;height: 100%;
}.pagetop-left {display: flex;align-items: center;justify-content: center;width: 250px;height: 100%;
}.bigbox {display: flex;align-items: center;justify-content: space-between;width: 100%;height: calc(100% - 40px);
}.box-card {height: 100%;overflow-y: scroll;
}.back-btn {display: flex;gap: 4px;align-items: center;padding: 8px 12px;color: #6b7280;transition: all 0.2s;
}.back-btn:hover {color: #374151;background: #f3f4f6;
}
</style>

功能写法

 hiprintTemplate.setPaper(value.width, value.height); //设置打印模版纸张大小// 打印
const print = () => {hiprintTemplate.print(printData,//模版对应的数据，如果想同时打印多份就传数组{},{callback: () => {// waitShowPrinter.value = false;},},);
};// 获取模版JSON
const saveJson = (e) => {const json = templateModel.value.getJson();let data = JSON.stringify(json, null, 0);
};// 清空模板
const printClear = () => {console.warn('清空');hiprintTemplate.clear();
};

注意点：使用表格时，给表头添加名称需带上#加字段名，如：昵称#name 这样表格昵称列取name字段的数据
如果打印时表格没有表格线，则是样式文件没引入

providers.js代码

import { hiprint } from 'vue-plugin-hiprint';// 自定义设计元素1
export const aProvider = function () {const addElementTypes = function (context) {context.removePrintElementTypes('aProviderModule');context.addPrintElementTypes('aProviderModule', [new hiprint.PrintElementTypeGroup('平台', [{tid: 'aProviderModule.header',title: '单据表头aaaaa',data: '单据表头',type: 'text',options: {testData: '单据表头',height: 17,fontSize: 16.5,field: 'headera',fontWeight: '700',textAlign: 'center',hideTitle: true,},},{tid: 'aProviderModule.type',title: '单据类型',data: '单据类型',type: 'text',options: {testData: '单据类型',height: 16,fontSize: 15,field: 'textType',fontWeight: '700',textAlign: 'center',hideTitle: true,},},{tid: 'aProviderModule.order',title: '订单编号',data: 'XS888888888',type: 'text',options: {field: 'orderId',testData: 'XS888888888',height: 16,fontSize: 6.75,fontWeight: '700',textAlign: 'left',textContentVerticalAlign: 'middle',},},{tid: 'aProviderModule.date',title: '业务日期',data: '2020-01-01',type: 'text',options: {field: 'date',testData: '2020-01-01',height: 16,fontSize: 6.75,fontWeight: '700',textAlign: 'left',textContentVerticalAlign: 'middle',},},{tid: 'aProviderModule.barcode',title: '条形码',data: 'XS888888888',type: 'text',options: {field: 'barcode',testData: 'XS888888888',height: 32,fontSize: 12,lineHeight: 18,textType: 'barcode', // 决定类型},},{tid: 'aProviderModule.qrcode',title: '二维码',data: 'XS888888888',type: 'text',options: {field: 'qrcode',testData: 'XS888888888',height: 32,fontSize: 12,lineHeight: 18,textType: 'qrcode',},},{tid: 'aProviderModule.platform',title: '平台名称',data: '平台名称',type: 'text',options: {testData: '平台名称',height: 17,fontSize: 16.5,fontWeight: '700',textAlign: 'center',hideTitle: true,},},{tid: 'aProviderModule.logo',title: 'Logo',data: '/logo.ico',// data: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',type: 'image',options: {width: 99,right: 121.5,src: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',fit: '',},},]),new hiprint.PrintElementTypeGroup('库管', [{tid: 'aProviderModule.creater',title: '制单人',data: '李四',type: 'text',options: {field: 'creater',testData: '李四',height: 16,fontSize: 6.75,fontWeight: '700',textAlign: 'left',textContentVerticalAlign: 'middle',},},{tid: 'aProviderModule.printDate',title: '打印时间',data: '2022-01-01 09:00',type: 'text',options: {field: 'printDate',testData: '2022-01-01 09:00',height: 16,fontSize: 6.75,fontWeight: '700',textAlign: 'left',textContentVerticalAlign: 'middle',},},{tid: 'aProviderModule.signer',title: '库管签字',data: '',type: 'text',options: {title: '库管签字：',height: 16,fontSize: 6.75,fontWeight: '700',textAlign: 'left',textContentVerticalAlign: 'middle',},},]),new hiprint.PrintElementTypeGroup('表格/其他', [{tid: 'aProviderModule.table',title: '表格',type: 'table',options: {field: 'table',// 添加表格边框样式配置tableHeaderRepeat: 'first',tableFooterRepeat: 'last',tableBorder: 'border',tableHeaderStyle: 'border: 1px solid #000; background: #f5f5f5; font-weight: bold;',tableBodyStyle: 'border: 1px solid #000;',tableFooterStyle: 'border: 1px solid #000; background: #f9f9f9;',// fields: [//   { text: '名称', field: 'NAME' },//   { text: '数量', field: 'SL' },//   { text: '规格', field: 'GG' },//   { text: '条码', field: 'TM' },//   { text: '单价', field: 'DJ' },//   { text: '金额', field: 'JE' },//   { text: '备注', field: 'DETAIL' },// ],},editable: true,columnDisplayEditable: true, // 列显示是否能编辑columnDisplayIndexEditable: true, // 列顺序显示是否能编辑columnTitleEditable: true, // 列标题是否能编辑columnResizable: true, // 列宽是否能调整columnAlignEditable: true, // 列对齐是否调整isEnableEditField: true, // 编辑字段isEnableContextMenu: true, // 开启右键菜单 默认trueisEnableInsertRow: true, // 插入行isEnableDeleteRow: true, // 删除行isEnableInsertColumn: true, // 插入列isEnableDeleteColumn: true, // 删除列isEnableMergeCell: true, // 合并单元格columns: [[{title: '',align: 'center',field: '',width: 50,style: 'border: 1px solid #000; padding: 4px; text-align: center;'},{title: '',align: 'center',field: '',width: 50,style: 'border: 1px solid #000; padding: 4px; text-align: center;'},// { title: '名称', align: 'center', field: 'NAME', width: 100, style: 'border: 1px solid #000; padding: 4px;' },// { title: '数量', align: 'center', field: 'SL', width: 100, style: 'border: 1px solid #000; padding: 4px;' },// { title: '条码', align: 'center', field: 'TM', width: 100, style: 'border: 1px solid #000; padding: 4px;' },// { title: '规格', align: 'center', field: 'GG', width: 100, style: 'border: 1px solid #000; padding: 4px;' },// { title: '单价', align: 'center', field: 'DJ', width: 100, style: 'border: 1px solid #000; padding: 4px;' },// { title: '金额', align: 'center', field: 'JE', width: 100, style: 'border: 1px solid #000; padding: 4px;' },// { title: '备注', align: 'center', field: 'DETAIL', width: 100, style: 'border: 1px solid #000; padding: 4px;' },],],// footerFormatter(options, rows, data) {//   if (data && data.totalCap) {//     return `<td style="padding:0 10px" colspan="100">${`应收金额大写: ${data.totalCap}`}</td>`;//   }//   return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>';// },},{tid: 'aProviderModule.customText',title: '文本',customText: '自定义文本',custom: true,type: 'text',},{tid: 'aProviderModule.longText',title: '长文本',type: 'longText',options: {field: 'test.longText',width: 200,testData: '长文本分页/不分页测试',},},]),new hiprint.PrintElementTypeGroup('辅助', [{tid: 'aProviderModule.hline',title: '横线',type: 'hline',},{tid: 'aProviderModule.vline',title: '竖线',type: 'vline',},{tid: 'aProviderModule.rect',title: '矩形',type: 'rect',},{tid: 'aProviderModule.oval',title: '椭圆',type: 'oval',},{tid: 'aProviderModule.barcode',title: '条形码',type: 'barcode',},{tid: 'aProviderModule.qrcode',title: '二维码',type: 'qrcode',},]),]);};return {addElementTypes,};
};// 自定义设计元素2
export const bProvider = function () {const addElementTypes = function (context) {context.removePrintElementTypes('bProviderModule');context.addPrintElementTypes('bProviderModule', [new hiprint.PrintElementTypeGroup('常规', [{tid: 'bProviderModule.header',title: '单据表头',data: '单据表头',type: 'text',options: {testData: '单据表头',height: 17,fontSize: 16.5,fontWeight: '700',textAlign: 'center',hideTitle: true,},},{tid: 'bProviderModule.type',title: '单据类型',data: '单据类型',type: 'text',options: {testData: '单据类型',height: 16,fontSize: 15,fontWeight: '700',textAlign: 'center',hideTitle: true,},},{tid: 'bProviderModule.order',title: '订单编号',data: 'XS888888888',type: 'text',options: {field: 'orderId',testData: 'XS888888888',height: 16,fontSize: 6.75,fontWeight: '700',textAlign: 'left',textContentVerticalAlign: 'middle',},},{tid: 'bProviderModule.date',title: '业务日期',data: '2020-01-01',type: 'text',options: {field: 'date',testData: '2020-01-01',height: 16,fontSize: 6.75,fontWeight: '700',textAlign: 'left',textContentVerticalAlign: 'middle',},},{tid: 'bProviderModule.barcode',title: '条形码',data: 'XS888888888',type: 'text',options: {field: 'barcode',testData: 'XS888888888',height: 32,fontSize: 12,lineHeight: 18,textType: 'barcode',},},{tid: 'bProviderModule.qrcode',title: '二维码',data: 'XS888888888',type: 'text',options: {field: 'qrcode',testData: 'XS888888888',height: 32,fontSize: 12,lineHeight: 18,textType: 'qrcode',},},{tid: 'bProviderModule.platform',title: '平台名称',data: '平台名称',type: 'text',options: {testData: '平台名称',height: 17,fontSize: 16.5,fontWeight: '700',textAlign: 'center',hideTitle: true,},},{tid: 'bProviderModule.image',title: 'Logo',data: '',type: 'image',},]),new hiprint.PrintElementTypeGroup('客户', [{tid: 'bProviderModule.khname',title: '客户名称',data: '高级客户',type: 'text',options: {field: 'name',testData: '高级客户',height: 16,fontSize: 6.75,fontWeight: '700',textAlign: 'left',textContentVerticalAlign: 'middle',},},{tid: 'bProviderModule.tel',title: '客户电话',data: '18888888888',type: 'text',options: {field: 'tel',testData: '18888888888',height: 16,fontSize: 6.75,fontWeight: '700',textAlign: 'left',textContentVerticalAlign: 'middle',},},]),new hiprint.PrintElementTypeGroup('表格/其他', [{tid: 'bProviderModule.table',title: '订单数据',type: 'table',options: {field: 'table',fields: [{ text: '名称', field: 'NAME' },{ text: '数量', field: 'SL' },{ text: '规格', field: 'GG' },{ text: '条码', field: 'TM' },{ text: '单价', field: 'DJ' },{ text: '金额', field: 'JE' },{ text: '备注', field: 'DETAIL' },],},editable: true,columnDisplayEditable: true, // 列显示是否能编辑columnDisplayIndexEditable: true, // 列顺序显示是否能编辑columnTitleEditable: true, // 列标题是否能编辑columnResizable: true, // 列宽是否能调整columnAlignEditable: true, // 列对齐是否调整columns: [[{ title: '名称', align: 'center', field: 'NAME', width: 100 },{ title: '数量', align: 'center', field: 'SL', width: 100 },{ title: '条码', align: 'center', field: 'TM', width: 100 },{ title: '规格', align: 'center', field: 'GG', width: 100 },{ title: '单价', align: 'center', field: 'DJ', width: 100 },{ title: '金额', align: 'center', field: 'JE', width: 100 },{ title: '备注', align: 'center', field: 'DETAIL', width: 100 },],],footerFormatter(options, rows, data) {if (data && data.totalCap) {return `<td style="padding:0 10px" colspan="100">${`应收金额大写: ${data.totalCap}`}</td>`;}return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>';},},{tid: 'bProviderModule.customText',title: '文本',customText: '自定义文本',custom: true,type: 'text',},{tid: 'bProviderModule.longText',title: '长文本',type: 'longText',options: {field: 'test.longText',width: 200,testData: '长文本分页/不分页测试',},},]),new hiprint.PrintElementTypeGroup('辅助', [{tid: 'bProviderModule.hline',title: '横线',type: 'hline',},{tid: 'bProviderModule.vline',title: '竖线',type: 'vline',},{tid: 'bProviderModule.rect',title: '矩形',type: 'rect',},{tid: 'bProviderModule.oval',title: '椭圆',type: 'oval',},]),]);};return {addElementTypes,};
};// type: 1供货商 2经销商
export default [{name: 'A设计',value: 'aProviderModule',type: 1,f: aProvider(),},{name: 'B设计',value: 'bProviderModule',type: 2,f: bProvider(),},
];

print-data.js代码

export default {totalCap: '壹佰元整',creater: '制单人的名称嗯哼',logo: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',logoTest:'https://portrait.gitee.com/uploads/avatars/user/1800/5400665_CcSimple_1591166830.png!avatar60',barcode: 'XS888888888',qrcode: '0123456789',test: {a: '111',b: '222',longText:'浙江在线3月29日讯最近，\n一篇小学五年级学生写的作文引起了钱报记者的关注这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以',},testaaa: {a: {b: {c: {d: 'dddddddddddd',},},},},table_test: {a: [{NAME: '测试商品1111',SL: 2,GG: '1*24g',TM: '2O22010100110',DJ: '6.8',JE: '13.6',},{NAME: '测试商品2222',SL: 2,GG: '1*24g',TM: '2O22010100110',DJ: '6.8',JE: '13.6',},{NAME: '测试商品3333',SL: 2,GG: '1*24g',TM: '2O22010100110',DJ: '6.8',JE: '13.6',},{NAME: '测试商品4444',SL: 2,GG: '1*24g',TM: '2O22010100110',DJ: '6.8',JE: '13.6',},{NAME: '测试商品5555',SL: 2,GG: '1*24g',TM: '2O22010100110',DJ: '6.8',JE: '13.6',},],},table: [{INDEX: '1',NAME: '测试商品1111111',SL: 2,GG: '1*24g',TM: '2O22010100110',DJ: '6.8',JE: '13.6',},{INDEX: '2',NAME: '测试商品02',SL: 2,GG: '1*24g',TM: '2O22010100110',DJ: '6.8',JE: '13.6',},{INDEX: '3',NAME: '测试商品03',SL: 2,GG: '1*24g',TM: '2O22010100110',DJ: '6.8',JE: '13.6',},{INDEX: '4',NAME: '测试商品04',SL: 2,GG: '1*24g',TM: '2O22010100110',DJ: '6.8',JE: '13.6',},{INDEX: '5',NAME: '测试商品05',SL: 2,GG: '1*24g',TM: '2O22010100110',DJ: '6.8',JE: '13.6',},{INDEX: '6',NAME: '测试商品06',SL: 2,GG: '1*24g',TM: '2O22010100110',DJ: '6.8',JE: '13.6',},{INDEX: '7',NAME: '测试商品07',SL: 2,GG: '1*24g',TM: '2O22010100110',DJ: '6.8',JE: '13.6',},],
};

print-lock.css代码

@media print {body {margin: 0px;padding: 0px;}
}@page {margin: 0;
}.hiprint-printPaper * {box-sizing: border-box;-moz-box-sizing: border-box; /* Firefox */-webkit-box-sizing: border-box; /* Safari */
}.hiprint-printPaper *:focus {outline: -webkit-focus-ring-color auto 0px;
}.hiprint-printPaper {position: relative;padding: 0 0 0 0;page-break-after: always;-webkit-user-select: none; /* Chrome/Safari/Opera */-moz-user-select: none; /* Firefox */user-select: none;overflow-x: hidden;overflow: hidden;
}.hiprint-printPaper .hiprint-printPaper-content {position: relative;
}/* 火狐浏览器打印 第一页过后 重叠问题 */
@-moz-document url-prefix() {.hiprint-printPaper .hiprint-printPaper-content {position: relative;margin-top: 20px;top: -20px}
}.hiprint-printPaper.design {overflow: visible;
}.hiprint-printTemplate .hiprint-printPanel {page-break-after: always;
}.hiprint-printPaper, hiprint-printPanel {box-sizing: border-box;border: 0px;
}.hiprint-printPanel .hiprint-printPaper:last-child {page-break-after: avoid;
}.hiprint-printTemplate .hiprint-printPanel:last-child {page-break-after: avoid;
}.hiprint-printPaper .hideheaderLinetarget {border-top: 0px dashed rgb(201, 190, 190) !important;
}.hiprint-printPaper .hidefooterLinetarget {border-top: 0px dashed rgb(201, 190, 190) !important;
}.hiprint-printPaper.design {border: 1px dashed rgba(170, 170, 170, 0.7);
}.design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content {overflow: hidden;box-sizing: border-box;
}.design .resize-panel {box-sizing: border-box;border: 1px dotted;
}.hiprint-printElement-text {background-color: transparent;background-repeat: repeat;padding: 0 0 0 0;border: 0.75pt none rgb(0, 0, 0);direction: ltr;font-family: 'SimSun';font-size: 9pt;font-style: normal;font-weight: normal;padding-bottom: 0pt;padding-left: 0pt;padding-right: 0pt;padding-top: 0pt;text-align: left;text-decoration: none;line-height: 9.75pt;box-sizing: border-box;word-wrap: break-word;word-break: break-all;
}.design .hiprint-printElement-text-content {border: 1px dashed rgb(206, 188, 188);box-sizing: border-box;
}.hiprint-printElement-longText {background-color: transparent;background-repeat: repeat;border: 0.75pt none rgb(0, 0, 0);direction: ltr;font-family: 'SimSun';font-size: 9pt;font-style: normal;font-weight: normal;padding-bottom: 0pt;padding-left: 0pt;padding-right: 0pt;padding-top: 0pt;text-align: left;text-decoration: none;line-height: 9.75pt;box-sizing: border-box;word-wrap: break-word;word-break: break-all;/*white-space: pre-wrap*/
}.hiprint-printElement-table {background-color: transparent;background-repeat: repeat;color: rgb(0, 0, 0);border-color: rgb(0, 0, 0);border-style: none;direction: ltr;font-family: 'SimSun';font-size: 9pt;font-style: normal;font-weight: normal;padding-bottom: 0pt;padding-left: 0pt;padding-right: 0pt;padding-top: 0pt;text-align: left;text-decoration: none;padding: 0 0 0 0;box-sizing: border-box;line-height: 9.75pt;
}.hiprint-printElement-table thead {background: #e8e8e8;font-weight: 700;
}table.hiprint-printElement-tableTarget {width: 100%;
}.hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td {border-color: rgb(0, 0, 0);/*border-style: none;*//*border: 1px solid rgb(0, 0, 0);*/font-weight: normal;direction: ltr;padding-bottom: 0pt;padding-left: 4pt;padding-right: 4pt;padding-top: 0pt;text-decoration: none;vertical-align: middle;box-sizing: border-box;word-wrap: break-word;word-break: break-all;/*line-height: 9.75pt;font-size: 9pt;*/
}.hiprint-printElement-tableTarget-border-all {border: 1px solid;
}
.hiprint-printElement-tableTarget-border-none {border: 0px solid;
}
.hiprint-printElement-tableTarget-border-lr {border-left: 1px solid;border-right: 1px solid;
}
.hiprint-printElement-tableTarget-border-left {border-left: 1px solid;
}
.hiprint-printElement-tableTarget-border-right {border-right: 1px solid;
}
.hiprint-printElement-tableTarget-border-tb {border-top: 1px solid;border-bottom: 1px solid;
}
.hiprint-printElement-tableTarget-border-top {border-top: 1px solid;
}
.hiprint-printElement-tableTarget-border-bottom {border-bottom: 1px solid;
}.hiprint-printElement-tableTarget-border-td-none td {border: 0px solid;
}
.hiprint-printElement-tableTarget-border-td-all td:not(:nth-last-child(-n+2)) {border-right: 1px solid;
}
.hiprint-printElement-tableTarget-border-td-all td:not(last-child) {border-right: 1px solid;
}
.hiprint-printElement-tableTarget-border-td-all td:last-child {border-left: 1px solid;
}
.hiprint-printElement-tableTarget-border-td-all td:last-child:first-child {border-left: none;
}/*.hiprint-printElement-tableTarget tr,*/
.hiprint-printElement-tableTarget td {height: 18pt;
}.hiprint-printPaper .hiprint-paperNumber {font-size: 9pt;
}.design .hiprint-printElement-table-handle {position: absolute;height: 21pt;width: 21pt;background: red;z-index: 1;
}.hiprint-printPaper .hiprint-paperNumber-disabled {float: right !important;right: 0 !important;color: gainsboro !important;
}.hiprint-printElement-vline, .hiprint-printElement-hline {border: 0px none rgb(0, 0, 0);}.hiprint-printElement-vline {border-left: 0.75pt solid #000;border-right: 0px none rgb(0, 0, 0) !important;border-bottom: 0px none rgb(0, 0, 0) !important;border-top: 0px none rgb(0, 0, 0) !important;
}.hiprint-printElement-hline {border-top: 0.75pt solid #000;border-right: 0px none rgb(0, 0, 0) !important;border-bottom: 0px none rgb(0, 0, 0) !important;border-left: 0px none rgb(0, 0, 0) !important;
}.hiprint-printElement-oval, .hiprint-printElement-rect {border: 0.75pt solid #000;
}.hiprint-text-content-middle {
}.hiprint-text-content-middle > div {display: grid;align-items: center;
}.hiprint-text-content-bottom {
}.hiprint-text-content-bottom > div {display: grid;align-items: flex-end;
}.hiprint-text-content-wrap {
}.hiprint-text-content-wrap .hiprint-text-content-wrap-nowrap {white-space: nowrap;
}.hiprint-text-content-wrap .hiprint-text-content-wrap-clip {white-space: nowrap;overflow: hidden;text-overflow: clip;
}.hiprint-text-content-wrap .hiprint-text-content-wrap-ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}/*hi-grid-row */
.hi-grid-row {position: relative;height: auto;margin-right: 0;margin-left: 0;zoom: 1;display: block;box-sizing: border-box;
}.hi-grid-row::after, .hi-grid-row::before {display: table;content: '';box-sizing: border-box;
}.hi-grid-col {display: block;box-sizing: border-box;position: relative;float: left;flex: 0 0 auto;
}.table-grid-row {margin-left: -0pt;margin-right: -0pt;
}.tableGridColumnsGutterRow {padding-left: 0pt;padding-right: 0pt;
}.hiprint-gridColumnsFooter {text-align: left;clear: both;
}