kr-print-designer 教程及demo示例

组件介绍：kr-print-designer: 一个基于Vue、ElementUi、Lodop的打印模板设计器。实现打印模板的设计、预览和打印功能。

写了一个简单的demo

组件：

<template>

  <div id="app">
    <el-dialog title="打印" :visible.sync="visible" width="1200px" append-to-body>
      <el-tag>模板管理</el-tag>
      <el-table :data="templateList" :key="templateTableKey">
        <el-table-column label="模板名称" align="center" prop="title"/>
        <el-table-column label="模板类型" align="center" prop="type"/>
        <el-table-column label="模板宽高" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.width + ' * ' + scope.row.height}}</span>
          </template>
        </el-table-column>
        <el-table-column label="纸张大小" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.pageWidth + 'mm * ' + scope.row.pageHeight + 'mm'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center">
          <template slot="header" slot-scope="scope">
            <el-button type="primary" @click="createTemplate">创建模板</el-button>
          </template>

          <template slot-scope="scope">
            <a style="color: #1c84c6" @click="designTemplate(scope.row, scope.$index)">设计</a>
            <a style="color: #1c84c6; margin-left: 8px" @click="previewTemplate(scope.row)">预览</a>
            <a style="color: #1c84c6; margin-left: 8px">复制新增</a>
          </template>
        </el-table-column>
      </el-table>
      <el-tag style="margin-top: 20px">模板打印</el-tag>
      <el-row>
        <el-col :span="10">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="打印模板" prop="name">
              <el-select v-model="form.name" placeholder="请选择" @change="templateChg">
                <el-option
                  v-for="item in templateList"
                  :key="item.title"
                  :label="item.title"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="5">
          <el-button type="primary" @click="printPreview">打印预览</el-button>
          <el-button type="success">直接打印</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog title="添加模板" :visible.sync="addOpen" width="500px" append-to-body>
      <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="80px">
        <el-form-item label="模板名称" prop="title">
          <el-input v-model="addForm.title"/>
        </el-form-item>
        <el-form-item label="模板类型" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板宽度" prop="width">
          <el-input-number v-model="addForm.width" :min="0" :precision="2"/>
        </el-form-item>
        <el-form-item label="模板高度" prop="height">
          <el-input-number v-model="addForm.height" :min="0" :precision="2"/>
        </el-form-item>
        <el-form-item label="纸张宽度" prop="pageWidth">
          <el-input-number v-model="addForm.pageWidth" :min="0" :precision="2"/>
        </el-form-item>
        <el-form-item label="纸张高度" prop="pageHeight">
          <el-input-number v-model="addForm.pageHeight" :min="0" :precision="2"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="设计模板" :visible.sync="flag" width="1100px" append-to-body>
      <kr-print-designer
        :temp-value="value"
        :widget-options="widgets"
        :lodop-license="licenseInfo"
        @save="handleSave"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Print",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
    // value: '',
    // widgets: '',
    // licenseInfo: ''
  },
  data() {
    return {
      flag: false,
      form: {},
      addOpen: false,
      addForm: {},
      addRules: {
        title: [
          { required: true, message: '请输入模板名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择模板类型', trigger: 'change' }
        ],
        width: [
          { required: true, message: '请输入模板宽度', trigger: 'change' }
        ],
        height: [
          { required: true, message: '请输入模板高度', trigger: 'change' }
        ],
        pageWidth: [
          { required: true, message: '请输入纸张宽度', trigger: 'change' }
        ],
        pageHeight: [
          { required: true, message: '请输入纸张高度', trigger: 'change' }
        ]
      },
      templateList: [],
      templateTableKey: 0,
      options: [{label: "出库单示例", value: "出库单示例"}],
      typeOptions: [{label: "出库单", value: "出库单"}, {label: "入库单", value: "入库单"}],
      value: {
        title: null, //模板名称
        width: 0, //模板宽度
        height: 0, //模板高度
        pageWidth: 0, //模板纸张宽度（mm）
        pageHeight: 0, //	模板纸张高度（mm）
        tempItems: [], //模板打印项内容
      },
      widgets: [
        {
          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"
            }
          ]
        }
      ],
      licenseInfo: {
        strCompanyName: 'xxx有限公司',
        strLicense: 'ab123456789',
        strLicenseA: 'bb123456',
        strLicenseB: 'cc123456'
      },
      data: [{companyName: "AGGKA"}],
      index: null,
      template: null
    }
  },
  methods: {
    createTemplate() {
      this.addOpen = true;
    },
    onSubmit() {
      this.$refs["addForm"].validate(valid => {
        if (valid){
          this.templateList.push({
            ...this.addForm,
            tempItems: []
          })
          this.addForm = {
            title: null,
            type: null,
            width: 0,
            height: 0,
            pageWidth: 0,
            pageHeight: 0,
          }
          this.resetForm("addForm");
          this.addOpen = false;
          this.$modal.msgSuccess("添加成功");
        }
      })
    },
    designTemplate(row, index){
      this.value = row;
      this.index = index;
      this.flag = true;
    },
    handleSave(e) {
      console.log(e)
      if (this.index != null){
        this.templateList[this.index] = e;
        this.value = {
          title: null,
          width: 0,
          height: 0,
          pageWidth: 0,
          pageHeight: 0,
          tempItems: [],
        };
        this.index = null;
        this.flag = false;
        this.templateTableKey++;
        this.$modal.msgSuccess("保存成功");
      }else {
        this.$modal.msgError("保存失败");
      }
    },
    templateChg(e) {
      console.log(e);
      this.template = e;
    },
    previewTemplate(row) {
      this.$lodop.previewTemp(row);
    },
    printPreview(){
      this.$lodop.preview(this.template, this.data);
    }
  }
}
</script>

<style scoped>

</style>

导入组件使用：

<template>
  <div class="app-container">
     <el-button
          type="success"
          plain
          size="mini"
          @click="handlePrintOpen"
        >打印</el-button>
     <Print :visible="printOpen"/>
  </div>
</template>

<script>
import Print from "@/views/components/print";

export default {
  name: "Reqorder",
  components: { Print }
  data() {
    visible: false
  },
  methods: {
     handlePrintOpen() {
      this.printOpen = true;
    }  
  }
}
</script>

效果图及流程演示：

1.点击创建模板

2.输入信息点击确定后加入表格中

3.点击设计进入设计模板界面

4.点击保存后返回表格选择打印模板，点击打印预览之后就可以直接打印了