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

fx-print-designer

v1.0.32

Published

一个基于Vue、ElementUi、Lodop的打印模板设计器。实现打印模板的设计、预览和打印功能。基于kx-print-designer 修改自用

Downloads

4

Readme

kr-print-designer

基于kx-print-designer 修改自用版本 npm install fx-print-designer

  • v1.0.0 增加tfoot 的支持
使用方式, 列表数据的值增加`_tfoot_` 作为标记的关键字, 
例: "_tfoot_<span tdata='SubSum' format='0.00'>#########</span>" 该数据内容会作为`tfoot`
  • v1.0.31 增加last 的支持
使用方式, 表格内容用`_last_` 来开头, 
例: "_last_输出的内容" (暂时只支持合并成一行的, 因为只自用, 没时间完善) 
  • v1.0.32 可指定td 的宽度
打印模版数据中:
style: 属性中增加`TableLayout: fixed` // 使用固定td 宽度
columns: 属性中增加`tdWidth: 50` // 指定td 宽度

简介

一个基于 Vue、ElementUi、C-Lodop 的打印模板设计器。实现打印模板的设计、预览和打印功能。示例

安装

Vue 项目中引用该组件

npm install kr-print-designer

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

引入

main.js

import Vue from "vue";
import KrPrintDesigner from "kr-print-designer";
import "kr-print-designer/lib/kr-print-designer.css";

Vue.use(KrPrintDesigner);

demo.vue

<template>
  <div id="app">
    <kr-print-designer
      :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 | | 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 ) |

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 | —— | —— |