dascom-le-editor

标签编辑器组件库，基于 Vue 3 + Fabric.js，支持矩形/圆形/线条/文字/条码/二维码/图片/计数器等元素的设计与编辑。

安装

npm install dascom-le-editor

使用

import 'dascom-le-editor/dist/editor.css'
import editor from 'dascom-le-editor'

// 实例化，传入 html dom + 可选配置参数
const editorInstance = new editor(dom, {
    width: 85.6, // 标签宽度 (mm)，默认 85.6
    height: 54, // 标签高度 (mm)，默认 54
    dpi: 203, // 画布渲染默认 DPI
    showVarnish: true, // 是否显示光油配置面板，默认 false
    showLaser: true, // 是否显示激光配置，默认 false

    layerMaxCount: 1, // 最大图层数(大于1 才展示多图层编辑)，默认 1；文件 JSON 内配置优先
    separateLayerMode: false, // 是否启用分联图层模式，默认 false
    separateLayerCount: 2, // 分联图层数，默认 2
    separateLayerNames: ['上联', '下联'], // 分联图层名称，按图层顺序配置
    visibleMenus: [ // 控制顶部菜单栏显示的分区，不传则全部显示
        'edit', // 编辑
        'view', // 视图
        'tool', // 工具
    ],
    enabledTools: [ // 启用的工具栏组件（白名单），不传则全部启用
        'rect', // 矩形
        'circle', // 圆形
        'line', // 线
        'text', // 文字
        'barcode', // 条码
        'barcode2d', // 二维码
        'image', // 图片
        'counter', // 日期计数器
        'json', // json
        'table' // 表格
        // 'textname',       // 名字
    ],
    disabledTools: ['textname'],  // 另一种用法：禁用指定组件（黑名单）

    disabledMenuItems: ['edit:tagSettings'],  // 隐藏指定二级菜单项（黑名单）
    enabledMenuItems: [ // 启用的二级菜单项（白名单），不传则全部显示；与 disabledMenuItems 同时存在时白名单优先
        // 编辑菜单
        'edit:undo',        // 撤销
        'edit:redo',        // 恢复
        'edit:copy',        // 复制
        'edit:paste',       // 粘贴
        'edit:cut',         // 剪切
        'edit:delete',      // 删除
        'edit:exportImage', // 导出图片
        'edit:tagSettings', // 标签属性设置
        // 视图菜单
        'view:objectProps', // 对象属性
        'view:zoom',        // 缩放
        'view:ruler',       // 标尺
        'view:grid',        // 网格
        // 注意：工具(T) 菜单下的二级菜单项由 enabledTools / disabledTools 控制
    ],
})

// 导出当前画布 JSON
const toExportJson = async () => {
    const json = await editorInstance?.exportJson()
}

// 导入 JSON 数据，新开编辑 tab
const toImportJson = async (fileJson: any) => {
    await editorInstance?.loadJson(fileJson)
}

// 插入当前文件的字段 JSON，供文本/条码/二维码绑定 JSON Key 使用
// 支持传入对象或合法 JSON 字符串；写入成功或已排队等待写入返回 true，入参非法返回 false
// 如果调用时当前 tab 还未初始化完成，编辑器会在 active tab 创建后自动写入最后一次传入的数据
const toInsertFileFieldJson = () => {
    const success = editorInstance?.insertFileFieldJson({
        name: '张三',
        code: 'A001',
        license: 'ISC',
    })
}

// 导出当前画布图片
const toExportImage = async () => {
    const data = await editorInstance?.getImage()
}

// 统一导出入口：支持当前画布 / JSON、合并 / 独立图层、双联横向拼接
// 默认返回 string；独立图层模式返回 { images: string[], composedImage: string }
const exportMergedImage = async () => {
    const data = await editorInstance.exportImage({ mode: 'merged' })
}
const exportSeparateImages = async () => {
    const data = await editorInstance.exportImage({
        mode: 'separate',
        layout: 'doubleRibbons',
        gap: 50,
    })
    const layerImages = data.images
    const composedImage = data.composedImage
}

// 销毁编辑器实例, 页面卸载 / 重新创建前必须调用
editorInstance.destroy()

// 设置图层最大数量，非分联模式下生效
editorInstance.setLayerMaxCount(count: number | string)

// 设置是否启用分联图层模式
// 开启后会自动启用多图层，并使用初始化配置里的 separateLayerCount / separateLayerNames
editorInstance.setSeparateLayerMode(isOpen: boolean)

// 双联模式 获取双联拼接后的图片
const getDoubleRibbonsImage = async ()=>{
   let data = await editorInstance.getDoubleRibbonsImage()
}

// 快速进入双联模式，图层名称默认为「上联」「下联」
editorInstance.enterDoubleRibbons()

// 更新分联图层配置，仅在分联模式开启时同步到已打开的 tab
editorInstance.setSeparateLayerConfig({
    count: 2,
    names: ['上联', '下联'],
})

// 是否展示打开文件栏
editorInstance.toggleEditTabs(isShow: boolean)

// 开启自动保存
editorInstance.openAutoSave((data) => {

}, 10000)

interface fontItem {
    name: string,
    url ? : string
}
// fontItem 里有 url，则会自动加载 load 对应url 字体到 页面document
// 默认字体列表增加自定义字体
editorInstance.addCustomFontList(fontItem[])

// 替换整个字体列表
editorInstance.replaceFontList(fontItem[])

// 编辑器切换使用字体回调
editorInstance.selectFontCallback(fn(fontNameList: string[]))

// 编辑器加载字体
editorInstance.loadFontFile(data: {
    fontName: string;blob: Blob
})
// 替换cmd 格式
type cdmsTemp = [
{
    "cmd": "ReplaceContent",
    "name": "姓名",
    "content": "张三"
 }
]
interface LoadJsonToImageBase64Options {
    /** 导出前用于替换 canvas json 内容的命令 */
    cmds ? : cdmsTemp[];
    /** 导出超时时间，默认 5000ms */
    timeout ? : number;
    /** 是否返回完整 dataURL；默认 true，返回完整 dataURL */
    returnDataUrl ? : boolean;
    /** 画布dpi，不传则用文件的 dpi  */
    dpi ? : number;
    // 标签宽度 (mm)
    width ? : number;
    // 标签高度 (mm)
    height ? : number;
    /** 多图层导出模式，merged 合并，separate 独立 */
    mode ? : 'merged' | 'separate';
    /** separate 时 composedImage 使用横向拼接 */
    layout ? : 'auto' | 'doubleRibbons';
    /** 横向拼接间距，默认 50px */
    gap ? : number;
}
async function getImagePreview() {
    // 加载json导出 预览图， data为文件json
    let data = await editor.loadJsonToImageBase64(data: fileJson,
    config: LoadJsonToImageBase64Options)
}
async function exportJsonSeparateImages() {
    let data = await editor.exportImage({
        data: fileJson,
        mode: 'separate',
        layout: 'doubleRibbons',
    })
    const layerImages = data.images
    const composedImage = data.composedImage
}

二级菜单项 key 参考

通过 enabledMenuItems（白名单）或 disabledMenuItems（黑名单）控制二级菜单项的显示/隐藏，两者同时存在时白名单优先。工具(T) 菜单下的二级菜单项由 enabledTools / disabledTools 控制，无需在此重复配置。

| 分区 | key | 菜单项 | | ---- | --- | ------ | | 编辑 | edit:undo | 撤销 | | 编辑 | edit:redo | 恢复 | | 编辑 | edit:copy | 复制 | | 编辑 | edit:paste | 粘贴 | | 编辑 | edit:cut | 剪切 | | 编辑 | edit:delete | 删除 | | 编辑 | edit:exportImage | 导出图片 | | 编辑 | edit:tagSettings | 标签属性设置 | | 视图 | view:objectProps | 对象属性 | | 视图 | view:zoom | 缩放（含子菜单：放大/缩小/自动缩放） | | 视图 | view:ruler | 标尺（含子菜单：可见） | | 视图 | view:grid | 网格（含子菜单：可见） |