基于 kr-print-designer 新增了一些 props 参数

具体文档查看 https://github.com/myliuxia/kr-print-designer

// 自定义新增参数
// 是否显示 components/Panel/page.vue 的纸张宽度和高度
    pageWHShow: {
      type: Boolean,
      default: true,
    },
    // 是否禁用 components/Panel/page.vue 的模板 宽度和高度的输入
    templateWHDisabled: {
      type: Boolean,
      default: false,
    },
    // 预览按钮是否显示
    previewBtnShow: {
      type: Boolean,
      default: true,
    },
    // 是否显示components/Panel/style.vue 当前组件的 x，y 坐标和宽高
    xyShow: {
      type: Boolean,
      default: false,
    },
    // 是否显示 components/Panel/page.vue 纸张宽高选择框
    pageSelectShow: {
      type: Boolean,
      default: false
    },
    // 纸张大小选择列表数据 components/Panel/page.vue 纸张宽高选择框
    pageSizeDataList: {
      type: Array,
      default() {
        return [{width: 225, height: 150}]
      }
    },
    // 是否禁用 components/Panel/page.vue 的纸张 宽度和高度的输入
    pageWHDisabled: {
      type: Boolean,
      default: false,
    },

简介

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

不支持 vue3

安装

Vue2 项目中引用该组件

npm install zx-lodop-vue2-plugin

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

引入

main.js

import Vue from "vue";
import KrPrintDesigner from "zx-lodop-vue2-plugin";
import "zx-lodop-vue2-plugin/lib/zx-lodop-vue2-plugin.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>