关于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.jsimport { 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,    },  },};// 初始化 providerhiprint.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中解决了，所以当初只须要引入即可：

// 组合式函数 hooksimport { 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

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

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

1.编写 provider 并 构建