Sv-print

https://www.ibujian.cn/svp/
Admin
Sv-print is a Svelte-based print designer component built on hiprint, enabling drag-and-drop design,...
Tokens:111,565
Snippets:455
Trust Score:3.8
Update:4 weeks ago
Show doc for...
Tokens:
Raw
### goBack API example

Source: https://www.ibujian.cn/svp/changelog.html

Demonstrates using the goBack method on hiprintTemplate to navigate to a specific history position.

```javascript
// 回到指定历史记录位置
hiprintTemplate.goBack(2);
```

--------------------------------

### Vanilla JS: Import and use sv-print Designer

Source: https://www.ibujian.cn/svp/a01.html

Vanilla JavaScript example using the Designer from 'sv-print'. Instantiate with a target container and template prop, then listen for the onDesigned event to access hiprint, designerUtils, and designerUtils.printTemplate.

```javascript
import { Designer } from 'sv-print';

const designer = new Designer({
  target: document.body, // 容器
  props: {
    template: {},
  },
});

designer.$on('onDesigned', (e) => {
  console.log('onDesigned');
  console.log(e);
  const { hiprint, designerUtils } = e.detail;
  console.log(hiprint);
  console.log(designerUtils);
  console.log(designerUtils.printTemplate);
});
```

--------------------------------

### toPdf and toImage with paper filling

Source: https://www.ibujian.cn/svp/changelog.html

Example of using toPdf and toImage methods to print with paper filling. It shows how to set paper dimensions and progress callbacks.

```javascript
// 排列填充纸张
const printData = Array.from({length: 31}, (_, i) => ({
  name: "数据" + i,
}));
await hiprintTemplate.toPdf(printData, {
  name: 'pdf名称',
  // 比如当前模板 60*80, 填充至 A4 纸张 则 纸张宽度 210mm, 纸张高度 297mm
  paperWidth: 210, // 纸张宽度 mm
  paperHeight: 297, // 纸张高度 mm
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toPdf 进度', percent);
  },
});
await hiprintTemplate.toImage(printData, {
  name: '图片名称',
  // 比如当前模板 60*80, 填充至 A4 纸张 则 纸张宽度 210mm, 纸张高度 297mm
  paperWidth: 210, // 纸张宽度 mm
  paperHeight: 297, // 纸张高度 mm
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toPdf 进度', percent);
  },
});
```

--------------------------------

### Vue3 Promise-based printing API example

Source: https://www.ibujian.cn/svp/changelog.html

Shows how to use hiprintTemplate methods with Promise-based APIs, including printing, exporting images, and PDF. Requires plugins @sv-print/plugin-api-image and @sv-print/plugin-api-pdf3 for toImage and toPdf respectively.

```javascript
let templateJson = {};
let hiprintTemplate = new hiprint.PrintTemplate({template: templateJson});
// 其中 “text” 是一个元素的 “字段名(field)”
const printData = {name: 'i不简'};
// 偏移设置: 不同PC 同一个打印机可能存在偏移  单位: mm
let offsetOption = {leftOffset: -1, topOffset: -1};
// 获取预览 html
const htmlObj = await hiprintTemplate.getHtml(printData, {...offsetOption});
const html = htmlObj.html();
// 浏览器打印
await hiprintTemplate.print(printData, {...offsetOption});
// 批量打印 --> 生成的 html 页面越多 越容易造成浏览器卡死
await hiprintTemplate.print([printData1, printData2, printData3], {...offsetOption});
// 客户端静默打印
const res = hiprintTemplate.print2(printData, {...offsetOption});
console.log(res);
// {
//   "success": true,
//   "msg": "打印成功",
//   "templateId": "9883cf51-49d6-41b5-9f02-51b80dd7cf12"
// }
// 导出图片 需引入插件 @sv-print/plugin-api-image
await hiprintTemplate.toImage(printData, {
  ...offsetOption,
  isDownload: false, // 不自动下载, 默认true 自动下载
  name: '图片名称',
  pixelRatio: 2, // 图片像素比  2: 提高清晰度 默认 window.devicePixelRatio.
  quality: 0.8, // 默认 0.92  图片质量 0-1
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toImage 进度', percent);
  },
});
// 导出Pdf 需引入插件 @sv-print/plugin-api-pdf3
await hiprintTemplate.toPdf(printData, "test.pdf", {
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toPdf 进度', percent);
  },
});
// 多模板情况
const jqueryObj2 = await hiprint.getHtml({
  templates: [
    {template: hiprintTemplate, data: printData}, // 批量
    {template: hiprintTemplate, data: [printData, printData, printData]},
  ],
});
const html = jqueryObj2.html();
await hiprint.print({
  // ...
});
const res = await hiprint.print2({
  // ...
});
// 客户端相关 API
await hiprint.setHost('http://localhost:17521', "token");
await hiprint.hiwebSocket.stop();
await hiprint.hiwebSocket.start();
await hiprint.getAddress();
await hiprint.getClientInfo();
await hiprint.refreshPrinterList();
```

--------------------------------

### 排列填充纸张 (getHtml/print/print2/toPdf/toImage)

Source: https://www.ibujian.cn/svp/changelog.html

Shows how to fill a small template (e.g., 60x80mm) onto a larger paper (e.g., A4 210x297mm) using paperWidth, paperHeight, and paperStyle options. The example generates 31 data items and calls getHtml, print, print2, toPdf, and toImage with the same paper options. Note that print2 automatically handles default paper size when pageSize is not provided, and the onProgress callback logs progress percentages.

```javascript
// 排列填充纸张
const printData = Array.from({length: 31}, (_, i) => ({
  name: "数据" + i,
}));
const html = (await hiprintTemplate.getHtml(printData, {
  paperWidth: 210, // 纸张宽度 mm
  paperHeight: 297, // 纸张高度 mm
  paperStyle: {
    'justify-content': 'center',
  },
})).html();
// 打印
await hiprintTemplate.print(printData,{
  paperWidth: 210, // 纸张宽度 mm
  paperHeight: 297, // 纸张高度 mm
  paperStyle: {
    'justify-content': 'center',
  },
});
// 直接打印
await hiprintTemplate.print2(printData,{
  paperWidth: 210, // 纸张宽度 mm
  paperHeight: 297, // 纸张高度 mm
  paperStyle: {
    'justify-content': 'center',
  },
});
await hiprintTemplate.toPdf(printData, {
  name: 'pdf名称',
  // 比如当前模板 60*80, 填充至 A4 纸张 则 纸张宽度 210mm, 纸张高度 297mm
  paperWidth: 210, // 纸张宽度 mm
  paperHeight: 297, // 纸张高度 mm
  paperStyle: {
    'justify-content': 'center',
  },
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toPdf 进度', percent);
  },
});
await hiprintTemplate.toImage(printData, {
  name: '图片名称',
  // 比如当前模板 60*80, 填充至 A4 纸张 则 纸张宽度 210mm, 纸张高度 297mm
  paperWidth: 210, // 纸张宽度 mm
  paperHeight: 297, // 纸张高度 mm
  paperStyle: {
    'justify-content': 'center',
  },
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toPdf 进度', percent);
  },
});
```

--------------------------------

### Create sv-print plugin project

Source: https://www.ibujian.cn/svp/plugin/a00.html

Initializes a new sv-print plugin project. Run this command in a terminal to scaffold the plugin structure.

```bash
npx create-sv-print-plugin init
```

--------------------------------

### Get Parameter Objects

Source: https://www.ibujian.cn/svp/api2/a01.html

Retrieve all available parameter objects.

```javascript
console.log(hiprint.getOptionItems);
```

--------------------------------

### 获取客户端连接数据

Source: https://www.ibujian.cn/svp/changelog.html

通过 HTTP GET 请求获取静默打印客户端的连接数量和连接信息。使用本地地址 https://127.0.0.1:7071 下的 /printer/clientsCount 和 /printer/clients 端点。

```javascript
// http 服务方式 (get)
// 连接数量
const url = `https://127.0.0.1:7071/printer/clientsCount`;
// 连接信息
const url = `https://127.0.0.1:7071/printer/clients`;
```

--------------------------------

### Vue 3 使用 Preview 组件并调用 init/show 方法

Source: https://www.ibujian.cn/svp/ui/preview.html

Vue 3 示例，展示如何引入 Preview 组件并通过 ref 调用其方法。需要组件 ^0.2.x 版本。使用 previewRef.value.init() 初始化模板，previewRef.value.show() 传入打印数据和组件参数，包括 showPdf、showImg、showPrint2、showPrint 等选项，以及 options 中的 pixelRatio 和 onProgress 回调。

```vue
<template>
  <div style="width: 100vw; height: 97vh;">
    <button @click="testPreview">显示预览组件</button>
    <Preview ref="previewRef" :modalShow="modalShow"></Preview>
  </div>
</template>
<script setup lang="ts">
  import {onMounted, ref} from "vue";
  import {Designer, Header, Preview, DragBox} from "@sv-print/vue3";
  import templateJson from "./templateJson";

  let template = ref(templateJson);
  const previewRef = ref(null);
  const testPreview = () => {
    // 查看 vue 组件实例
    console.log(previewRef.value);
    // 查看当前 实际的 preview 实例
    console.log(previewRef.value.getTarget());
    // vue 组件实例抛出的方法 初始化模板,打印数据
    previewRef.value.init(template.value, {
      name: "i不简",
    });
    // 显示时 传递打印数据, 组件参数
    let printData = {name: "i不简"};
    previewRef.value.show(printData, {
      showPdf: true, // 是否显示 pdf导出
      showImg: true, // 是否显示 图片导出
      showPrint2: true, // 是否显示 静默打印
      showPrint: true, // 是否显示 浏览器打印
      // selectedPrinter: "默认打印机名称", // 选中的打印机
      // 传递给 导出pdf,图片的参数
      // 参数类型参考: node_modules/sv-print/dist/types.d.ts PreviewShowOptions
      // 融合了 导出pdf,图片,静默打印的参数
      options: {
        name: "传递导出名称",
        // 模糊,不清晰调整这个
        pixelRatio: 2, // 提高清晰度 默认 window.devicePixelRatio.
        onProgress: (cur, total) => {
          console.log(cur, total);
        },
      },
      // 一些事件回调
      onClick: (type) => {
        console.log(type);
      },
      onClose: () => {
        console.log("onClose");
      },
      onRender: () => {
        console.log("onRender");
      },
      callBackOptions: {
        statusCallback: (status) => {
          console.log(status);
        },
      },
    });
  }
</script>
```

--------------------------------

### Configure Parameters

Source: https://www.ibujian.cn/svp/api2/a01.html

Set global configuration parameters.

```javascript
hiprint.setConfig({
  // 查看前面文档 [元素参数重写&新增]
})
```

--------------------------------

### beforeDragIn callback example

Source: https://www.ibujian.cn/svp/changelog.html

Shows how to use the beforeDragIn callback in hiprintTemplate and Vue component. Return false to prevent dragging an image element. The callback receives printTemplate, panel, and ele.

```javascript
// 代码
hiprintTemplate = new hiprint.PrintTemplate({
  template: panel, // 模板
  settingContainer: "#PrintElementOptionSetting", // 元素参数容器
  beforeDragIn: (printTemplate, panel, ele) => {
    ele.options.title += "+beforeDragIn";
    if (ele.printElementType.type == "image") {
      // 返回 false 阻止拖入
      return false;
    }
  },
});
// vue 组件
const onBeforeDragIn = (printTemplate, panel, ele) => {
  ele.options.title += "+beforeDragIn";
  if (ele.printElementType.type == "image") {
    // 返回 false 阻止拖入
    return false;
  }
};
`<Designer
  :onBeforeDragIn="onBeforeDragIn"
/>`
```

--------------------------------

### 在 main.ts/main.js 中引入组件样式

Source: https://www.ibujian.cn/svp/a01.html

以 Vue3 为例，在入口文件中引入 sv-print 的样式文件。

```javascript
import { createApp } from 'vue';
import App from './App.vue';
// 引入组件样式
import 'sv-print/dist/style.css';

createApp(App).mount('#app');
```

--------------------------------

### React: Import and use sv-print Designer

Source: https://www.ibujian.cn/svp/a01.html

React component example using the Designer from '@sv-print/react'. Uses useState for the template and handles the onDesigned event to access hiprint, designerUtils, and designerUtils.printTemplate.

```jsx
import { Designer } from '@sv-print/react';

const App = () => {
  const [template, setTemplate] = useState({});

  return (
    <!-- 宽高自定义 -->
    <div style="width: 100vw; height: 100vh">
      <Designer
        template={template}
        onDesigned={(e) => {
          console.log('onDesigned');
          console.log(e);
          const { hiprint, designerUtils } = e.detail;
          console.log(hiprint);
          console.log(designerUtils);
          console.log(designerUtils.printTemplate);
        }}
      />
    </div>
  );
};
```

--------------------------------

### Designer Header Parameters

Source: https://www.ibujian.cn/svp/changelog.html

Configures the Designer component's header parameters, including logo, title, and custom menus. The example shows how to pass header-related props and refs to customize the header UI.

```vue
<template>
  <Designer
    headerLogoHtml="<i class='svp-header-logo svicon sv-print'></i>"
    headerTitle="sv-print"
    :headerNewEle="headerNewEle"
    :headerEleList="headerEleList"
    :headerNewMenu="headerNewMenu"
    :headerMenuList="headerMenuList"
  />
</template>
<script setup lang="ts">
  import {ref} from 'vue';
  import {Designer} from '@sv-print/vue3';

  const headerNewEle = ref(false); // 是否重新 创建元素
  const headerEleList = ref([
    {
      gap: true,
    },
    {
      icon: "sv-base",
      title: "基础",
      children: [
        {
          type: "defaultModule.hline", // provider tid
          icon: "sv-hline",
          title: "横线",
        }
      ],
    },
  ]);
  const headerNewMenu = ref(false); // 是否重新 创建菜单
  const headerMenuList = ref([{
    icon: "sv-browser",
    title: "保存到浏览器",
    desc: "Ctrl / Command + S",
    click: (util) => util.save(),
  }]);
</script>
```

--------------------------------

### hiprint.init

Source: https://www.ibujian.cn/svp/api2/a01.html

初始化 provider。

```APIDOC
## hiprint.init

### Description
初始化 provider。

### Parameters
- **config** (object) - Required - 初始化配置。
  - **providers** (array) - Required - provider 数组。

### Example
```javascript
import testProvider from './testProvider.js';
hiprint.init({
  providers: [testProvider({title: 'testModule'})]
});
```
```

--------------------------------

### 安装二维码、条形码插件

Source: https://www.ibujian.cn/svp/plugin/a02.html

使用 npm 安装 @sv-print/plugin-ele-bwip-js 插件。

```bash
npm i @sv-print/plugin-ele-bwip-js
```

--------------------------------

### Vue 2: Import and use sv-print Designer

Source: https://www.ibujian.cn/svp/a01.html

Vue 2 component example using the Designer from '@sv-print/vue'. Bind the template prop and listen for the onDesigned event to access hiprint, designerUtils, and designerUtils.printTemplate.

```vue
<template>
  <!-- 宽高自定义 -->
  <div style="width: 100vw; height: 100vh">
    <Designer :template="template" @onDesigned="onDesigned" />
  </div>
</template>

<script>
import { Designer } from '@sv-print/vue';

export default {
  components: { Designer },
  data() {
    return { template: {} };
  },
  methods: {
    onDesigned(e) {
      console.log('onDesigned');
      console.log(e);
      const { hiprint, designerUtils } = e.detail;
      console.log(hiprint);
      console.log(designerUtils);
      console.log(designerUtils.printTemplate);
    },
  },
};
</script>
```

--------------------------------

### Preview component show method with parameters

Source: https://www.ibujian.cn/svp/changelog.html

Shows how to call the preview component's show method with parameters. Configure export options (PDF, image, silent print, browser print), selected printer, and callbacks for click, close, render, progress, and status. Return true to prevent the default event.

```javascript
function onPreviewClick() {
  designerUtilsIns.preview.show(designerUtilsIns.printData, {
    showPdf: true, // 是否显示 pdf导出
    showImg: true, // 是否显示 图片导出
    showPrint2: true, // 是否显示 静默打印
    showPrint: true, // 是否显示 浏览器打印
    selectedPrinter: "默认打印机名称", // 选中的打印机
    onClick: (type) => {
      console.log(type);
    },
    onClose: () => {
      console.log("onClose");
    },
    onRender: () => {
      console.log("onRender");
    },
    options: {
      name: "传递导出名称",
      pixelRatio: 2,
      onProgress: (cur, total) => {
        console.log(cur, total);
      },
    },
    callBackOptions: {
      statusCallback: (status) => {
        console.log(status);
      },
    },
  });
  return true; // 阻止默认事件
}
```

--------------------------------

### Svelte: Import and use sv-print Designer

Source: https://www.ibujian.cn/svp/a01.html

Svelte component example for the sv-print Designer. Import Designer from 'sv-print', pass a template object, and handle the onDesigned event to access hiprint, designerUtils, and designerUtils.printTemplate.

```svelte
<script>
import { Designer } from 'sv-print';
let template = {};

function onDesigned(e) {
  console.log('onDesigned');
  console.log(e);
  const { hiprint, designerUtils } = e.detail;
  console.log(hiprint);
  console.log(designerUtils);
  console.log(designerUtils.printTemplate);
}
</script>

<template>
  <!-- 宽高自定义 -->
  <div style="width: 100vw; height: 100vh">
    <Designer {template} on:onDesigned="{onDesigned}"></Designer>
  </div>
</template>
```

--------------------------------

### 使用 npm 安装各框架组件

Source: https://www.ibujian.cn/svp/a01.html

根据项目框架选择对应的包进行安装。

```bash
# Svelte/Vanilla JS 组件
npm i sv-print
# React 组件
npm i @sv-print/react
# Vue2 组件
npm i @sv-print/vue
# Vue3 组件
npm i @sv-print/vue3
```

--------------------------------

### Vue 3: Import and use sv-print Designer

Source: https://www.ibujian.cn/svp/a01.html

Vue 3 composition API example using the Designer from '@sv-print/vue3'. Uses a ref for the template and handles the onDesigned event to access hiprint, designerUtils, and designerUtils.printTemplate.

```vue
<template>
  <!-- 宽高自定义 -->
  <div style="width: 100vw; height: 100vh">
    <Designer :template="template" @onDesigned="onDesigned" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Designer } from '@sv-print/vue3';
let template = ref({});
const onDesigned = (e) => {
  console.log('onDesigned');
  console.log(e);
  const { hiprint, designerUtils } = e.detail;
  console.log(hiprint);
  console.log(designerUtils);
  console.log(designerUtils.printTemplate);
};
</script>
```

--------------------------------

### providerJson 参数示例 (Vue 3)

Source: https://www.ibujian.cn/svp/ui/designer.html

在 Vue 3 的 `<script setup>` 中定义 providerJson 和 providerRender。providerJson 定义可拖拽元素的分组和类型，providerRender 自定义渲染逻辑，使用 jQuery 构建 DOM 并附加到容器。注意 providerRender 中使用了 `container` 变量，但示例中未定义，可能需在外部定义。

```vue
<template>
  <Designer :providerJson="providerJson" :providerRender="providerRender"/>
</template>
<script setup lang="ts">
  import {ref} from "vue";

  const providerJson = ref([
    {
      "name": "defaultModule",
      "list": [
        {
          "name": "测试",
          "printElementTypes": [
            {
              "title": "横线1",
              "tid": "defaultModule.hline1",
              "type": "hline"
            }
          ]
        }
      ]
    }
  ]);
  const providerRender = ref((list) => {
    let container = globalThis.$('<div class="hiprint-printElement-type"></div>');
    list.forEach(function (item) {
      const box = globalThis.$(`
          <div class="draggable-ele-group">
            <span class="title">${item.name}</span>
            <div class="list"></div>
          </div>
          `);
      const typeList = box.find(".list");
      item.printElementTypes.forEach(function (t) {
        typeList.append(`
              <div class="draggable-ele ep-draggable-item" tid=${t.tid}>
                <i class="svicon sv-base sv-${t.type}"></i>
                <p style="white-space:nowrap">${t.getText()}</p>
              </div>
          `);
      });
      container.append(box);
    });
    return container;
  });
</script>
```

--------------------------------

### 配置 @sv-print/plugin-ele-stable 插件

Source: https://www.ibujian.cn/svp/changelog.html

配置 @sv-print/plugin-ele-stable 插件以启用拖拽DIY表格元素。支持自定义默认单元格尺寸、插入图片时弹出地址输入框，以及注册自定义元素类型（如签名区）。

```javascript
import pluginEleStable from "@sv-print/plugin-ele-stable";

let plugins = [
  pluginEleStable({
    // showDesign: false, // 是否显示设计按钮
    // onDesignClick: (json, callback) => { callback(json); },
    // designerOptions: { title: "表格设计" },
    styleOptions: {
      defaultCellHeight: 32, // 默认单元格高度(px)
      defaultCellWidth: 90, // 默认单元格宽度(px)
    },
    // 插入数据前的回调: 可自定义/编辑要插入的内容(可异步)
    onInsert: (ctx, done) => {
      // ctx: { type, cell, defaultContent }
      if (ctx.type === "image") {
        const url = window.prompt("请输入图片地址", ctx.defaultContent);
        done(url == null ? undefined : url);
      } else {
        done(); // 使用默认/内置行为
      }
    },
    customTypes: [
      {
        type: "signature",
        label: "签名区",
        defaultContent: "签字:",
        lang: "text",
        render: (cell) =>
          `<div style="width:100%;"><div>${
            cell.content || ""
          }</div><div style="display:inline-block;border-bottom:1px solid #000;min-width:80px;height:2px;"></div></div>`,
      },
    ],
  }),
];
```

--------------------------------

### w2html plugin usage with sv-print client

Source: https://www.ibujian.cn/svp/changelog.html

Example of registering the w2html and e2table plugins with hiprint. Requires sv-print client ^2.0.7 for local file processing. The type option defaults to 'base64' but can be set to 'upload' with axios configuration.

```javascript
import pluginEleW2html from "@sv-print/plugin-ele-w2html";
import pluginE2Table from "@sv-print/plugin-ele-e2table";

const plugins = [
  pluginEleW2html({
    // 需要借助 sv-print客户端^2.0.7 才能处理本地文件
    type: "base64", // 默认 base64. 上传类型 base64 | upload
    options: {
      // type:upload 时 axios 上传配置
      url: "http://localhost:3000/api/core/upload",
      headers: {},
      params: {},
      timeout: 10000,
    },
    // placeholder: "<div>粘贴word文档内容</div>", // 元素占位 html
  }),
  pluginE2Table({
    placeholder: "<div>粘贴excel表格内容</div>", // 元素占位 html
  }),
];

hiprint.register({
  authKey: '', // 授权key
  plugins: plugins,
});
```

--------------------------------

### Custom Formatting Plugin with Designer

Source: https://www.ibujian.cn/svp/changelog.html

Registers a custom formatting plugin with the Designer component. The plugin provides a list of formatters (e.g., 'toUpperCase') that can be applied to data values. The example shows the plugin configuration and its usage in a Vue 3 template.

```vue
<template>
  <Designer
    :plugins="plugins"
  />
</template>
<script setup lang="ts">
  import {ref} from 'vue';
  import {Designer} from '@sv-print/vue3';
  import pluginFormatter from "@sv-print/plugin-formatter";

  const plugins = ref([
    pluginFormatter({
      name: "格式化器", // 参数名称
      funList: [
        {
          name: "转大写", // 展示名称
          key: "toUpperCase", // 格式化器key
          fun: (value) => {
            return `${value}`.toUpperCase();
          },
        },
        {
          name: "自定义",
          key: "test",
          fun: (value) => {
            return `${value}+自定义`;
          },
        },
      ],
    }),
  ])
</script>
```

--------------------------------

### Socket.IO 连接服务（第一步）

Source: https://www.ibujian.cn/svp/client/a02.html

使用 socket.io-client 连接 sv-print 服务，支持 Token 鉴权、自动重连和超时设置。连接成功后服务端会自动推送 printerList 和 clientInfo 事件。

```javascript
/**
 * 第一步：连接 Socket.IO 服务
 * @param {string} serverUrl - 服务地址，如 http://localhost:17521
 * @param {string} token - 鉴权 Token（服务端未配置时传空字符串）
 */
function connectServer(serverUrl, token = '') {
  const socket = io(serverUrl, {
    auth: { token }, // Token 鉴权
    reconnection: true, // 自动重连
    reconnectionDelay: 5000, // 重连间隔 5 秒
    timeout: 10000, // 连接超时 10 秒
  });

  return new Promise((resolve, reject) => {
    // 连接成功
    socket.on('connect', () => {
      console.log('[第一步] 连接成功, socket id:', socket.id);
      resolve(socket);
    });

    // 连接失败
    socket.on('connect_error', (err) => {
      console.error('[第一步] 连接失败:', err.message);
      // token 错误时 err.message === 'Token error'
      reject(err);
    });

    // 断开连接
    socket.on('disconnect', (reason) => {
      console.warn('[第一步] 连接断开:', reason);
    });
  });
}

// 调用示例
const socket = await connectServer('http://localhost:17521', '');
```

--------------------------------

### sv-print plugin format with hooks

Source: https://www.ibujian.cn/svp/plugin/a00.html

Defines the structure of an sv-print plugin. It exports a function that returns a PluginOptions object with a name, description, minimum hiprint version, and an array of hooks. The example shows an init hook and a getOptionItem hook, demonstrating how to combine multiple hooks.

```typescript
import type {PluginOptions} from "sv-print";

/**
 * 插件
 * @param config 自定义 你插件的 配置
 */
export default function (config?: any): PluginOptions {
  let configs = {
    ...config,
  };
  // 插件主体
  return {
    name: "scale", // 插件名称
    description: "缩放参数", // 插件描述
    leastHiprintVersion: "0.1.0", // 最低兼容版本
    hooks: [
      // 接受多个 hook 组合
      {
        hook: "init", // 这是 hook 关键
        name: "scale", // 名称(可选) 
        description: "scale", // 描述(可选)
        priority: 1, // 排序优先级 (可选)
        run: ({Config, OptionItems, hinnn, hiprint}) => {
          //  编写 init hook 回调
        },
      },
      {
        hook: "getOptionItem",
        run: (item) => {
          //  编写 getOptionItem hook 回调
          console.log(item);
          return item;
        },
      }
    ],
  };
}
```

--------------------------------

### 关闭 sv-print 自动连接客户端

Source: https://www.ibujian.cn/svp/qa.html

在入口文件 main.js 中调用 disAutoConnect() 或设置 globalThis.autoConnect = false 来关闭自动连接客户端，避免控制台报 websocket 错误。

```javascript
import { disAutoConnect  } from 'sv-print';  //或者 @sv-print/hiprint
disAutoConnect();
// 或者
globalThis.autoConnect = false;
```

--------------------------------

### 自定义主题设置 (Designer :theme)

Source: https://www.ibujian.cn/svp/changelog.html

Pass an array of theme objects to the Designer component's :theme prop. Each theme defines a name and color values using CSS color formats such as oklch, hsl, hex, or CSS variables. The example shows three custom themes named 自定义1, 自定义2, and 自定义3.

```html
<template>
  <Designer
    :theme="[
      {
        theme: "自定义1",
        primaryColor: "oklch(45% .24 277.023)",
      },
      {
        theme: "自定义2",
        primaryColor: "hsl(355, 100%, 42.95%)",
        primaryContent: "#fff",
        secondaryColor: "hsl(24.93, 100%, 42.94%)",
        secondaryContent: "#fff",
      },
      {
        theme: "自定义3",
        primaryColor: "var(--primary)",
      },
    ]"
  />
</template>
```
Tokens:
Raw