kubbo/temu-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【新增】打印组件

Browse Source
This commit is contained in:
yanran200830
2024-10-25 15:31:01 +08:00
parent 4d0cc14001
commit a51a0d49bc
6 changed files with 288 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/print/Print.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="print">
<div class="print-wrapper">
<div class="print-wrapper" v-if="!isPrint">
<div class="left">
<div class="left-wrapper">
<div class="title">基础元素</div>
@@ -126,7 +126,6 @@
<script>
import { hiprint, defaultElementTypeProvider, disAutoConnect } from 'vue-plugin-hiprint'
import { newHiprintPrintTemplate } from '@/utils/template-helper'
import printData from './printData'
import { customProvider } from './customProvider'
disAutoConnect()
@@ -138,6 +137,41 @@
default: () => {
return []
}
},
printData: {
type: Object,
default: () => {
return {
}
}
},
template: {
type: Object,
default: () => {
return {
"index": 0,
"name": 1,
"height": 200,
"width": 200,
"paperHeader": 0,
"paperFooter": 547,
"printElements": [],
"paperNumberLeft": 500,
"paperNumberTop": 530,
"paperNumberDisabled": true,
"paperNumberContinue": true,
"fontFamily": "Microsoft YaHei",
"scale": 1,
"watermarkOptions": {}
}
}
},
isPrint: {
type: Boolean,
default: false
}
},
@@ -209,8 +243,14 @@
providers: [defaultElementTypeProvider(), customProvider({})]
})
this.buildLeftElement()
this.buildDesigner()
if (this.isPrint) {
this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
template: this.template
})
} else {
this.buildLeftElement()
this.buildDesigner()
}
},
methods: {
@@ -280,7 +320,7 @@
// eslint-disable-next-line no-undef
$('#hiprint-printTemplate').empty()
this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
template: {},
template: this.template,
settingContainer: '#PrintElementOptionSetting',
onImageChooseClick: (target) => {
let input = document.createElement('input')
@@ -302,26 +342,11 @@
this.$nextTick(() => {
this.hiprintTemplate.design('#hiprint-printTemplate', {
!this.isPrint && this.hiprintTemplate.design('#hiprint-printTemplate', {
grid: true
})
this.panel = this.hiprintTemplate.printPanels[0]
console.log(this.hiprintTemplate.printPanels[0])
// this.hiprintTemplate.printPanels[0].addPrintText({
// type: 'text',
// data: 'XS888888888',
// options: {
// field: 'barcode',
// testData: 'XS888888888',
// height: 32,
// fontSize: 12,
// lineHeight: 18,
// textAlign: 'left',
// textType: 'barcode',
// hideTitle: true
// }
// })
// this.panel = this.hiprintTemplate.printPanels[0]
})
},
@@ -348,16 +373,12 @@
},
print() {
let options = { leftOffset: 0, topOffset: 0 }
let ext = {
callback: () => {
console.log('浏览器打印窗口已打开')
},
this.hiprintTemplate.print(this.printData)
},
styleHandler: () => {
return '<style></style>'
}
}
// js打印（不显示设计界面）
toPrint (template, printData) {
this.hiprintTemplate.update(template)
this.hiprintTemplate.print(printData)
},
@@ -373,13 +394,13 @@
},
savePdf() {
this.hiprintTemplate.toPdf(printData, '测试导出pdf').then(v => {
this.hiprintTemplate.toPdf(this.printData, '测试导出pdf',{scale:2 }).then(v => {
console.log(v)
})
},
getHtml() {
this.html = this.elementToString(this.hiprintTemplate.getHtml(printData))
this.html = this.elementToString(this.hiprintTemplate.getHtml(this.printData))
this.isShowPreview = true
},

153
src/components/print/template.js
View File

@@ -6,26 +6,8 @@ export default {
"height": 200,
"width": 200,
"paperHeader": 0,
"paperFooter": 566.9291338582677,
"paperFooter": 547,
"printElements": [
{
"options": {
"left": 188,
"top": 36,
"height": 40,
"width": 9,
"right": 219,
"bottom": 144.75,
"vCenter": 214.5,
"hCenter": 99.75,
"coordinateSync": false,
"widthHeightSync": false
},
"printElementType": {
"title": "竖线",
"type": "vline"
}
},
{
"options": {
"left": 253.5,
@@ -44,6 +26,24 @@ export default {
"type": "vline"
}
},
{
"options": {
"left": 188,
"top": 36,
"height": 40,
"width": 9,
"right": 219,
"bottom": 144.75,
"vCenter": 214.5,
"hCenter": 99.75,
"coordinateSync": false,
"widthHeightSync": false
},
"printElementType": {
"title": "竖线",
"type": "vline"
}
},
{
"options": {
"left": 370.5,
@@ -143,11 +143,11 @@ export default {
},
{
"options": {
"left": 187.5,
"left": 253.5,
"top": 37,
"height": 18,
"width": 66,
"title": "Date:",
"width": 117,
"title": "Dec1,2023",
"coordinateSync": false,
"widthHeightSync": false,
"fontFamily": "Microsoft YaHei",
@@ -167,11 +167,11 @@ export default {
},
{
"options": {
"left": 253.5,
"left": 187.5,
"top": 37,
"height": 18,
"width": 117,
"title": "Dec1,2023",
"width": 66,
"title": "Date:",
"coordinateSync": false,
"widthHeightSync": false,
"fontFamily": "Microsoft YaHei",
@@ -527,6 +527,30 @@ export default {
"type": "text"
}
},
{
"options": {
"left": 13.5,
"top": 74.5,
"height": 20,
"width": 103.5,
"title": "Manufacturer：",
"right": 116.25,
"bottom": 112.5,
"vCenter": 64.5,
"hCenter": 103.5,
"coordinateSync": false,
"widthHeightSync": false,
"fontFamily": "Microsoft YaHei",
"fontWeight": "700",
"textContentVerticalAlign": "middle",
"contentPaddingLeft": 3.75,
"qrCodeLevel": 0
},
"printElementType": {
"title": "文本",
"type": "text"
}
},
{
"options": {
"left": 279,
@@ -545,6 +569,24 @@ export default {
"type": "vline"
}
},
{
"options": {
"left": 370.5,
"top": 74.5,
"height": 21,
"width": 9,
"right": 379.9921875,
"bottom": 114.75,
"vCenter": 375.4921875,
"hCenter": 104.25,
"coordinateSync": false,
"widthHeightSync": false
},
"printElementType": {
"title": "竖线",
"type": "vline"
}
},
{
"options": {
"left": 13.5,
@@ -564,48 +606,6 @@ export default {
"type": "hline"
}
},
{
"options": {
"left": 370.5,
"top": 74.5,
"height": 21,
"width": 9,
"right": 379.9921875,
"bottom": 114.75,
"vCenter": 375.4921875,
"hCenter": 104.25,
"coordinateSync": false,
"widthHeightSync": false
},
"printElementType": {
"title": "竖线",
"type": "vline"
}
},
{
"options": {
"left": 13.5,
"top": 74.5,
"height": 20,
"width": 103.5,
"title": "Manufacturer：",
"right": 116.25,
"bottom": 112.5,
"vCenter": 64.5,
"hCenter": 103.5,
"coordinateSync": false,
"widthHeightSync": false,
"fontFamily": "Microsoft YaHei",
"fontWeight": "700",
"textContentVerticalAlign": "middle",
"contentPaddingLeft": 3.75,
"qrCodeLevel": 0
},
"printElementType": {
"title": "文本",
"type": "text"
}
},
{
"options": {
"left": 117,
@@ -1050,16 +1050,12 @@ export default {
},
{
"options": {
"left": 24,
"top": 384,
"left": 21,
"top": 387,
"height": 120,
"width": 292.5,
"elId": "barCode-1729657391988",
"formatter": "function (data, options, templateData) {\n console.log(data, options, templateData);\n const elId = options.elId || 'barCode-' + new Date().getTime();\n const codeWidth = parseInt((options.width - 22) * 0.85);\n options.elId = `${elId}`;\n\n // eslint-disable-next-line no-undef\n $('body').append(`<div id=\"codewrapper-${elId}\" style=\"width: ${codeWidth}pt\">\n <svg id=\"${elId}\" width=\"100%\" display=\"block\" height=\"100%\" class=\"hibarcode_imgcode\" preserveAspectRatio=\"none slice\"></svg>\n </div>`);\n // eslint-disable-next-line no-undef\n JsBarcode('#' + elId, '96778555251', {\n format: \"CODE128B\",\n width: 2,\n height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,\n margin: 0,\n displayValue: false\n });\n\n // eslint-disable-next-line no-undef\n const codeHtml = $(`#codewrapper-${elId}`).html();\n // eslint-disable-next-line no-undef\n $(`body>#codewrapper-${elId}`).remove();\n // eslint-disable-next-line no-undef\n const resizeObserver = new ResizeObserver(() => {\n JsBarcode('#' + elId, '96778555251', {\n format: \"CODE128B\",\n width: 2,\n height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,\n margin: 0,\n displayValue: false\n });\n });\n setTimeout(() => {\n const node = document.getElementById(`temuBarCode-${elId}`);\n if (node) {\n resizeObserver.observe(node);\n }\n }, 0);\n var html = `\n <div class=\"temuBarCode\" id=\"temuBarCode-${elId}\">\n <div class=\"temuBarCode-top\">\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">(AA+AAA)*20PCS</div>\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">AA 20PCS+AAA 20PCS</div>\n </div>\n <div class=\"temuBarCode-middle\">\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code\" style=\"width: 100%\">\n ${codeHtml}\n </div>\n </div>\n <div class=\"temuBarCode-bottom\">\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">1034130097</div>\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">Made in China</div>\n </div>\n </div>\n `;\n return html;\n }",
"right": 289.5,
"bottom": 504,
"vCenter": 156.75,
"hCenter": 444
"width": 316,
"elId": "barCode-1729837262980",
"formatter": "function (data, options, templateData) {\n console.log(data, options, templateData);\n const elId = options.elId || 'barCode-' + new Date().getTime();\n const codeWidth = parseInt((options.width - 22) * 0.85);\n options.elId = `${elId}`;\n\n // eslint-disable-next-line no-undef\n $('body').append(`<div id=\"codewrapper-${elId}\" style=\"width: ${codeWidth}pt\">\n <svg id=\"${elId}\" width=\"100%\" display=\"block\" height=\"100%\" class=\"hibarcode_imgcode\" preserveAspectRatio=\"none slice\"></svg>\n </div>`);\n // eslint-disable-next-line no-undef\n JsBarcode('#' + elId, '96778555251', {\n format: \"CODE128B\",\n width: 2,\n height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,\n margin: 0,\n displayValue: false\n });\n\n // eslint-disable-next-line no-undef\n const codeHtml = $(`#codewrapper-${elId}`).html();\n // eslint-disable-next-line no-undef\n $(`body>#codewrapper-${elId}`).remove();\n // eslint-disable-next-line no-undef\n const resizeObserver = new ResizeObserver(() => {\n JsBarcode('#' + elId, '96778555251', {\n format: \"CODE128B\",\n width: 2,\n height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,\n margin: 0,\n displayValue: false\n });\n });\n setTimeout(() => {\n const node = document.getElementById(`temuBarCode-${elId}`);\n if (node) {\n resizeObserver.observe(node);\n }\n }, 0);\n var html = `\n <div class=\"temuBarCode\" id=\"temuBarCode-${elId}\">\n <div class=\"temuBarCode-top\">\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">(AA+AAA)*20PCS</div>\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">AA 20PCS+AAA 20PCS</div>\n </div>\n <div class=\"temuBarCode-middle\">\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code\" style=\"width: 100%\">\n ${codeHtml}\n </div>\n </div>\n <div class=\"temuBarCode-bottom\">\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">1034130097</div>\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">Made in China</div>\n </div>\n </div>\n `;\n return html;\n }"
},
"printElementType": {
"title": "temu条码",
@@ -1067,11 +1063,12 @@ export default {
}
}
],
"paperNumberLeft": 0,
"paperNumberTop": 520,
"paperNumberLeft": 500,
"paperNumberTop": 530,
"paperNumberDisabled": true,
"paperNumberContinue": true,
"fontFamily": "Microsoft YaHei",
"scale": 1,
"watermarkOptions": {}
}
]