Lodop Print Designer

一个基于 Vue 3、Element Plus、TypeScript 和 Lodop 的打印模板设计器组件库。

✨ 特性

• 🎨 可视化设计打印模板
• 📝 支持文本、图片、表格、条形码等多种元素
• 🖨️ 基于 Lodop 实现高质量打印
• 💪 使用 TypeScript 开发，提供完整的类型定义
• 🎯 支持 Vue 3 Composition API
• 📦 开箱即用的打印解决方案

📦 安装

npm install lodop-vue3-print-designer
# 或
yarn add lodop-vue3-print-designer
# 或
pnpm add lodop-vue3-print-designer

前置依赖：

npm install vue@^3.4.0 element-plus@^2.8.0

🔨 使用

全局注册

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import LodopPrintDesigner from 'lodop-vue3-print-designer'
import 'lodop-vue3-print-designer/dist/lodop-vue3-print-designer.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(LodopPrintDesigner)

app.mount('#app')

组件中使用

<template>
  <div>
    <LodopPrintDesigner
      :temp-value="tempValue"
      :widget-options="widgetOptions"
      @save="handleSave"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tempValue = ref({
  title: '我的模板',
  width: 750,
  height: 550,
  pageWidth: 750,
  pageHeight: 550,
  tempItems: []
})

const widgetOptions = ref([
  {
    type: 'braid-txt',
    title: '文本',
    // ... 更多配置
  }
])

const handleSave = (data) => {
  console.log('保存的模板数据：', data)
}
</script>

按需引入

<template>
  <LodopPrintDesigner
    :temp-value="tempValue"
    :widget-options="widgetOptions"
    @save="handleSave"
  />
</template>

<script setup lang="ts">
import { LodopPrintDesigner } from 'lodop-vue3-print-designer'
import 'lodop-vue3-print-designer/dist/lodop-vue3-print-designer.css'

// ... 其他代码
</script>

使用 Lodop 打印功能

import { getCurrentInstance } from 'vue'
// 或者直接导入
import { lodop } from 'lodop-vue3-print-designer'

// 在组件中使用
const { proxy } = getCurrentInstance()

// 打印预览
await proxy.$lodop.preview(template, data)

// 直接打印
await proxy.$lodop.print(template, data, {
  printerName: 0, // 打印机索引
  copies: 1       // 打印份数
})

// 模板预览（不需要数据）
await proxy.$lodop.previewTemp(template)

// 获取打印机列表
const printers = await proxy.$lodop.getPrinters()

📝 API

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | tempValue | 模板数据 | TempValue | - | | widgetOptions | 可用组件配置 | Array | [] |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | save | 保存模板时触发 | (data: TempValue) => void |

TempValue 类型

interface TempValue {
  title: string        // 模板标题
  width: number        // 画布宽度
  height: number       // 画布高度
  pageWidth: number    // 纸张宽度(mm)
  pageHeight: number   // 纸张高度(mm)
  tempItems: any[]     // 模板元素列表
}

🛠️ 开发

# 克隆项目
git clone https://github.com/your-username/lodop-vue3-print-designer.git

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build

# 发布到 npm
npm publish

📄 依赖

• Vue 3.x
• Element Plus 2.x
• Lodop (需要单独安装 Lodop 打印控件)

⚠️ 注意事项

1. 使用本组件前，需要先安装 Lodop 打印控件
2. Element Plus 需要在项目中单独安装和引入
3. 确保浏览器支持 ES2020+

📜 License

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！

👥 作者

orange