https://gitee.com/CcSimple/vue-plugin-hiprint#https://gitee.com/link?target=https%3A%2F%2Fccsimple.github.io%2Fsv-print-docs%2F
入门篇
安装使用
引入插件
npm install vue-plugin-hiprint
npm install vue-ls
在index.html 文件中添加打印所需样式,print-lock.css样式文件放在public中
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">
main.js
import { hiPrintPlugin } from 'vue-plugin-hiprint';
import Storage from 'vue-ls'
let options = {
namespace: 'hiPrint-',
name: 'ls',
storage: 'local',
};
Vue.use(Storage, options);
Vue.use(hiPrintPlugin, '$hiprint', false);
src/views/print/App.vue
<template>
<div id="app">
<div class="logos" style="float: left">
<img src="@/assets/logo/hi.png"/>
</div>
<el-row type="flex" class="menus">
<el-button-group>
<el-button v-for="demo in demoList" :key="demo.name"
:type="demo.name === curDemo ? 'primary' : 'default'"
@click="curDemo = demo.name"> {{ demo.title }}
</el-button>
</el-button-group>
</el-row>
<!-- 动态渲染组件，懒得去弄路由了 -->
<keep-alive :include='keepInclude' :max="10">
<component :is="curDemo"/>
</keep-alive>
</div>
</template>
<script>
import printDesign from "@/views/print/demo/design/index.vue";
import printCustom from "@/views/print/demo/custom/index.vue";
import printTasks from "@/views/print/demo/tasks/index.vue";
export default {
name: 'App',
components: {printDesign, printCustom, printTasks},
data() {
return {
curDemo: 'printDesign',
keepInclude: 'printDesign,printCustom,printTasks',
demoList: [
{name: 'printDesign', title: '默认拖拽设计'},
{name: 'printCustom', title: '自定义设计'},
{name: 'printTasks', title: '队列/批量打印'}
]
}
},
}
</script>
<style lang="scss">
.logos {
padding: 6px 24px;
display: flex;
justify-content: center;
align-self: center;
img {
height: 40px;
width: 40px;
}
}
.menus {
padding: 10px 24px;
}
// hiprint 拖拽图片
.hiprint-printElement-image-content {
img {
content: url("~@/assets/logo/logo.png");
}
}
// 修改 页眉/页脚线 样式
.hiprint-headerLine,
.hiprint-footerLine {
border-color: red !important;
}
.hiprint-headerLine:hover,
.hiprint-footerLine:hover {
border-top: 3px dashed red !important;
}
.hiprint-headerLine:hover:before {
content: "页眉线";
left: calc(50% - 18px);
position: relative;
background: #ffff;
top: -12px;
color: red;
font-size: 12px;
}
.hiprint-footerLine:hover:before {
content: "页脚线";
left: calc(50% - 18px);
position: relative;
color: red;
background: #ffff;
top: -12px;
font-size: 12px;
}
.drag_item_title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
}
.glyphicon-class {
height: 92px;
width: 95px;
line-height: 92px;
display: inline-block;
text-align: center;
margin-bottom: 7px;
box-sizing: border-box;
color: #b9a5a6;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: 0 1px 0 0 rgb(0 0 0 / 15%);
}
.glyphicon-class:hover {
border-color: #007bff; /* 悬浮时边框颜色 */
color: #007bff;
}
</style>
src/views/print/demo/design/index.vue
<template>
<el-card>
<div style="display: flex;flex-direction: column">
<span style="margin-bottom: 10px">
<el-button-group>
<el-button v-for="(value,type) in paperTypes" :type="curPaperType === type ? 'primary' : ' '"
@click="setPaper(type,value)" :key="type">
{{ type }}
</el-button>
</el-button-group>
<el-popover
placement="bottom"
width="300"
title="设置纸张宽高(mm)"
v-model="paperPopVisible">
<div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px">
<el-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"
place="宽（mm）"></el-input>
~
<el-input type="number" v-model="paperHeight" style=" width: 100px; text-align: center"
place="高（mm）"></el-input>
</div>
<div>
<el-button type="primary" style="width: 100%" @click="otherPaper" size="mini">确定</el-button>
</div>
<el-button slot="reference" type="primary" style="margin:0 5px">自定义宽高</el-button>
</el-popover>
<el-input-number :value="scaleValue " :precision="2" :step="0.1" :min="scaleMin" :max="scaleMax"
@change="changeScale" style="margin-right: 10px"></el-input-number>
<el-button type="primary" icon="el-icon-view" @click="preView">
预览
</el-button>
<el-button type="primary" icon="el-icon-printer" @click="print">
直接打印
</el-button>
<el-button type="primary" @click="exportData" icon="el-icon-download">
导出文件
</el-button>
<el-button type="danger" @click="clearPaper" icon="el-icon-delete">
清空
</el-button>
<el-button type="primary" @click="selectEls">
获取选中元素
</el-button>
<el-button type="primary" @click="updateFontSize('8')">
选中元素字体8pt
</el-button>
<el-button type="primary" @click="updateFontWeight">
选中元素字体Bolder
</el-button>
<el-button type="primary" @click="setMultEleHorizontal">
多选元素水平间距10
</el-button>
<el-button type="primary" @click="setMultEleVertical">
多选元素垂直间距10
</el-button>
</span>
<span style="margin-bottom: 10px">
<el-input type="textarea" style="width:30vw;margin-right: 10px" v-model="jsonIn"
@pressEnter="updateJson"
placeholder="复制json模板到此后 点击右侧更新"
allow-clear/>
<el-button type="primary" @click="updateJson">
更新json模板
</el-button>
<el-button type="primary" @click="exportJson">
导出json模板到 textArea
</el-button>
<el-input type="textarea" style="width:30vw;margin-left: 10px" v-model="jsonOut"
placeholder="点击左侧导出json"
allow-clear/>
</span>
</div>
<el-row>
<el-col :span="4">
<el-card style="height: 100vh;margin-right: 5px">
<el-row>
<el-col :span="24" class="rect-printElement-types hiprintEpContainer">
<el-row class="drag_item_title">拖拽组件列表</el-row>
<el-row style="height: 100px;">
<el-col :span="8" class="drag_item_box">
<div>
<a class="ep-draggable-item" tid="defaultModule.text" style>
<span class="glyphicon glyphicon-text-width" ariel-hidden="true"></span>
<p class="glyphicon-class">文本</p>
</a>
</div>
</el-col>
<el-col :span="8" class="drag_item_box">
<div>
<a class="ep-draggable-item" tid="defaultModule.image" style>
<span class="glyphicon glyphicon-picture" ariel-hidden="true"></span>
<p class="glyphicon-class">图片</p>
</a>
</div>
</el-col>
<el-col :span="8" class="drag_item_box">
<div>
<a class="ep-draggable-item" tid="defaultModule.longText">
<span class="glyphicon glyphicon-subscript" ariel-hidden="true"></span>
<p class="glyphicon-class">长文</p>
</a>
</div>
</el-col>
</el-row>
<el-row style="height: 100px;">
<el-col :span="8" class="drag_item_box">
<div>
<a class="ep-draggable-item" tid="defaultModule.table" style>
<span class="glyphicon glyphicon-th" ariel-hidden="true"></span>
<p class="glyphicon-class">表格</p>
</a>
</div>
</el-col>
<el-col :span="8" class="drag_item_box">
<div>
<a class="ep-draggable-item" tid="defaultModule.emptyTable" style>
<span class="glyphicon glyphicon-th" ariel-hidden="true"></span>
<p class="glyphicon-class">空白表格</p>
</a>
</div>
</el-col>
<el-col :span="8" class="drag_item_box">
<div>
<a class="ep-draggable-item" tid="defaultModule.html" style="">
<span class="glyphicon glyphicon-header" ariel-hidden="true"></span>
<p class="glyphicon-class">HTML</p>
</a>
</div>
</el-col>
</el-row>
<el-row style="height: 100px;">
<el-col :span="8" class="drag_item_box">
<div>
<a class="ep-draggable-item" tid="defaultModule.customText" style>
<span class="glyphicon glyphicon-text-width" ariel-hidden="true"></span>
<p class="glyphicon-class">自定义</p>
</a>
</div>
</el-col>
</el-row>
<el-row class="drag_item_title">辅助</el-row>
<el-row style="height: 100px;">
<el-col :span="8" class="drag_item_box">
<div>
<a class="ep-draggable-item" tid="defaultModule.hline" style>
<span class="glyphicon glyphicon-resize-horizontal" ariel-hidden="true"></span>
<p class="glyphicon-class">横线</p>
</a>
</div>
</el-col>
<el-col :span="8" class="drag_item_box">
<div>
<a class="ep-draggable-item" tid="defaultModule.vline" style>
<span class="glyphicon glyphicon-resize-vertical" ariel-hidden="true"></span>
<p class="glyphicon-class">竖线</p>
</a>
</div>
</el-col>
<el-col :span="8" class="drag_item_box">
<div>
<a class="ep-draggable-item" tid="defaultModule.rect">
<span class="glyphicon glyphicon-unchecked" ariel-hidden="true"></span>
<p class="glyphicon-class">矩形</p>
</a>
</div>
</el-col>
</el-row>
<el-row style="height: 100px;">
<el-col :span="8" class="drag_item_box">
<div>
<a class="ep-draggable-item" tid="defaultModule.oval">
<span class="glyphicon glyphicon-record" ariel-hidden="true"></span>
<p class="glyphicon-class">椭圆</p>
</a>
</div>
</el-col>
<el-col :span="8" class="drag_item_box">
<div>
<a class="ep-draggable-item" tid="defaultModule.barcode">
<span class="glyphicon glyphicon-barcode" ariel-hidden="true"></span>
<p class="glyphicon-class">条形码</p>
</a>
</div>
</el-col>
<el-col :span="8" class="drag_item_box">
<div>
<a class="ep-draggable-item" tid="defaultModule.qrcode">
<span class="glyphicon glyphicon-qrcode" ariel-hidden="true"></span>
<p class="glyphicon-class">二维码</p>
</a>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="15">
<el-card class="card-design">
<div id="hiprint-printTemplate" class="hiprint-printTemplate" style="height: 100%;margin: 10px;"></div>
</el-card>
</el-col>
<el-col :span="5" class="params_setting_container">
<el-card style="height: 100vh;margin-left: 5px">
<el-row class="hinnn-layout-sider">
<div id="PrintElementOptionSetting"></div>
</el-row>
</el-card>
</el-col>
</el-row>
<!-- 预览 -->
<print-preview ref="preView"/>
</el-card>
</template>
<script>
import {disAutoConnect, hiprint, defaultElementTypeProvider} from 'vue-plugin-hiprint'
import {MessageBox} from "element-ui";
import printPreview from "./preview";
import panel from "../test/panel";
import printData from "../test/print-data";
import {decodeVer} from '@/utils'
let hiprintTemplate;
export default {
name: "printDesign",
components: {printPreview},
data() {
return {
// 当前纸张
curPaper: {
type: 'A4',
width: 210,
height: 296.6
},
// 纸张类型
paperTypes: {
'A3': {
width: 420,
height: 296.6
},
'A4': {
width: 210,
height: 296.6
},
'A5': {
width: 210,
height: 147.6
},
'B3': {
width: 500,
height: 352.6
},
'B4': {
width: 250,
height: 352.6
},
'B5': {
width: 250,
height: 175.6
}
},
// 自定义纸张
paperPopVisible: false,
paperWidth: '220',
paperHeight: '80',
// 缩放
scaleValue: 1,
scaleMax: 5,
scaleMin: 0.5,
// 导入导出json
jsonIn: '',
jsonOut: '',
}
},
computed: {
curPaperType() {
let type = 'other'
let types = this.paperTypes
for (const key in types) {
let item = types[key]
let {width, height} = this.curPaper
if (item.width === width && item.height === height) {
type = key
}
}
return type
},
},
mounted() {
this.init()
},
methods: {
init() {
hiprint.init({
providers: [new defaultElementTypeProvider()]
});
// 还原配置
hiprint.setConfig()
// 替换配置
hiprint.setConfig({
movingDistance: 2.5,
text: {
supportOptions: [
{
name: 'styler',
hidden: true
},
{
name: 'formatter',
hidden: true
},
]
}
})
// eslint-disable-next-line no-undef
hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
hiprintTemplate = new hiprint.PrintTemplate({
template: panel,
settingContainer: '#PrintElementOptionSetting',
paginationContainer: '.hiprint-printPagination'
});
hiprintTemplate.design('#hiprint-printTemplate');
// 获取当前放大比例, 当zoom时传true 才会有
this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
},
/**
* 获取选中元素
*/
selectEls() {
let els = hiprintTemplate.getSelectEls()
console.log(els)
},
updateFontSize(val) {
hiprintTemplate.updateOption('fontSize', val)
},
updateFontWeight() {
hiprintTemplate.updateOption('fontWeight', '700')
},
/**
* 设置多选元素水平间距
*/
setMultEleHorizontal() {
hiprintTemplate.setElsSpace(10, true)
},
/**
* 设置多选元素垂直间距
*/
setMultEleVertical() {
hiprintTemplate.setElsSpace(10, false)
},
/**
* 设置纸张大小
* @param type [A3, A4, A5, B3, B4, B5, other]
* @param value {width,height} mm
*/
setPaper(type, value) {
try {
if (Object.keys(this.paperTypes).includes(type)) {
this.curPaper = {type: type, width: value.width, height: value.height}
hiprintTemplate.setPaper(value.width, value.height)
} else {
this.curPaper = {type: 'other', width: value.width, height: value.height}
hiprintTemplate.setPaper(value.width, value.height)
}
} catch (error) {
this.$message.error(`操作失败: ${error}`)
}
},
otherPaper() {
let value = {}
value.width = this.paperWidth
value.height = this.paperHeight
this.paperPopVisible = false
this.setPaper('other', value)
},
changeScale(currentValue, oldValue) {
let big = false
currentValue <= oldValue ? big = false : big = true
let scaleValue = this.scaleValue;
if (big) {
scaleValue += 0.1;
if (scaleValue > this.scaleMax) scaleValue = 5;
} else {
scaleValue -= 0.1;
if (scaleValue < this.scaleMin) scaleValue = 0.5;
}
if (hiprintTemplate) {
// scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
hiprintTemplate.zoom(scaleValue);
this.scaleValue = scaleValue;
}
},
preView() {
this.$refs.preView.show(hiprintTemplate, printData)
},
print() {
this.$refs.preView.print(hiprintTemplate, printData)
},
exportData() {
if (hiprintTemplate) {
const json = JSON.stringify(hiprintTemplate.getJson(), null, 2); // 格式化 JSON 数据
const jsContent = `export default ${json};`; // 生成 JS 文件内容
const blob = new Blob([jsContent], {type: 'application/javascript'}); // 创建 Blob 对象
const url = URL.createObjectURL(blob); // 创建下载 URL
const link = document.createElement('a'); // 创建下载链接
link.href = url;
link.download = 'data.js'; // 设置下载文件名
document.body.appendChild(link);
link.click(); // 触发下载
document.body.removeChild(link);
URL.revokeObjectURL(url); // 释放 URL 对象
} else this.$message.error("模板数据为空,导出失败");
},
clearPaper() {
MessageBox.confirm('是否确认清空模板信息?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
try {
hiprintTemplate.clear();
} catch (error) {
this.$message.error(`操作失败: ${error}`);
}
}).catch((err) => {
console.log(err)
})
},
updateJson() {
if (hiprintTemplate) {
try {
hiprintTemplate.update(JSON.parse(this.jsonIn))
} catch (e) {
this.$message.error(`更新失败: ${e}`)
}
}
},
exportJson() {
if (hiprintTemplate) {
this.jsonOut = JSON.stringify(hiprintTemplate.getJson() || {})
}
},
}
}
</script>
<style lang="scss" scoped>
// 拖拽
.drag_item_box {
height: 100%;
padding: 6px;
}
.drag_item_box > div {
height: 100%;
width: 100%;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.drag_item_box > div > a {
text-align: center;
text-decoration-line: none;
}
.drag_item_box > div > a > span {
font-size: 28px;
}
.drag_item_box > div > a > p {
margin: 0;
}
.drag_item_title {
font-size: 16px;
padding: 8px 6px 0 6px;
font-weight: bold;
}
// 默认图片
.hiprint-printElement-image-content {
img {
content: url("~@/assets/logo/logo.png");
}
}
// 设计容器
.card-design {
overflow: hidden;
overflow-x: auto;
overflow-y: auto;
}
</style>
src/views/print/demo/design/preview.vue
<template>
<el-dialog :visible="visible" :maskClosable="false"
@close="hideModal" :width="width+'mm'">
<template slot="title">
<span style="margin-right: 20px">打印预览</span>
<el-button :loading="waitShowPrinter" type="primary" icon="el-icon-printer" @click.stop="print">打印</el-button>
<el-button type="primary" icon="el-icon-printer" @click.stop="toPdf">pdf</el-button>
</template>
<hr style="width: 100%;margin-top: -15px">
<div id="preview_content"></div>
<hr style="width: 100%;margin-top: 5px">
<template slot="footer">
<el-button key="close" type="info" @click="hideModal">
关闭
</el-button>
</template>
</el-dialog>
</template>
<script>
export default {
name: "printPreview",
props: {},
data() {
return {
visible: false,
spinning: true,
waitShowPrinter: false,
// 纸张宽 mm
width: 0,
// 模板
hiprintTemplate: {},
// 数据
printData: {}
}
},
computed: {},
watch: {},
created() {
},
mounted() {
},
methods: {
hideModal() {
this.visible = false
},
show(hiprintTemplate, printData, width = '210') {
this.visible = true
this.spinning = true
this.width = width
this.hiprintTemplate = hiprintTemplate
this.printData = printData
setTimeout(() => {
// eslint-disable-next-line no-undef
$('#preview_content').html(hiprintTemplate.getHtml(printData))
this.spinning = false
}, 500)
},
print(hiprintTemplate,printData) {
this.hiprintTemplate = hiprintTemplate
this.printData = printData
this.waitShowPrinter = true
this.hiprintTemplate.print(this.printData, {}, {
callback: () => {
console.log('callback')
this.waitShowPrinter = false
}
})
},
toPdf() {
this.hiprintTemplate.toPdf({}, '打印预览');
},
}
}
</script>
<style lang="scss" scoped>
.ant-modal-body {
padding: 0px;
}
.ant-modal-content {
margin-bottom: 24px;
}
</style>
src/views/print/demo/design/panel.js
export default {
"panels": [{
"index": 0,
"height": 297,
"width": 210,
"paperHeader": 49.5,
"paperFooter": 780,
"printElements": [{
"options": {
"left": 175.5,
"top": 10.5,
"height": 27,
"width": 259,
"title": "HiPrint自定义模块打印插件",
"fontSize": 19,
"fontWeight": "600",
"textAlign": "center",
"lineHeight": 26
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {"left": 60, "top": 27, "height": 13, "width": 52, "title": "页眉线", "textAlign": "center"},
"printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {"left": 25.5, "top": 57, "height": 705, "width": 9, "fixed": true, "borderStyle": "dotted"},
"printElementType": {"type": "vline"}
}, {
"options": {"left": 60, "top": 61.5, "height": 48, "width": 87, "src": ""},
"printElementType": {"title": "图片", "type": "image"}
}, {
"options": {
"left": 153,
"top": 64.5,
"height": 39,
"width": 276,
"title": "二维码以及条形码均采用svg格式打印。不同打印机打印不会造成失真。图片打印：不同DPI打印可能会导致失真，",
"fontFamily": "微软雅黑",
"textAlign": "center",
"lineHeight": 18
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {
"left": 457.5,
"top": 79.5,
"height": 13,
"width": 120,
"title": "姓名",
"field": "name",
"testData": "古力娜扎",
"color": "#f00808",
"textDecoration": "underline",
"textAlign": "center"
}, "printElementType": {"title": "文本", "type": "text"}
}, {
"options": {
"left": 483,
"top": 124.5,
"height": 43,
"width": 51,
"title": "123456789",
"textType": "qrcode"
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {
"left": 285,
"top": 130.5,
"height": 34,
"width": 175,
"title": "123456789",
"fontFamily": "微软雅黑",
"textAlign": "center",
"textType": "barcode"
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {
"left": 60,
"top": 132,
"height": 19,
"width": 213,
"title": "所有打印元素都可已拖拽的方式来改变元素大小",
"fontFamily": "微软雅黑",
"textAlign": "center",
"lineHeight": 18
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {
"left": 153,
"top": 189,
"height": 13,
"width": 238,
"title": "单击元素，右侧可自定义元素属性",
"textAlign": "center",
"fontFamily": "微软雅黑"
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {"left": 60, "top": 190.5, "height": 13, "width": 51, "title": "横线", "textAlign": "center"},
"printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {
"left": 415.5,
"top": 190.5,
"height": 13,
"width": 164,
"title": "可以配置各属性的默认值",
"textAlign": "center",
"fontFamily": "微软雅黑"
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {"left": 60, "top": 214.5, "height": 10, "width": 475.5},
"printElementType": {"title": "横线", "type": "hline"}
}, {
"options": {
"left": 235.5,
"top": 220.5,
"height": 32,
"width": 342,
"title": "自定义表格：用户可左键选中表头，右键查看可操作项，操作类似Excel，双击表头单元格可进行编辑。内容：title#field",
"fontFamily": "微软雅黑",
"textAlign": "center",
"lineHeight": 15
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {
"left": 156,
"top": 265.5,
"height": 13,
"width": 94,
"title": "表头列大小可拖动",
"fontFamily": "微软雅黑",
"textAlign": "center"
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {
"left": 60,
"top": 265.5,
"height": 13,
"width": 90,
"title": "红色区域可拖动",
"fontFamily": "微软雅黑",
"textAlign": "center"
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {
"left": 60,
"top": 285,
"height": 44,
"width": 511.5,
"field": "table",
"fields": [{"text":'id',"field":'id'},{"text":'姓名',"field":'name'},{"text":'性别',"field":'gender'},{"text":'数量',"field":'count'}],
"columns": [[{"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}, {
"width": 85.25,
"colspan": 1,
"rowspan": 1,
"checked": true
}, {
"title": "姓名",
"field": "name",
"width": 85.25,
"align": "center",
"colspan": 1,
"rowspan": 1,
"checked": true,
}, {"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}, {
"width": 85.25,
"colspan": 1,
"rowspan": 1,
"checked": true
}, {"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}]]
}, "printElementType": {
"title": "表格", "type": "table",
editable:true,
columnDisplayEditable: true,//列显示是否能编辑
columnDisplayIndexEditable: true,//列顺序显示是否能编辑
columnTitleEditable: true,//列标题是否能编辑
columnResizable: true, //列宽是否能调整
columnAlignEditable: true,//列对齐是否调整
}
}, {
"options": {
"left": 21,
"top": 346.5,
"height": 61.5,
"width": 15,
"title": "装订线",
"lineHeight": 18,
"fixed": true,
"contentPaddingTop": 3.75,
"backgroundColor": "#ffffff"
}, "printElementType": {"type": "text"}
}, {
"options": {
"left": 225,
"top": 349.5,
"height": 13,
"width": 346.5,
"title": "自定义模块：主要为开发人员设计，能够快速，简单，实现自己功能",
"textAlign": "center"
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {"left": 60, "top": 370.5, "height": 18, "width": 79, "title": "配置项表格", "textAlign": "center"},
"printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {
"left": 225,
"top": 385.5,
"height": 38,
"width": 346.5,
"title": "配置模块：主要为客户使用，开发人员可以配置属性，字段，标题等，客户直接使用，配置模块请参考实例2",
"fontFamily": "微软雅黑",
"lineHeight": 15,
"textAlign": "center",
"color": "#d93838"
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {
"left": 60,
"top": 487.5,
"height": 13,
"width": 123,
"title": "长文本会自动分页",
"textAlign": "center"
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {"left": 60, "top": 507, "height": 40, "width": 511.5, "field": "longText"},
"printElementType": {"title": "长文", "type": "longText"}
}, {
"options": {"left": 475.5, "top": 565.5, "height": 100, "width": 100},
"printElementType": {"title": "矩形", "type": "rect"}
}, {
"options": {"left": 174, "top": 568.5, "height": 13, "width": 90, "title": "竖线", "textAlign": "center"},
"printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {"left": 60, "top": 574.5, "height": 100, "width": 10},
"printElementType": {"title": "竖线", "type": "vline"}
}, {
"options": {"left": 210, "top": 604.5, "height": 13, "width": 120, "title": "横线", "textAlign": "center"},
"printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {"left": 130.5, "top": 625.5, "height": 10, "width": 277},
"printElementType": {"title": "横线", "type": "hline"}
}, {
"options": {
"left": 364.5,
"top": 649.5,
"height": 13,
"width": 101,
"title": "矩形",
"textAlign": "center"
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {"left": 525, "top": 784.5, "height": 13, "width": 63, "title": "页尾线", "textAlign": "center"},
"printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {"left": 12, "top": 786, "height": 49, "width": 49},
"printElementType": {"title": "html", "type": "html"}
}, {
"options": {
"left": 75,
"top": 790.5,
"height": 13,
"width": 137,
"title": "红色原型是自动定义的Html",
"textAlign": "center"
}, "printElementType": {"title": "自定义文本", "type": "text"}
}, {
"options": {
"left": 334.5,
"top": 810,
"height": 13,
"width": 205,
"title": "页眉线已上。页尾下以下每页都会重复打印",
"textAlign": "center"
}, "printElementType": {"title": "自定义文本", "type": "text"}
}],
"paperNumberLeft": 565.5,
"paperNumberTop": 819
}]
}
src/views/print/demo/design/print-data.js
export default {
name: '黄磊',
password: '12346',
longText: '浙江在线3月29日讯最近，\n一篇小学五年级学生写的作文引起了钱报记者的关注这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文',
table: [
{id: '1', name: '王小可', gender: '男', count: '120', amount: '9089元'},
{id: '2', name: '梦之遥', gender: '女', count: '20', amount: '89元'},
{id: '3', name: '梦之遥', gender: '女', count: '720', amount: '29089元'},
{id: '4', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '5', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '6', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '7', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '8', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '9', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '10', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '11', name: '王小可', gender: '男', count: '120', amount: '9089元'},
{id: '12', name: '梦之遥', gender: '女', count: '20', amount: '89元'},
{id: '13', name: '梦之遥', gender: '女', count: '720', amount: '29089元'},
{id: '14', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '15', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '16', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '17', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '18', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '19', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '20', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '21', name: '王小可', gender: '男', count: '120', amount: '9089元'},
{id: '22', name: '梦之遥', gender: '女', count: '20', amount: '89元'},
{id: '23', name: '梦之遥', gender: '女', count: '720', amount: '29089元'},
{id: '24', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '25', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '26', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '27', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '28', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '29', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '21', name: '王小可', gender: '男', count: '120', amount: '9089元'},
{id: '22', name: '梦之遥', gender: '女', count: '20', amount: '89元'},
{id: '23', name: '梦之遥', gender: '女', count: '720', amount: '29089元'},
{id: '24', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '25', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '26', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '27', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '28', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '29', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '21', name: '王小可', gender: '男', count: '120', amount: '9089元'},
{id: '22', name: '梦之遥', gender: '女', count: '20', amount: '89元'},
{id: '23', name: '梦之遥', gender: '女', count: '720', amount: '29089元'},
{id: '29', name: '黄小菊', gender: '女', count: '420', amount: '19089元'},
{id: '30', name: '黄小菊', gender: '女', count: '420', amount: '19089元'}
]
};
//打印
const modalObj = ref({})
const BtnPrint = () => {
modalObj.value = formModel.value
modalObj.value.table = formModel.value.MOEQMTAppLineList
let printTemplate = new proxy.$hiprint.PrintTemplate({template: receiptPanel})
printTemplate.print(modalObj.value, {}, {
styleHandler: () => {
let css = '<link href="@/views/mom/eq/component/print-lock.css" media="print" rel="stylesheet">';
return css
}
})
};
扫一扫
5813
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
