关于javascript:vuepluginhiprint使用进阶篇

置信你看了【vue-plugin-hiprint】应用 - 入门篇 曾经晓得了如何引入及构建设计器了。本 进阶篇 教大家如何进一步的构建设计器，包含 第二种构建可拖拽元素 (provider)、vue3 组合式函数、 罕用 API 及如何查看可用 API等。

源码链接: https://github.com/CcSimple/vue-plugin-hiprint-start

1. 编写 provider 并 构建

这里将创立两个 provider 文件，用于演示如何在两个不同 容器 中去构建可拖拽元素。

1.1 创立 provider

首先创立provider，间接上代码：

// provider1.js
import {hiprint} from "vue-plugin-hiprint";
export const provider1 = function (options) {console.log(options);
  var addElementTypes = function (context) {context.removePrintElementTypes("providerModule1");
    context.addPrintElementTypes("providerModule1", [
      new hiprint.PrintElementTypeGroup("惯例", [
        // 留神这里，应用了传入的 options.config
        options.config,
        {
          tid: "providerModule1.header",
          title: "单据表头",
          data: "单据表头",
          type: "text",
          options: {
            testData: "单据表头",
            height: 17,
            fontSize: 16.5,
            fontWeight: "700",
            textAlign: "center",
            hideTitle: true,
          },
        },
        // 此处省略....
      ])
    };
  return {addElementTypes: addElementTypes,};
};

代码过长，各位看源码吧~ 😄

如果你不分明怎么编写provider，请看【vue-plugin-hiprint】如何自定义可拖拽元素 provider

1.2 编写 html

html 绝对简略，只需注意 容器 id及 款式 即可。

<div class="flex-2 left flex-col">
  <div class="title">provider1 默认款式 </div>
  <!-- provider1 的容器; 加上 class "rect-printElement-types" 应用默认款式 -->
  <!-- 当然能够 重写 或者 自定义款式 -->
  <div id="provider-container1" class="container rect-printElement-types"></div>
  <div class="title">provider2 自定义款式 </div>
  <!-- provider2 的容器; -->
  <!-- 这里自定义显示款式 custom-style-types -->
  <div id="provider-container2" class="container custom-style-types"></div>
  <div class=""></div>
</div>

1.3 初始化并构建

筹备工作已实现，当初即可开始真正的 构建可拖拽元素。

import {onMounted} from "vue";
import {hiprint} from "vue-plugin-hiprint";
import {provider1} from "./provider1";
import {provider2} from "./provider2";

// 自定义传入 provider 的参数
let options = {
  config: {
    tid: "providerModule1.header",
    title: "参数 provider 示例",
    type: "text",
    options: {
      testData: "单据表头",
      height: 30,
      fontSize: 16,
    },
  },
};
// 初始化 provider
hiprint.init({providers: [provider1(options), provider2(options)],
});
// 为什么要在 onMounted 中执行？(你应该分明了吧)
onMounted(()=>{buildLeftElement();
})
/**
 * 构建左侧可拖拽元素
 * 留神: 可拖拽元素必须在 hiprint.init() 之后调用
 * 调用之前 能够先 console.log($("#provider-container1")) 看看是否有该 dom
 */
const buildLeftElement = () => {
  // ----- providerModule1 -----
  $("#provider-container1").empty(); // 先清空, 防止反复构建
  // 应用 providerModule1 去填充到 $("#provider-container1") 容器中
  hiprint.PrintElementTypeManager.build($("#provider-container1"), "providerModule1");
  // ----- providerModule2 -----
  $("#provider-container2").empty(); // 先清空, 防止反复构建
  // 应用 providerModule2 去填充到 $("#provider-container2") 容器中
  hiprint.PrintElementTypeManager.build($("#provider-container2"), "providerModule2");
};

OK，到这里，构建可拖拽元素 胜利，咱们将失去如下效果图：

2. 构建带默认元素的设计器

2.1 创立打印模板 json

这个打印 模板 json就是设计器的默认元素。首先先理解一下它的格局：

const template = 
// 蕴含一个“panels”及 hiprint 中的“面板”{//“面板”是一个数组，(反对多面板)
  panels: [
    // 面板 0，蕴含 宽、高、打印元素、页眉、页脚等重要信息。{
      index: 0, // 面板下标
      height: 297, // 纸张 高 (mm)
      width: 210, // 纸张 宽 (mm)
      paperHeader: 49.5, // 页眉 (pt)
      paperFooter: 780, // 页脚 (pt)
      printElements: [ // 打印元素, 数组
        // 打印元素
        {
          // 打印元素 参数
          options: {left: 60, top: 27, height: 13, width: 52, title: "页眉线"},
          // 打印元素 类型
          printElementType: {title: "自定义文本", type: "text"},
        },
      ], 
      paperNumberLeft: 565.5, // 页码地位 left (pt)
      paperNumberTop: 819, // 页码地位 top (pt)
    },
  ],
};
export default template;

失常状况，咱们不会手动去创立 模板 json，而是通过 拖拽设计 ，而后调用hiprintTemplate 对象的 getJson Api 来获取该 模板 json。

留神： 这个 模板 json理论应是一个 JSON Object，确保外部可能应用 object.key 拿到对应数据。

2.1 通过模板 json 构建设计器

如何 构建设计器 呢，这里咱们再 累述 一下。

首先插入一段 html 如下：

<div class="flex-5 center">
  <!-- 设计器的 容器 -->
  <div id="hiprint-printTemplate"></div>
</div>

而后在对应机会去 构建(design)

<script setup>
import {onMounted} from "vue";
import {hiprint} from "vue-plugin-hiprint";
import template from "./template"; // 引入默认模板 json

// 为什么要在 onMounted 中执行？(你应该分明了吧)
onMounted(() => {buildDesigner();
});

let hiprintTemplate;
// ref 创立的模板 json（很多小伙伴的踩坑记录）const templateRef = ref(template);
console.log("templateRef 数据格式:");
console.log("templateRef", templateRef);
console.log("templateRef.value", templateRef.value);
// 注意事项: 模板 json(object)
// 如果应用 vue ref 创立的模板 json, 须要应用 .value 获取 (确保外部可能应用 object.key 拿到对应数据就行)

/**
 * 构建设计器
 * 调用之前 能够先 console.log($("#hiprint-printTemplate")) 看看是否有该 dom
 */
const buildDesigner = () => {$("#hiprint-printTemplate").empty(); // 先清空, 防止反复构建
  hiprintTemplate = new hiprint.PrintTemplate({// 如果应用 vue ref 创立的模板 json, 须要应用 .value 获取 (确保外部可能应用 object.key 拿到对应数据就行)
    template: templateRef.value, // 模板 json(object)
    settingContainer: "#PrintElementOptionSetting", // 元素参数容器
  });
  // 构建 并填充到 容器中
  hiprintTemplate.design("#hiprint-printTemplate");
};
</script>

留神: 如果应用 vue ref 创立的 模板 json, 须要应用 .value 获取 (确保外部可能应用 object.key 拿到对应数据就行)

当执行完 design 后，咱们将看到如下：

3. 罕用 API 的应用

这里应用了 vue3 组合式函数 ，封装了一下如何创立及获取对应 模板对象 。不便再 组合式函数 调用相干的 API，代码如下：

import {hiprint} from "vue-plugin-hiprint";
// 寄存 ` 模板对象 `
const templateMap = {};
// 创立
export function newHiprintPrintTemplate(key, options) {let template = new hiprint.PrintTemplate(options);
  templateMap[key] = template;
  return template;
}
// 获取
export function getHiprintPrintTemplate(key) {return templateMap[key];
}

将上一步（2.1 通过模板 json 构建设计器）中的 buildDesigner 调整成：

// 一个惟一名称而已
const TEMPLATE_KEY = "start-02"
const buildDesigner = () => {
  // ** 省略局部 **
  hiprintTemplate = newHiprintPrintTemplate(TEMPLATE_KEY, {template: templateRef.value, // 模板 json(object)
    settingContainer: "#PrintElementOptionSetting", // 元素参数容器
  });
  // ** 省略局部 **
};

3.1 调整纸张大小和缩放

在 hooks 目录创立use-paper.js（调整纸张大小）和use-zoom.js（缩放面板）。

3.1.1 创立组合式函数

use-paper.js 示例：

import {reactive, computed, toRefs} from "vue";
import {getHiprintPrintTemplate} from "../utils/template-helper";

/**
 * vue3 组合式函数
 * 把一些逻辑抽离进去，不便复用
 * 返回 应用方 可用的办法和数据
 */
export function usePaper(key) {
  // ** 省略局部 **
  // 获取创立的 "模板对象"
  const tp = () => {return getHiprintPrintTemplate(key);
  };
  // ** 省略局部 **
  const setPaper = (type, value) => {
    try {if (Object.keys(state.paperTypes).includes(type)) {state.curPaper = { type: type, width: value.width, height: value.height};
        tp().setPaper(value.width, value.height);
      } else {state.curPaper = { type: "other", width: value.width, height: value.height};
        tp().setPaper(value.width, value.height);
      }
    } catch (error) {alert(` 操作失败: ${error}`);
    }
  };
  // ** 省略局部 **
  // 裸露给应用方
  return {...toRefs(state),
    curPaperType,
    showPaperPop,
    hidePaperPop,
    setPaper,
    setPaperOther,
  };
}

组合式函数 解决完了，咱们只须要在应用的第一，引入对应的办法即可

3.1.2 应用组合式函数

首先编写 html：

<div class="paper">
  <!-- 纸张大小 A3、A4 等 -->
  <template v-for="(value, type) in paperTypes" :key="type">
    <button :class="curPaperType === type ?'api':'info'"@click="setPaper(type, value)">
      {{type}}
    </button>
  </template>
  <!-- 自定义纸张 -->
  <button :class="'other' == curPaperType ? 'api' : 'info'" class="auto" @click="showPaperPop"> 自定义纸张 </button>
  <!-- 自定义纸张 popover -->
  <div class="popover">
    <div class="popover-content flex-col" v-show="paperPopVisible">
      <div style="font-size: 16px; font-weight: bold"> 设置纸张宽高(mm)</div>
      <div class="flex-row mt-10">
        <input class="input" :value="paperWidth" type="number" placeholder="宽(mm)" />
        <span class="ml-10 mr-10">x</span>
        <input class="input" :value="paperHeight" type="number" placeholder="高(mm)" />
      </div>
      <button class="primary circle-10" style="margin-top: 6px" @click.stop="setPaperOther"> 确定 </button>
    </div>
  </div>
</div>
<!-- 缩放 此处省略 -->

如上方 html，咱们须要 数据 ：paperTypes，curPaperType 等，须要 函数 ：setPaper，setPaperOther 等。咱们曾经在 use-paper.js 中解决了，所以当初只须要引入即可：

// 组合式函数 hooks
import {usePaper} from "../hooks/use-paper";
import {useZoom} from "../hooks/use-zoom";

const TEMPLATE_KEY = "start-02"; // 存储模板对象的 key

// 引入须要的 数据 和 函数
const {paperTypes, curPaperType, paperPopVisible, paperWidth, paperHeight, showPaperPop, setPaper, setPaperOther} = usePaper(TEMPLATE_KEY);
// 缩放的 组合式函数
const {scaleValue, changeScale} = useZoom(TEMPLATE_KEY);

引入过后，就能够失常调用相干性能了。这样把 局部业务代码 抽离进去 ，单文件不那么 臃肿 ，咱们后续 再写相干性能 的时候，间接引入即可。

3.2 旋转纸张和清空元素

• rotatePaper() 旋转纸张 就是把现有纸张的 宽高对调；
• clear() 清空元素 就是清空现有设计器中的元素；

代码如下：

/**
 * 旋转纸张
 */
const rotatePaper = () => {hiprintTemplate.rotatePaper();
};
/**
 * 清空所有元素
 */
const clearPaper = () => {hiprintTemplate.clear();
};

3.2 导出模板 json

• getJson() 导出所有 json
• getJsonTid() 导出局部 json

其中getJsonTid() 就是仅导出 options, 不导出 printElementType，一些其余数据须要再 provider 中获取，所以一点要先 init 对应的 provider。

代码如下：

/**
 * 导出模板 json
 * 必须确保 hiprintTemplate 已胜利创立
 */
const exportJson = () => {let json = hiprintTemplate.getJson();
  console.log(json);
  alert("导出胜利! 请查看控制台输入");
};
/**
 * 导出模板 json tid
 * 仅导出 options, 不导出 printElementType
 * 必须确保 hiprintTemplate 已胜利创立
 */
const exportJsonTid = () => {let json = hiprintTemplate.getJsonTid();
  console.log(json);
  alert("导出胜利! 请查看控制台输入");
};

篇幅无限，不可能把所有罕用的 API 都一一解说。俗话说：授人以鱼，不如授之以渔。

4. 如何查看有什么 API

首先你得理解 对象的构造 和什么是 原型链 。这里必定不会讲滴~ 要学会本人去 查阅材料😄

提醒: 接下来步骤将在 开发人员工具 /JavaScript 控制台 中操作。笔者应用的是 Microsoft Edge。操作门路：点击 工具 菜单，而后选中 开发人员 中的 开发人员工具 /JavaScript 控制台。如下图：

OK，废话不多说。先看 模板对象 hiprintTemplate 的构造。

4.1 模板对象的构造

let hiprintTemplate = new hiprint.PrintTemplate();
console.log(hiprintTemplate);

咱们先来尝试一下，传上图看到的一些参数：

let hiprintTemplate = new hiprint.PrintTemplate({
  dataMode: 2, // 1:getJson 其余：getJsonTid 默认 1
  history: false, // 是否须要 撤销重做性能
  onDataChanged: (type, json) => {console.log(type); // 新增、挪动、删除、批改(参数调整)、大小、旋转
    console.log(json); // 返回 template
  },
});
console.log(hiprintTemplate);

嘿嘿，很显著，这几个参数是有作用的呢。

咱们再试试，传入一个 模板 json：

let template = {panels:[] }; // 这里代码省略，记得本人试一试哟~
let hiprintTemplate = new hiprint.PrintTemplate({template: template});
console.log(hiprintTemplate);

好了，置信看到这里，对于 模板对象 的构造 你肯定曾经有所理解了。接下来就是 API 了。

4.2 模板对象的 API

看了几张图，咱们还没有看到罕用 API，如 setPaper，zomm，getJson 等等，那它应该在哪里呢？管它呢，没找到就先东点西点看看看呗 😄, 当咱们点开最初一个 `[[Prototype]]
时，你将发现 新大陆 `：

如上图，咱们罕用的 API 如同都在这里了呢。

新大陆已发现，不摸索一下，怎么行呢？

就好比在 新大陆 看到了很多 树，那 树上有些什么 怎么看 呢？

4.2.1 查看 API 源码

咱们以 setPaper API 为例，带大家来 一探到底：

咱们能够分明看到这个 setPaper 须要传两个参数，而后前面又一个 `[[FunctionLocation]]
它后是个 链接 的模式，是能够点击。FunctionLocation翻译过去就是 函数地位 `，那么很显著了吧，咱们就要从这里开始~

不要慌，想想咱们 次要的目 的是 看什么？分明了目标是vue-plugin-hiprint，咱们找一找呗~

皇天不负有心人，可算在这里找到你了：

当咱们 格式化代码 后，哈哈，难看多了嘛。咱们再回到先前的 `[[FunctionLocation]]
，再次点击这个 链接 `

欧克欧克，终于看到了 API 源码 啦~

好了，对于 如何查看有什么 API就到这里了。至于源码做了些什么，就 须要各位自行摸索了。

此处能够说是 网页调试 相干的一些内容，如果你不会 浏览器调试技巧，那么连忙科普科普去吧~

总结

• 本篇再次 赘述 了 provider 和 设计器 的构建，心愿大家可能很分明的去 构建渲染
• 理解 vue3 的 组合式函数 应用场景
• 通过罕用的 API 疏导大家去摸索 模板对象 的构造
• 手把手 的教大家 如何去摸索 更多的 模板对象 API

进阶篇 到此结束，有些 不分明 的知识点 ，大家 肯定要学会本人查阅相干材料。

欢送各位码友 转发 及留言反馈 ，感觉不错就 点个赞 再走咯~