npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tty-print-designer-vue3

v1.0.25

Published

一个基于Vue3、ElementPlus、Lodop的打印模版设计器。实现打印模版的设计、预览和打印功能。

Downloads

16

Readme

tty-print-designer-vue3

简介

一个基于 Vue3、ElementPlus、C-Lodop 的打印模版设计器。实现打印模版的设计、预览和打印功能。

安装

Vue 项目中引用该组件

npm install tty-print-designer-vue3

打印功能基于 C-Lodop 打印控件,需前往下载

引入

main.js

import { CreateApp } from "vue";
import { KrPrintDesignerPlugin } from "tty-print-designer-vue3";
import "tty-print-designer-vue3/lib/tty-print-designer-vue3.css";

const app = CreateApp();

app.use(KrPrintDesignerPlugin);

demo.vue

<template>
  <div id="app">
    <tty-print-designer-vue3
      :temp-value="value"
      :widget-options="widgets"
      :lodop-license="licenseInfo"
      @save="handleSave"
    />
  </div>
</template>

lodop 打印/预览及设置 lodop 注册信息方法使用

// 直接打印
this.$lodop.print(temp, data);

// 预览打印内容
this.$lodop.preview(temp, data);

// 预览打印模版
this.$lodop.previewTemp(temp);

// 设置Lodop产品注册信息
this.$lodop.setLicenses(licenseInfo);

Attributes

| 参数 | 说明 | 类型 | 默认值 | | ------------- | ---------------- | ------ | ------ | | tempValue | 模版对象 | Object | ; | | widgetOptions | 模版设计选项配置 | Array | [] |

tempValue 参数详解

参数示例:

{
  title: 'demo',
  width: 750,
  height: 550,
  pageWidth: 750,
  pageHeight: 550,
  tempItems: [],
}

参数说明:

tempValue 为打印模版对象, 对象中参数具体解析如下:

tempValue:

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | ------------------ | ------ | ------ | ------ | | title | 模版名称 | String | —— | —— | | width | 模版宽度 | Number | —— | 750 | | height | 模版高度 | Number | —— | 550 | | pageWidth | 模版纸张宽度(mm) | Number | —— | 750 | | pageHeight | 模版纸张高度(mm) | Number | —— | 550 | | printerName | 打印机名称 | String | —— | —— | | tempItems | 模版打印项内容 | Array | —— | [] |

widgetOptions 参数详解

参数示例:

[
  {
    type: "braid-txt",
    isEdit: true,
    title: "自定义文本",
    value: "自定义文本",
    defaultValue: "自定义文本"
  },
  {
    type: "braid-txt",
    isEdit: false,
    title: "公司名称",
    value: "{公司名称}",
    defaultValue: "九州科瑞",
    name: "companyName"
  },
  {
    type: "bar-code",
    title: "订单编号(条码)",
    value: "{orderNumber}",
    defaultValue: "1234567890",
    name: "orderNumber"
    lodopStyle: { QRCodeVersion: '1', QRCodeErrorLevel: 'L' },
  },
  {
    type: "braid-html",
    title: "分页",
    value: "{第##页/共##页}",
    defaultValue:
      "<font ><span tdata='pageNO'>第##页</span>/<span tdata='pageCount'>共##页</span></font>"
  },
  {
    type: "braid-image",
    title: "logo",
    value: "http://192.168.7.229/syy/file/files/view/5f9fb42dabebb4049ffbd019"
  },
  {
    type: "braid-table",
    title: "商品明细",
    name: "details",
    value: "{details}",
    defaultValue: [
      {
        productName: "苹果ipone11pro",
        skuName: "iphone11pro256g",
        specModel: "165L",
        quantity: 3,
        price: "12.00"
      },
      {
        productName: "苹果ipone11pro",
        skuName: "iphone11pro124g",
        specModel: "165L",
        quantity: 3,
        price: "12.00"
      }
    ],
    columnsAttr: [
      {
        title: "产品名称",
        value: "{产品名称}",
        name: "productName"
      },
      {
        title: "sku名称",
        value: "{sku名称}",
        name: "skuName"
      },
      {
        title: "规格型号",
        value: "{规格型号}",
        name: "specModel"
      },
      {
        title: "数量",
        value: "{数量}",
        name: "quantity"
      },
      {
        title: "单价",
        value: "{单价}",
        name: "price"
      }
    ]
  }
];

参数说明:

widgetOptions 为设计打印模版的打印项配置, 打印项有多种类型,各种打印项参数具体解析如下:

braid-txt

Attributes:

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------ | | type | 模版类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— | | isEdit | 是否可编辑 | Boolean | true / false | —— | | dragable | 是否可拖拽 | Boolean | true / false | true | | resizable | 尺寸是否可变 | Boolean | true / false | true | | width | 打印项宽度(px) | Number | —— | 120 | | height | 打印项高度(px) | Number | —— | 60 | | left | 左偏移量(px) | Number | —— | 50 | | top | 上偏移量(px) | Number | —— | 0 | | title | 打印项名称 | String | —— | —— | | value | 打印项内容 | String | —— | —— | | defaultValue | 打印项默认内容 | String | —— | —— | | name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' | | lodopStyle | LODOP 默认打印项样式 | Object | —— | {} | | style | 打印项样式 | Object | —— | {} |

Style:

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------- | ------------------ | ------- | -------------------------------------------------------------- | --------- | | zIndex | 层级 | Number | —— | 0 | | FontSize | 字体大小(pt) | Number | —— | 9 | | FontColor | 字体颜色 | String | —— | "#000000" | | Bold | 字体是否加粗 | Boolean | true / false(是 / 否) | false | | Italic | 字体是否设置斜体 | Boolean | true / false(是 / 否) | false | | Underline | 字体是否设置下划线 | Boolean | true / false(是 / 否) | false | | Alignment | 文字对齐方式 | String | "left" / "center" / "right"(左靠齐 / 居中/ 右靠齐) | left | | ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 |

braid-image

Attributes:

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------ | | type | 模版类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— | | isEdit | 是否可编辑 | Boolean | true / false | false | | dragable | 是否可拖拽 | Boolean | true / false | true | | resizable | 尺寸是否可变 | Boolean | true / false | true | | width | 打印项宽度(px) | Number | —— | 120 | | height | 打印项高度(px) | Number | —— | 60 | | left | 左偏移量(px) | Number | —— | 50 | | top | 上偏移量(px) | Number | —— | 0 | | title | 打印项名称 | String | —— | —— | | value | 图片路劲 | String | —— | —— | | defaultValue | 图片默认路劲 | String | —— | —— | | name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' | | lodopStyle | LODOP 默认打印项样式 | Object | —— | {} | | style | 打印项样式 | Object | —— | {} |

Style:

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ---------- | ------ | -------------------------------------------------------------- | ------ | | zIndex | 层级 | Number | —— | 0 | | ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 |

braid-html

Attributes:

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ---------------- | | type | 模版类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— | | isEdit | 是否可编辑 | Boolean | true / false | false | | dragable | 是否可拖拽 | Boolean | true / false | true | | resizable | 尺寸是否可变 | Boolean | true / false | true | | width | 打印项宽度(px) | Number | —— | 120 | | height | 打印项高度(px) | Number | —— | 60 | | left | 左偏移量(px) | Number | —— | 50 | | top | 上偏移量(px) | Number | —— | 0 | | title | 打印项名称 | String | —— | "html" | | value | html 内容 | String | —— | "html" | | defaultValue | 默认 html | String | —— | "html" | | name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' | | lodopStyle | LODOP 默认打印项样式 | Object | —— | {} | | style | 打印项样式 | Object | —— | {} |

Style:

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ---------------------------- | ------- | -------------------------------------------------------------- | ------ | | zIndex | 层级 | Number | —— | 0 | | ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 | | AutoHeight | 是否设置自动高度 | Boolean | true / false(是 / 否) | 0 | | BottomMargin | 打印项距离纸张的下边距(mm) | Number | —— | 0 |

braid-html

Attributes:

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------ | | type | 模版类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— | | isEdit | 是否可编辑 | Boolean | true / false | false | | dragable | 是否可拖拽 | Boolean | true / false | true | | resizable | 尺寸是否可变 | Boolean | true / false | true | | width | 打印项宽度(px) | Number | —— | 240 | | height | 打印项高度(px) | Number | —— | 60 | | left | 左偏移量(px) | Number | —— | 50 | | top | 上偏移量(px) | Number | —— | 10 | | title | 打印项名称 | String | —— | "表格" | | value | 表格数据 | Array | —— | [] | | defaultValue | 表格默认数据 | Array | —— | [] | | columnsAttr | 表格可选列配置 | Array | —— | [] | | name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' | | lodopStyle | LODOP 默认打印项样式 | Object | —— | {} | | style | 打印项样式 | Object | —— | {} |

Style:

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ---------------------------- | ------- | ---------------------------------------------------- | --------- | | zIndex | 层级 | Number | —— | 0 | | FontSize | 字体大小(pt) | Number | —— | 9 | | FontColor | 字体颜色 | String | —— | "#000000" | | BorderColor | 边框颜色 | String | —— | "#000000" | | Alignment | 文字对齐方式 | String | "left" / "center" / "right"(左靠齐 / 居中/ 右靠齐) | 1 | | AutoHeight | 是否设置自动高度 | Boolean | true / false(是 / 否) | 0 | | BottomMargin | 打印项距离纸张的下边距(mm) | Number | —— | 0 |

columnsAttr:

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----- | ------------------------------------------- | ------ | ------ | ------ | | title | 表格列名称 | String | —— | —— | | value | 表格列数据 | String | —— | —— | | name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | —— |

bar-code

Attributes:

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------------ | | type | 模版类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— | | isEdit | 是否可编辑 | Boolean | true / false | false | | dragable | 是否可拖拽 | Boolean | true / false | true | | resizable | 尺寸是否可变 | Boolean | true / false | true | | width | 打印项宽度(px) | Number | —— | 120 | | height | 打印项高度(px) | Number | —— | 60 | | left | 左偏移量(px) | Number | —— | 50 | | top | 上偏移量(px) | Number | —— | 0 | | title | 打印项名称 | String | —— | "条码" | | value | html 内容 | String | —— | "1234567890" | | defaultValue | 默认 html | String | —— | "1234567890" | | name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' | | lodopStyle | LODOP 默认打印项样式 | Object | —— | {} | | style | 打印项样式 | Object | —— | {} |

Style:

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | -------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | zIndex | 层级 | Number | —— | 0 | | FontSize | 字体大小(pt) | Number | —— | false | | ShowBarText | 是否显示条码值 | Boolean | false / true(不显示 / 显示) | 0 | | codeType | 条码类型 | Number | '128A' / '128B' / '128C' / '128Auto' / 'EAN8' / 'EAN13' / 'EAN128A' / 'EAN128B' / 'EAN128C' / 'Code39' / '39Extended' / '2_5interleaved' / '2_5industrial' / '2_5matrix' / 'UPC_A' / 'UPC_E0' / 'UPC_E1' / 'UPCsupp2' / 'UPCsupp5' / 'Code93' / '93Extended' / 'MSI' / 'PostNet' / 'Codabar'/ 'QRCode'/ 'PDF417' | "Code39" | | ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 |

Events

| 事件名称 | 说明 | 回调参数 | | -------- | -------------- | ---------------- | | save | 点击保存时触发 | 设计后的模版对象 |

Methods

| 方法名称 | 说明 | 参数 | | -------- | ------------------ | -------------------------------------------------------- | | initTemp | 手动初始化模版数据 | Function(tempValue: object, widgetOptions:widgetOptions) |

$lodop 对象 Methods

| 名称 | 说明 | 参数 | | -------------- | ------------------------------------ | ---------------------------------- | | print | 对数据和模版解析,实现打印 | Function(temp: object, data:array) | | preview | 对数据和模版解析,实现打印内容的预览 | Function(temp: object, data:array) | | previewTemp | 对模版进行预览 | Function(temp: object ) | | setLicenses | 设置 Lodop 软件产品注册信息 | Function(licenseInfo: object ) | | getPrinterList | 获取Lodop打印机列表 | Function() |

setLicenses 方法详解

回调示例:

let licenseInfo = {
  strCompanyName: "某某某公司",
  strLicense: "******",
  strLicenseA: "",
  strLicenseB: "",
};

// 设置Lodop产品注册信息
this.$lodop.setLicenses(licenseInfo);

licenseInfo 对象值说明:

licenseInfo 为 Lodop 打印软件产品注册信息, 对象中参数具体解析如下:

| 值 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ------------ | ------ | ------ | ------ | | strCompanyName | 注册单位名称 | String | —— | —— | | strLicense | 主注册号 | String | —— | —— | | strLicenseA | 附加注册号 A | String | —— | —— | | strLicenseB | 附加注册号 B | String | —— | —— |