vue打印模版模块，使用vue-plugin-hiprint插件搭建过程

文章目录

• • 概要
  • 安装插件
  • 引入全局样式
  • 引入字体图标库
  • 完整demo
  • 解析-保存模版
  • 解析-左侧的自定义组件
  • 解析-视图容器
  • 解析-打印
  • 文件地址

概要

项目中，我们可能需要实现打印的需求功能，而打印时，用户可以先去编辑打印模版，这样再其他模版，只需要提供数据，就可以使用模版进行打印。

例如：

发货单模版的编辑与使用，如图所示。

安装插件

vue-plugin-hiprint
这里我是通过脚手架的方式进行项目搭建，通过npm的方式安装插件。在package.json查看插件的具体版本。

npm i -S vue-plugin-hiprint

引入全局样式

打印样式print-lock.css必须正确引入
注意：文章里涉及到的一些文件会在文章下方提供下载链接。
注意这里的全局样式一定要正确引入，不然可能会出现一些打印时的样式问题。

引入字体图标库

注意：文章里涉及到的一些文件会在文章下方提供下载链接。
全局CSS引入图标库，不影响代码执行，但是不引入会图标库会不显示图标。

完整demo

index.vue
注意：文章里涉及到的一些文件会在文章下方提供下载链接。
这里提供了完整的模版设计代码，下面会做细节的讲解。

完整demo

<template>
  <div class="flex-col">
    <div
      class="printTitle"
      style="margin-bottom: 10px; background-color: white; padding: 3px 0"
    >
      <h4 style="margin-left: 10px; display: inline-block">
        {
   {
    demo }}模版名称：<el-input
          v-model="input"
          placeholder="请输入标题"
        ></el-input>
      </h4>
      <button class="api circle-10 ml-10" @click.stop="exportJson">
        <i class="iconfont sv-save" />
        保存
      </button>
    </div>
    <div class="flex-row" style="height: 87vh">
      <div class="flex-2 left">
        <div class="flex-row justify-center flex-wrap">
          <div
            id="provider-container2"
            class="container custom-style-types"
          ></div>
          <div class="title">辅助元素</div>
          <div class="ep-draggable-item item" tid="defaultModule.hline">
            <i class="iconfont sv-hline" />
            <span>横线</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.vline">
            <i class="iconfont sv-vline" />
            <span>竖线</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.rect">
            <i class="iconfont sv-rect" />
            <span>矩形</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.oval">
            <i class="iconfont sv-oval" />
            <span>圆形</span>
          </div>
        </div>
      </div>
      <div class="flex-5 center">
        <!-- 设计器的 容器 -->
        <div id="hiprint-printTemplate"></div>
      </div>
      <div class="flex-2 right">
        <!-- 元素参数的 容器 -->
        <div id="PrintElementOptionSetting"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
    hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
import {
    provider3 } from "./provider3";
import {
    provider2 } from "./provider2";
import {
    provider1 } from "./provider1";
import {
    newHiprintPrintTemplate } from "../../utils/template-helper";
import {
    getPrintDetail, savePrint, updatePrint } from "@/api/print";
export default {
   
  props: ["id", "type"],
  name: "start-01",
  data() {
   
    return {
   
      hiprintTemplate: null,
      input: "",
      template: null,
      provider: null,
      demo: "",
    };
  },
  methods: {
   
    /**
     * 构建左侧可拖拽元素
     * 注意: 可拖拽元素必须在 hiprint.init() 之后调用
     * 而且 必须包含 class="ep-draggable-item" 否则无法拖拽进设计器
     */
    buildLeftElement() {
   
      // eslint-disable-next-line no-undef
      hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
      $("#provider-container2").empty(); // 先清空, 避免重复构建
      // eslint-disable-next-line no-undef
      hiprint.PrintElementTypeManager.build(
        $("#provider-container2"),
        "providerModule2"
      );
    },
    buildDesigner() {
   
      if (this.id != 0) {
   
        getPrintDetail({
    id: this.id }).then((res) => {
   
          this.input = res.name;
          this.template = JSON.parse(res.content);
          console.log("temp", JSON.parse(res.content));

          // eslint-disable-next-line no-undef
          $("#hiprint-printTemplate").empty();</