lodop-print-designer v1.0.9

lodop-print-designer

关于此插件

lodop-print-designer(基于kr-print-designer) 只是为了方便我在vue项目中使用，所以以此命名。

由于kr-print-designer最后一次更新时间为2021年，因为我需要的一些功能原插件并没有，基于此我进行了二次开发。

简介

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

安装

Vue 项目中引用该组件

npm install lodop-print-designer

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

引入

main.js

import Vue from "vue";
import LodopPrintDesigner from "lodop-print-designer";
import "lodop-print-designer/lib/lodop-print-designer.css";

Vue.use(LodopPrintDesigner);

demo.vue

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

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

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

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

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

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

// 获取打印机列表，可根据IP获取远程电脑上的打印机
ip参数为选填，默认为本机127.0.0.1
this.$lodop.getPrinters(ip).then(res=> {
  console.log('打印机列表--->', res)
})

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: "vertical-line",
    title: "竖线",
    name: ""
  },
  {
    type: "horizontal-line",
    title: "横线",
    name: ""
  },
  {
    type: "braid-txt",
    title: "当前时间",
    value: "{YYYY-MM-DD HH:mm:ss}",
    defaultValue: '',
    width: 150,
    height: 20,
    name: "_getNowTime"
  },  
  {
    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: "_seq"
      },
      {
        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

\$lodop 对象 Methods

setLicenses 方法详解

回调示例：

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

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

licenseInfo 对象值说明：

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