kcbpd v1.4.4

kcbpd

简介

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

安装

Vue项目中引用该组件

npm install kcbpd

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

引入

main.js

import Vue from 'vue'
import KrPrintDesigner from 'kcbpd'
import 'kcbpd/lib/kcbpd.css'

Vue.use(KrPrintDesigner)

demo.vue

<template>
  <div id="app">
    <kcbpd :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 参数详解

参数示例：

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

参数说明：

tempValue 为打印模板对象， 对象中参数具体解析如下：

tempValue:

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'
  },
  {
    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,
        isUseSn: '1',
        price: '12.00'
      },
      {
        productName: '苹果ipone11pro',
        skuName: 'iphone11pro124g',
        specModel: '165L',
        quantity: 3,
        isUseSn: '1',
        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:

Style:

braid-image

Attributes:

Style:

braid-html

Attributes:

Style:

braid-html

Attributes:

Style:

columnsAttr:

bar-code

Attributes:

Style:

Events

Methods

setLicenses 方法详解

回调示例：

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

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

licenseInfo 对象值说明：

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