标签制作与打印组件(label-making-print-vue3)

项目介绍

vue3版的标签制作与打印组件，可自定义标签元素与样式，拖拽式添加元素与调整元素位置，支持预览、打印(附件上传打印、递增打印)，根据内容自动分页，利用CLodop打印插件可实现无预览直接打印(静默打印)。

软件架构

技术栈：Vue 3 + TypeScript + Vite + Pinia + CLodop + ElementPlus

演示地址

http://cdxming.com/label/

使用教程

1. 打印插件安装
   CLodop官网：http://www.c-lodop.com/download.html
2. 安装插件与图标：

   npm install label-making-print-vue3  
   npm install @element-plus/icons-vue  
   npm install element-plus

3. 全局注册插件与图标：

   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   import * as ElIcons from '@element-plus/icons-vue'
   import LabelMakingPrint from 'label-making-print-vue3'  
   import 'label-making-print-vue3/label-making-print-vue3.css'  
   
   const app = createApp(App)  
   for (const [key, component] of Object.entries(ElIcons)) {
       app.component(key, component)
   }
   app.use(ElementPlus, { zIndex: 3000 })
   app.use(LabelMakingPrint)  

4. 使用编辑器组件

   <template>
       <div style="height: 100%;">
           <LabelMaking :data="editParams" :clodopKey="clodopKey" :showGoback="true" @saveELementList="saveELementList" @updateTableElement="updateTableElement" @deleteElement="deleteElement" @goback="goback">
               <template #subTitle>
                   副标题
               </template>
           </LabelMaking>
       </div>
   </template>
   
   <script lang="ts" setup>
   import type { ElementParams, TableColumnParams, MakingParams, ClodopKey } from 'label-making-print-vue3'
   import { ref } from 'vue'
   
   const editParams = ref<MakingParams>({
       elements: [],
       template: {
           width: 100,
           height: 100,
           direction: false,
           angle: 0,
           sizeType: 'custom'
       }
   })
   const clodopKey = ref<ClodopKey>({ // CLODOP打印插件的密钥，如果没有，可以不配置，但打印结果会有水印
       secretName: '',
       secretKey: ''
   })
   // 保存元素
   const saveELementList = (elementList: ElementParams[]) => {
       console.log(elementList)
   }
   // 表格元素删除行、列，合并单元格的更新
   const updateTableElement = (item: {delIds: (string | number)[], updateElement: TableColumnParams[]}) => {
       console.log(item)
   }
   // 删除元素
   const deleteElement = (id: string | number) => {
       console.log(id)
   }
   // 返回
   const goback = () => {
       console.log('返回上一页')
   }
   </script>

5. 使用打印组件

   <template>
       <div style="height: 100%;">
           <el-select v-model="params.printer" placeholder="选择打印机" style="width: 300px;">
               <el-option value="Microsoft Print to PDF" label="Microsoft Print to PDF" />
           </el-select>
           <el-button @click="print">print</el-button>
           <el-button @click="preview">preview</el-button>
           <LabelPrint ref="labelPrintRef" :data="params" :clodopKey="clodopKey" @printFail="errorMsg" @printSuccess="successMsg" />
       </div>
   </template>
   
   <script lang="ts" setup>
   import type { printParams, ClodopKey } from 'label-making-print-vue3'
   import { ref } from 'vue'
   
   const labelPrintRef = ref()
   const clodopKey = ref<ClodopKey>({ // CLODOP打印插件的密钥，如果没有，可以不配置，但打印结果会有水印
       secretName: '',
       secretKey: ''
   })
   const params = ref<printParams>({
       name: 'test',
       printType: 'preview',
       printer: '',
       labelParamsTotal: [{
           elements: [
               {
                   "id": "7ad13e927a7d49f7bd55d99f67e11447",
                   "type": "TEXT",
                   "loadingPriority": 1,
                   "description": "文本",
                   "content": "文本",
                   "testContent": "文本",
                   "imageFileURL": "",
                   "qrcodeLogo": "",
                   "fontName": "宋体",
                   "fontSize": 12,
                   "fontWeight": false,
                   "fontItalic": false,
                   "textDecoration": [],
                   "fontSpacing": 0,
                   "fontColor": "#000000",
                   "textAlign": "left",
                   "positionX": 160,
                   "positionY": 101,
                   "relativeElementX": "",
                   "relativeElementY": "",
                   "color": '#000000',
                   "width": 1,
                   "height": 1,
                   "imageWidth": 0,
                   "imageHeight": 0,
                   "barWidth": 1,
                   "barHeight": 30,
                   "barLeftMargin": 1,
                   "barRightMargin": 1,
                   "barTopMargin": 1,
                   "barBottomMargin": 1,
                   "barBackground": "rgba(255, 255, 255, 0)",
                   "barLineColor": "#000000",
                   "qrCorrectLevel": "L",
                   "row": 4,
                   "column": 4,
                   "angle": 0,
                   "widthAlignElement": "",
                   "heightAlignElement": "",
                   "firstRowBackground": "rgba(255, 255, 255, 0)",
                   "oddNumberRowBackground": "rgba(255, 255, 255, 0)",
                   "evenNumberRowBackground": "rgba(255, 255, 255, 0)",
                   "tableBorder": true
               },
           ],
           template: {
               name: '测试模板',
               width: 100,
               height: 100,
               direction: false,
               angle: 0,
               sizeType: 'custom'
           }
       }]
   })
   // 打印
   const print = () => {
       params.value.printType = 'print'
       labelPrintRef.value.print()
   }
   // 预览
   const preview = () => {
       params.value.printType = 'preview'
       labelPrintRef.value.preview()
   }
   // 打印失败的回调
   const errorMsg = (msg: string) => {
       console.log(msg)
   }
   // 打印成功的回调
   const successMsg = () => {
       console.log('打印成功')
   }
   </script>

联系方式

QQ：281323984