vue-lodop-print v1.0.14

vuePrint

简介

首先感谢大佬（https://github.com/myliuxia/kr-print-designer）提供的开源模板，基于原作者基础上新增图标打印和一些其他细微更改。基于原模板以及VUE、LODOP、ElementUi、进行二次开发，实现的打印模板自定义,具体使用方法参照原作者，本模块只为公司项目提供。

安装

Vue项目中引用该组件

npm install vue-lodop-print

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

引入

main.js

import Vue from 'vue'
import VueLodopPrint from 'vue-lodop-print'
import 'vue-lodop-print/lib/vue-lodop-print.css'

Vue.use(VueLodopPrint)

demo.vue

<template>
  <div id="app">
    <vue-lodop-print />
  </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: [],
  IconItems: []
}

参数说明：

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

tempValue:

iconOptions 参数详解

参数示例：

[{
    type: "braid-icon",
    isEdit: 1,
    title: "表单icon",
    value: "表单icon",
    defaultValue: "表单icon",
    name: "icon-1",
    class: "icon-biaodan"
  },...]

参数说明：

iconOptions 为图标配置项， 是一个数组对象，可根据项目需求在阿里icon库中添加图标，具体解析如下：

iconOptions:

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,
        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:

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 打印软件产品注册信息， 对象中参数具体解析如下：