### Install sv-print Components (yarn)

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

Installs the sv-print component for different frameworks using yarn. This includes packages for Svelte/Vanilla JS, React, Vue 2, and Vue 3.

```bash
# Svelte/Vanilla JS Component
yarn add sv-print
# React Component
yarn add @sv-print/react
# Vue2 Component
yarn add @sv-print/vue
# Vue3 Component
yarn add @sv-print/vue3
```

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

### Install sv-print Components (npm)

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

Installs the sv-print component for different frameworks using npm. This includes packages for Svelte/Vanilla JS, React, Vue 2, and Vue 3.

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

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

### Install sv-print Components (pnpm)

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

Installs the sv-print component for different frameworks using pnpm. This includes packages for Svelte/Vanilla JS, React, Vue 2, and Vue 3.

```bash
# Svelte/Vanilla JS Component
pnpm add sv-print
# React Component
pnpm add @sv-print/react
# Vue2 Component
pnpm add @sv-print/vue
# Vue3 Component
pnpm add @sv-print/vue3
```

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

### Integrate sv-print Designer in Vue

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

Provides an example of integrating the sv-print Designer component into a Vue 2 application. It covers component registration, data binding for the template, and method definition for the `onDesigned` event.

```html
<template>
  <Designer :template="template" @onDesigned="onDesigned" />
</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>
```

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

### Integrate sv-print Designer in Svelte

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

Shows how to use the sv-print Designer component within a Svelte application. It includes importing the component, defining a template, and handling the `onDesigned` event.

```html
<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>
  <Designer {template} on:onDesigned="{onDesigned}"></Designer>
</template>
```

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

### Integrate sv-print Designer in Vanilla JS

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

Illustrates how to use the sv-print Designer component directly in a Vanilla JavaScript project. It includes importing the Designer, initializing it with a target element and props, and subscribing to the `onDesigned` event.

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

const designer = new Designer({
  target: document.body, // Container
  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);
});

```

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

### Integrate sv-print Designer in React

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

Shows how to implement the sv-print Designer component in a React application. It covers importing the component, managing the template state using `useState`, and defining the `onDesigned` callback function.

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

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

  return (
    <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);
      }}
    />
  );
};

```

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

### Link Print Stylesheet

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

Explains how to include the 'print-lock.css' stylesheet in your project's HTML for proper printing functionality. It emphasizes placing the file in a publicly accessible directory and linking it with `media="print"`.

```html
<!-- Adjust to relative/own link, IMPORTANT: name must be consistent [print-lock.css] -->
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css" />
```

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

### Import Component Styles in Vue 3

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

Demonstrates how to import the necessary CSS for sv-print components within a Vue 3 application's main entry file (e.g., main.ts or main.js).

```javascript
import { createApp } from 'vue';
import App from './App.vue';
// Import component styles
import 'sv-print/dist/style.css';

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

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

### Install SV-Print View Code Edit Plugin

Source: https://www.ibujian.cn/svp/plugin/a021

Shows how to install the SV-Print view code edit plugin using npm. This is the first step before integrating it into your project.

```bash
npm i @sv-print/plugin-view-code-edit
```

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

### Integrate sv-print Designer in Vue 3

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

Demonstrates the usage of the sv-print Designer component within a Vue 3 application using the Composition API. It includes importing the component, managing the template state with `ref`, and defining the `onDesigned` event handler.

```html
<template>
  <Designer :template="template" @onDesigned="onDesigned" />
</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>
```

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

### Install SV-Print Barcode Plugin

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

Demonstrates how to install a specific SV-Print plugin, the ele-bwip-js plugin for barcode generation, using npm.

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

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

### JavaScript: Original Parameter Object Example (ColorOption)

Source: https://www.ibujian.cn/svp/a08

Demonstrates the original JavaScript pattern for defining a style parameter ('color') in sv-print. It includes methods for applying CSS, creating the target DOM element, getting and setting the parameter's value, and destroying the element. Uses jQuery for DOM manipulation.

```javascript
const colorOption = (function () {
  function t() {
    this.name = "color";
  }
  // 这个参数 属于 第二类 样式参数, 所以需要 一个 css 方法,用于设置样式.
  // 可想而知，肯定会返回对应的 元素对象 和 样式值
  return t.prototype.css = function (t, e) {
    if (t && t.length) {
      if (e) return t.css("color", e), "color:" + e;
      t[0].style.color = "";
    }
    return null;
  },
  // jQuery 创建 DOM
  t.prototype.createTarget = function (printElement, options, printElementType) {
    this.target = $(
      `<div class=\"hiprint-option-item hiprint-option-item-row\">
        <div class=\"hiprint-option-item-label\">字体颜色</div>
        <div class=\"hiprint-option-item-field\">
          <input type=\"text\" class=\"auto-submit\"/>
        </div>
      </div>`
    );
    return this.target;
  },
  // 获取这个参数的 值
  t.prototype.getValue = function () {
    var t = this.target.find("input").val();
    if (t) return t.toString();
  },
  // 设置这个参数的 值
  t.prototype.setValue = function (t) {
    this.target.find("input").minicolors({
      defaultValue: t || "",
      theme: "bootstrap"
    }), this.target.find("input").val(t);
  },
  // 销毁这个参数 (比如点击其他元素的时候，移除这个 DOM)
  t.prototype.destroy = function () {
    this.target.remove();
  },
  t;
})();
```

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

### JavaScript: ES6 Parameter Object Example (ColorOption)

Source: https://www.ibujian.cn/svp/a08

Provides the ES6 class-based equivalent for defining a style parameter ('color') in sv-print. It refactors the previous JavaScript example into a modern class structure with methods for CSS manipulation, DOM creation, value retrieval/setting, and cleanup. Also uses jQuery.

```javascript
const colorOption = function () {
  class ColorOption {
    // 唯一的 参数 键. 如果重复 后面的将覆盖前面的
    public name = "color";
    constructor() {}
    
    target = null;
    
    css(t,e) {
      if (t && t.length) {
        if (e) return t.css("color", e), "color:" + e;
        t[0].style.color = "";
      }
      return null;
    }
    createTarget(printElement, options, printElementType) {
      this.target = $(
        `<div class=\"hiprint-option-item hiprint-option-item-row\">
          <div class=\"hiprint-option-item-label\">字体颜色</div>
          <div class=\"hiprint-option-item-field\">
            <input type=\"text\" class=\"auto-submit\"/>
          </div>
        </div>`
      );
      return this.target;
    }
    // 获取这个参数的 值
    getValue() {
      var t = this.target.find("input").val();
      if (t) return t.toString();
    }
    // 设置这个参数的 值
    setValue(t) {
      this.target.find("input").minicolors({
        defaultValue: t || "",
        theme: "bootstrap"
      }), this.target.find("input").val(t);
    }
    // 销毁这个参数 (比如点击其他元素的时候，移除这个 DOM)
    destroy() {
      this.target.remove();
    }
  }
  return function() {
    return new ColorOption()
  };
}
```

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

### HiPrint Template Object

Source: https://www.ibujian.cn/svp/api2/a02

Demonstrates the instantiation and basic usage of the hiprint.PrintTemplate object, including design, getting template JSON, and performing various print and export operations.

```APIDOC
## hiprint.PrintTemplate

### Description
Instantiate the core template object to enable browser printing, direct/silent printing, print design, print preview, and PDF export functionalities.

### Method
Constructor

### Endpoint
N/A (JavaScript Class)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
// Initialize new template with options (see table below)
let hiprintTemplate = new hiprint.PrintTemplate(options);

// Design the template in a specified container
// '#hiprint-printTemplate' can be a jQuery selector
hiprintTemplate.design('#hiprint-printTemplate');

// Get the template JSON after design
const template = hiprintTemplate.getJson();

// Example data for printing
let printData = {text: 'This is the text to display during printing'};

// Offset settings for potential PC/printer discrepancies (unit: mm)
let offsetOption = {leftOffset: -1, topOffset: -1};

// Get preview HTML content
const html = (await hiprintTemplate.getHtml(printData, {...offsetOption})).html();

// Browser printing (requires user interaction)
await hiprintTemplate.print(printData, {...offsetOption});

// Batch printing (can cause browser freeze with many pages)
await hiprintTemplate.print([printData1, printData2, printData3], {...offsetOption});

// Direct/Silent printing with callback for success
await hiprintTemplate.print2(printData, {...offsetOption, printer: 'Printer Name', title: 'Print Job Name'});

// Direct/Silent printing with paper size and copies
await hiprintTemplate.print2(printData, {printer: 'Printer Name', pageSize: 'A4'});

// Advanced direct/silent printing options
const res = await hiprintTemplate.print2(printData, {
  printer: 'Printer Name',
  pageSize: {width: 210 * 1000, height: 297 * 1000}, // e.g., A4 in micrometers
  copies: 2, // Number of copies
  pageRanges: [{from: 0, to: 1}], // Page range
  orientation: 'landscape', // 'landscape' or 'portrait'
  color: true, // Color printing
  duplexMode: 'simplex' // 'simplex', 'shortEdge', 'longEdge'
});
console.log(res);

// Export to PDF (requires @sv-print/plugin-api-pdf3)
await hiprintTemplate.toPdf(printData, 'pdf_name', {
  ...offsetOption,
  pixelRatio: 2, // For higher resolution
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toPdf progress', percent);
  },
});

// Export to Image (requires @sv-print/plugin-api-image)
await hiprintTemplate.toImage(printData, {
  ...offsetOption,
  name: 'image_name',
  pixelRatio: 2, // For higher resolution
  quality: 0.8, // Image quality (0-1)
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toImage progress', percent);
  },
});

// Export PDF without automatic download, get URL/Blob
const res = await hiprintTemplate.toPdf(printData, 'pdf_name', {
  isDownload: false,
  type: 'blob', // 'blob', 'bloburl', 'pdfobjectnewwindow', 'dataurl'
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toPdf progress', percent);
  },
});
console.log('toPdf', res);

// Export Image without automatic download, get URL/Blob
const res = await hiprintTemplate.toImage(printData, {
  isDownload: false,
  name: 'image_name',
  limit: 10, // Number of pages per image file
  type: 'image/jpeg', // 'image/jpeg', etc.
  pixelRatio: 2, // For higher resolution
  quality: 0.8, // Image quality (0-1)
  toType: 'url', // 'url' or 'blob'
  onProgress: (cur, total) => {
    const percent = Math.floor((cur / total) * 100);
    console.log('toImage progress', percent);
  },
});
console.log('toImage', res);
```

### Response
#### Success Response (200)
N/A (This is a client-side JavaScript API)

#### Response Example
N/A
```

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

### Vue 3 Preview Options Configuration

Source: https://www.ibujian.cn/svp/a04

Sets up configuration options for the preview feature, controlling the visibility of export buttons for PDF and images, as well as the print functionality. This example uses Vue 3's `ref` for reactive data.

```javascript
// vue3 为例
const previewOptions = ref({
  showPdf: true, // 是否显示 导出pdf按钮
  showImg: true, // 是否显示 导出图片按钮
  showPrint2: true, // 是否显示 直接打印&打印机列表
});
```

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

### Printing and Exporting APIs

Source: https://www.ibujian.cn/svp/api/a02

APIs for getting HTML for printing, initiating browser printing, direct printing, and exporting to images or PDF.

```APIDOC
## POST /getHtml

### Description
Gets the HTML content for printing. Can be used for single or multiple data sets, and supports specifying offsets.

### Method
POST

### Endpoint
/getHtml

### Parameters
#### Query Parameters
- **data** (json or array of json) - Required - The data for printing.
- **options** (object) - Optional - Printing options.
  - **leftOffset** (number) - Optional - Left offset for printing.
  - **topOffset** (number) - Optional - Top offset for printing.
- **callback** (function) - Optional - A callback function.

### Request Example
```json
{
  "data": {}
}
```
```json
{
  "data": [{}, {}]
}
```
```json
{
  "data": {},
  "options": {
    "leftOffset": -1,
    "topOffset": -1
  }
}
```

### Response
#### Success Response (200)
- **html** (string) - The generated HTML for printing.

### Response Example
```json
{
  "html": "<html><body>Print Content</body></html>"
}
```
```

```APIDOC
## POST /print

### Description
Initiates browser printing for single or multiple data sets. Supports specifying offsets and a callback for the print action.

### Method
POST

### Endpoint
/print

### Parameters
#### Query Parameters
- **data** (json or array of json) - Required - The data for printing.
- **options** (object) - Optional - Printing options.
  - **leftOffset** (number) - Optional - Left offset for printing.
  - **topOffset** (number) - Optional - Top offset for printing.
- **callbackOption** (object) - Optional - Callback options for the print action.
  - **callback** (function) - A function to execute after the print window opens.

### Request Example
```json
{
  "data": {}
}
```
```json
{
  "data": [{}, {}, {}]
}
```
```json
{
  "data": {},
  "options": {
    "leftOffset": -1,
    "topOffset": -1
  },
  "callbackOption": {
    "callback": "() => { console.log('Browser print window opened') }"
  }
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates success.

### Response Example
```json
{
  "status": "print initiated"
}
```
```

```APIDOC
## POST /print2

### Description
Directly prints the content without opening a print preview dialog. Supports single or multiple data sets and specifying offsets.

### Method
POST

### Endpoint
/print2

### Parameters
#### Query Parameters
- **data** (json or array of json) - Required - The data for printing.
- **options** (object) - Optional - Printing options.
  - **leftOffset** (number) - Optional - Left offset for printing.
  - **topOffset** (number) - Optional - Top offset for printing.

### Request Example
```json
{
  "data": {}
}
```
```json
{
  "data": [{}, {}, {}]
}
```
```json
{
  "data": {},
  "options": {
    "leftOffset": -1,
    "topOffset": -1
  }
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates success.

### Response Example
```json
{
  "status": "direct print initiated"
}
```
```

```APIDOC
## POST /toImage

### Description
Exports the template content as an image. Supports specifying download options and offsets.

### Method
POST

### Endpoint
/toImage

### Parameters
#### Query Parameters
- **data** (json or array of json) - Required - The data for the image.
- **options** (object) - Optional - Export options.
  - **name** (string) - Optional - The filename for download.
  - **isDowload** (boolean) - Optional - If true, triggers a download.
  - **leftOffset** (number) - Optional - Left offset for export.
  - **topOffset** (number) - Optional - Top offset for export.
  - **type** (string) - Optional - The image type (e.g., 'image/jpeg').
  - **quality** (string) - Optional - The image quality (e.g., '0.8').
  - **toType** (string) - Optional - The output type ('url' or 'blob').

### Request Example
```json
{
  "data": {},
  "options": {
    "name": "download.jpg",
    "isDowload": true
  }
}
```
```json
{
  "data": {},
  "options": {
    "leftOffset": -1,
    "topOffset": -1,
    "type": "image/png",
    "quality": "0.9",
    "toType": "blob"
  }
}
```

### Response
#### Success Response (200)
- **deferredObject** ($.Deferred) - A deferred object that resolves with the image data.

### Response Example
```json
{
  "status": "image export initiated"
}
```
```

```APIDOC
## POST /toPdf

### Description
Exports the template content as a PDF file. Supports specifying a filename, scale for quality, and offsets.

### Method
POST

### Endpoint
/toPdf

### Parameters
#### Query Parameters
- **data** (json or array of json) - Required - The data for the PDF.
- **fileName** (string) - Optional - The name of the PDF file.
- **options** (object) - Optional - Export options.
  - **scale** (number) - Optional - Controls PDF quality and file size (default: 2).
  - **isDownload** (boolean) - Optional - If true, triggers a download.
  - **leftOffset** (number) - Optional - Left offset for export.
  - **topOffset** (number) - Optional - Top offset for export.

### Request Example
```json
{
  "data": {},
  "fileName": "TestExport"
}
```
```json
{
  "data": {},
  "fileName": "TestExport",
  "options": {
    "scale": 4
  }
}
```
```json
{
  "data": {},
  "options": {
    "leftOffset": -1,
    "topOffset": -1
  }
}
```

### Response
#### Success Response (200)
- **deferredObject** ($.Deferred) - A deferred object that resolves with the PDF data.

### Response Example
```json
{
  "status": "pdf export initiated"
}
```
```

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

### Set Available Fonts

Source: https://www.ibujian.cn/svp/api2/a02

Sets the list of fonts available for use in the template. Requires the specified fonts to be installed locally.

```javascript
setFontList([{value:'SourceHanSansCN-Normal',title:'思源黑体'}])
```

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

### Vue 3 Theme List Configuration

Source: https://www.ibujian.cn/svp/a04

Defines a list of available themes for the UI. This array specifies all supported theme names that can be applied to the application. The example uses Vue 3's `ref` for reactive state management.

```javascript
const themeList = ref([
  'light',
  'dark',
  'cupcake',
  'bumblebee',
  'emerald',
  'corporate',
  'synthwave',
  'retro',
  'cyberpunk',
  'valentine',
  'halloween',
  'garden',
  'forest',
  'aqua',
  'lofi',
  'pastel',
  'fantasy',
  'wireframe',
  'black',
  'luxury',
  'dracula',
  'cmyk',
  'autumn',
  'business',
  'acid',
  'lemonade',
  'night',
  'coffee',
  'winter',
]);
```

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

### Template Manipulation APIs

Source: https://www.ibujian.cn/svp/api/a02

These APIs allow you to clear templates, rotate paper orientation, get paper orientation, set paper size, and zoom the design paper.

```APIDOC
## POST /clear

### Description
Clears the current template.

### Method
POST

### Endpoint
/clear

### Parameters
#### Query Parameters
- **无** (null) - 无 - No parameters required.

### Response
#### Success Response (200)
- **无** (null) - No response value.

### Response Example
```json
{
  "status": "cleared"
}
```
```

```APIDOC
## POST /rotatePaper

### Description
Rotates the paper orientation (width becomes height, height becomes width).

### Method
POST

### Endpoint
/rotatePaper

### Parameters
#### Query Parameters
- **无** (null) - 无 - No parameters required.

### Response
#### Success Response (200)
- **无** (null) - No response value.

### Response Example
```json
{
  "status": "rotated"
}
```
```

```APIDOC
## GET /getOrient

### Description
Gets the current paper orientation.

### Method
GET

### Endpoint
/getOrient

### Parameters
#### Query Parameters
- **无** (null) - 无 - No parameters required.

### Response
#### Success Response (200)
- **orientation** (string) - '1' for portrait, '2' for landscape.

### Response Example
```json
{
  "orientation": "1"
}
```
```

```APIDOC
## POST /setPaper

### Description
Sets the paper size for the template. Supports predefined sizes (A1-A8, B1-B8) or custom dimensions.

### Method
POST

### Endpoint
/setPaper

### Parameters
#### Query Parameters
- **width** (string/number) - Required - The width of the paper. Can be a dimension (e.g., 210) or a predefined size (e.g., 'A4').
- **height** (string/number) - Required - The height of the paper. Can be a dimension (e.g., 297) or a predefined size (e.g., 'A4').

### Request Example
```json
{
  "width": "A4",
  "height": "A4"
}
```
```json
{
  "width": 210,
  "height": 297
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates success.

### Response Example
```json
{
  "status": "paper size set"
}
```
```

```APIDOC
## POST /zoom

### Description
Zooms the design paper. Optionally saves the zoom level, which also affects printing.

### Method
POST

### Endpoint
/zoom

### Parameters
#### Query Parameters
- **scaleValue** (number) - Required - The zoom scale factor (e.g., 1.2).
- **save** (boolean) - Optional - If true, saves the zoom level.

### Request Example
```json
{
  "scaleValue": 1.2
}
```
```json
{
  "scaleValue": 1.2,
  "save": true
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates success.

### Response Example
```json
{
  "status": "zoom applied"
}
```
```

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

### Register SV-Print Plugin Globally

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

Provides an example of registering an SV-Print plugin globally within a project. This allows the plugin to be used in any part of the application without re-registration.

```javascript
import pluginEleBwip from "@sv-print/plugin-ele-bwip-js";

iprint.register({
  authKey: "", // 授权key, 没有则有体验版水印
  plugins: [
    pluginEleBwip({}), // 插件参数
  ]
})
```

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

### Register Font Size Parameter with HiPrint (JavaScript)

Source: https://www.ibujian.cn/svp/a08

Demonstrates how to configure HiPrint to use the custom `fontSizeAdv` parameter. This involves importing the parameter definition and using `hiprint.setConfig` to add it to the `optionItems` array. The example shows how to enable the input mode by passing `{isInput: true}`.

```javascript
import {hiprint} from 'sv-print';
// import {hiprint} from '@sv-print/hiprint';
// 不 import, hiprint 也挂载到了全局

import fontSizeAdv from './fontSizeAdv.js';

hiprint.setConfig({
  optionItems: [
    fontSizeAdv({isInput: true}), // 使用输入框
    // fontSizeAdv(), // 默认使用选择框
  ]
})
```

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

### 获取 hiprint 所有参数对象

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

通过 `console.log(hiprint.getOptionItems)` 在控制台中打印出 hiprint 的所有参数对象，用于查看和了解可配置项。

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

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

### 查看 HIPRINT_CONFIG 配置对象

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

通过 `console.log(HIPRINT_CONFIG)` 命令在控制台中查看全局配置对象。此对象包含与元素类型相关的参数和设计器配置项。

```javascript
console.log(HIPRINT_CONFIG);
```

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

### Get Field List

Source: https://www.ibujian.cn/svp/api/a02

Retrieves the globally configured list of fields. This API returns an array of field objects.

```javascript
getFields()
```

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

### Template Parameters

Source: https://www.ibujian.cn/svp/api2/a02

Details the various options and parameters available when initializing the hiprint.PrintTemplate.

```APIDOC
## Template Parameters

### Description
Parameters used when initializing the `hiprint.PrintTemplate` object.

### Parameters

| Name | Type | Description | Remarks |
|---|---|---|---|
| `template` | `json` | Template JSON data | |
| `settingContainer` | `string` | HTML container for settings | e.g., `<div id="PrintElementOptionSetting"/>` |
| `paginationContainer` | `string` | Container for multi-panel pagination (requires corresponding div in HTML) | e.g., `<div class="hiprint-printPagination"/>` |
| `fields` | `array` | Data source for element fields. If fields exist, they appear as dropdowns; otherwise, as input fields. This is the global data source for element fields, with lower priority than element-specific data sources. | |
| `fontList` | `array` | Custom font list for dropdowns | Can be set via `hiprintTemplate.setFontList([])` or within element options `options.fontList: []` |
| `dataMode` | `number` | JSON format for `onDataChanged` callback: `1` for `getJson`, others for `getJsonTid`. Defaults to `1`. | |
| `onDataChanged` | `(type, json) => {}` | Callback when the template changes (e.g., add, move, delete, modify, resize, rotate elements). Note: some modifications might not trigger a callback. | |
| `onUpdateError` | `(e) => {}` | Callback when `hiprintTemplate.update(json)` fails. Used by undo/redo functionality. | |
| `onImageChooseClick` | `(target) => {}` | Callback when an image source is chosen. `target.refresh(url, options)` and `target.getValue()` are available. | |
| `onPanelAddClick` | `(panel, createPanel) => {}` | Callback for multi-panel click events. `target.refresh(url, options)` and `target.getValue()` are available. | |
| `onFunctionClick` | `(option, printElement, event) => {}` | Callback when a function (textarea) is clicked. `target.refresh(url, options)` and `target.getValue()` are available. | |
| `onZoomChange` | `(scale) => {}` | Callback triggered when the zoom level changes. | |
| `customDataFun` | `(data, field, printData) => {}` | Custom function to retrieve the value for a `field`. | |
| `beforeDragIn` | `(printTemplate, panel, printElement) => {}` | Callback before an element is dragged in. Returning `false` prevents the drag-in operation. | |
```

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

### 全局注册 plugins 插件

Source: https://www.ibujian.cn/svp/a04

使用 `hiprint.register` 方法在全局范围内注册 sv-print 插件。此方法允许传入 `authKey` 和 `plugins` 数组，用于扩展打印功能。

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

import pluginEleBwip from "@sv-print/plugin-ele-bwip-js";

hiprint.register({
  authKey: "", // 授权key, 没有则有体验版水印
  plugins: [
    pluginEleBwip({}), // 插件参数
  ]
})
```

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

### hiprint 刷新打印机列表和获取设备信息

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

提供了刷新打印机列表、获取设备 IP 和 MAC 地址、获取客户端信息以及通过 IPP 进行打印和请求的 API 调用示例。

```javascript
// 连接 打印客户端 成功后

// 刷新 获取打印机列表
hiprint.refreshPrinterList(callback);
// 获取 ip,mac地址信息
hiprint.getAddress();
// 获取 客户端信息
hiprint.getClientInfo((e) => {});
// 获取 客户端连接 的 socket.io 对象
hiprint.getClients((e) => {});
// ipp 打印
hiprint.ippPrint(options, callback, connectedCallback);
// ipp 请求
hiprint.ippRequest(options, callback);
```

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

### Get Selected Elements

Source: https://www.ibujian.cn/svp/api/a02

Retrieves a list of all currently selected elements on the template. This function returns an array of element objects.

```javascript
getSelectEls()
```

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

### sv-print 二维码/条形码插件 (@sv-print/plugin-ele-bwip-js)

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

集成了 bwip-js 库，支持生成 DM 码、GS1-128 码、二维码和条形码。通过 npm 安装并引入以使用其功能。

```javascript
import BarcodePlugin from "@sv-print/plugin-ele-bwip-js";

// 使用插件
printInstance.use(BarcodePlugin);
```

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

### HiPrint 客户端操作

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

在连接打印客户端成功后，可以执行刷新打印机列表、获取地址信息、获取客户端信息、获取客户端 Socket.IO 对象，以及进行 ipp 打印和 ipp 请求。

```javascript
// 连接 打印客户端 成功后

// 刷新 获取打印机列表
const list = await hiprint.refreshPrinterList(callback);
// 获取 ip,mac地址信息
const addr = await hiprint.getAddress();
// 获取 客户端信息
const info = await hiprint.getClientInfo();
// 获取 客户端连接 的 socket.io 对象
const clients = await hiprint.getClients();
// ipp 打印
hiprint.ippPrint(options, callback, connectedCallback);
// ipp 请求
hiprint.ippRequest(options, callback);
```

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

### Get Paper List

Source: https://www.ibujian.cn/svp/api/a02

Retrieves the list of currently configured paper sizes. This function returns an array of paper size objects.

```javascript
getPaperList()
```

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

### sv-print 插件基本结构 (TypeScript)

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

展示了 sv-print 插件的基本结构，包括插件的名称、描述、最低兼容版本以及如何使用 'init' 和 'getOptionItem' hooks。该插件使用 TypeScript 编写，并导出一个 PluginOptions 对象。

```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;
        },
      }
    ],
  };
}
```

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

### Get Font List

Source: https://www.ibujian.cn/svp/api/a02

Retrieves the list of fonts that are currently available or have been set for the template. This function returns an array of font objects.

```javascript
getFontList()
```

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

### Get Fields in Panel

Source: https://www.ibujian.cn/svp/api/a02

Retrieves all fields present within the current template panel. This function returns an array of field objects.

```javascript
getFieldsInPanel()
```

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

### 注册 hiprint 插件

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

演示了如何导入插件并使用 `hiprint.register` 方法进行注册，包括提供授权 Key 和插件配置。

```javascript
import pluginEleBwip from '@sv-print/plugin-ele-bwip-js';

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

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

### Get Paper Orientation

Source: https://www.ibujian.cn/svp/api/a02

Retrieves the current orientation of the paper. It returns '1' for portrait and '2' for landscape. This API does not require any parameters.

```javascript
getOrient()
```

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

### sv-print toPdf API 插件 (@sv-print/plugin-api-pdf)

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

该插件为模板对象添加了 `toPdf` 方法，支持将模板转换为 PDF 格式。按需通过 npm 安装和引入。

```javascript
import ToPdfPlugin from "@sv-print/plugin-api-pdf";

// 使用插件
printInstance.use(ToPdfPlugin);
```

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

### Get Paper Type

Source: https://www.ibujian.cn/svp/api/a02

Retrieves the paper type for a specified panel index (defaults to 0). Returns a string indicating the paper type.

```javascript
getPaperType(0)
```

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

### 使用 hiprint 创建和打印模板

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

演示了如何使用 `hiprint.PrintTemplate` 创建模板对象、获取预览 HTML、执行单次打印、批量打印和静默打印。同时展示了多模板的预览和打印操作。

```javascript
// 创建模板对象
const hiprintTemplate = new hiprint.PrintTemplate({
  template: {}, // 模板json对象 
});
// 模板对象 API
const printData = {name: 'i不简'};
// 获取预览 html
const jqueryObj = hiprintTemplate.getHtml(printData);
const html = jqueryObj.html();
// 打印
hiprintTemplate.print(printData);
// 批量打印 
hiprintTemplate.print([printData, printData, printData]);
// 直接打印(静默打印)
hiprintTemplate.print2(printData)
```

```javascript
// 多模板操作
const hiprintTemplate2 = new hiprint.PrintTemplate({
  template: {}, // 模板json对象 
});
// 多模板预览
const jqueryObj2 = hiprint.getHtml({
  templates: [
    { template: hiprintTemplate, data: printData },
    // 批量
    { template: hiprintTemplate2, data: [printData, printData, printData] },
  ],
});
const html = jqueryObj2.html();
// 多模板打印
hiprint.print({
  templates: [
    { template: hiprintTemplate, data: printData },
    // 批量
    { template: hiprintTemplate2, data: [printData, printData, printData] },
  ],
});
// 多模板直接打印
hiprint.print2(
  {
    templates: [
      { template: hiprintTemplate, data: printData, options: {} },
      // 批量
      { template: hiprintTemplate2, data: [printData, printData, printData], options: {} },
    ],
    options: { printer: "", landscape: true },
  },
  function (data) {
    console.log("printSuccess");
  },
  function (e) {
    console.log("printError");
  }
);
```

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

### 使用 hiwebSocket 发送打印数据

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

演示了如何使用 `hiwebSocket.send` 方法发送不同类型的打印数据，包括 URL PDF、HTML 内容和模板打印数据。还包括了打印消息的回调处理。

```javascript
// 打印 url pdf
hiwebSocket.send({
  pdf_path: 'https://xxxx/xxx.pdf',
  type: 'url_pdf'
});
// 打印 html
hiwebSocket.send({
  html: '<div>打印html</div>',
});
// 模板打印
hiwebSocket.send({
  template: { panels: [ { xxxx }]}, // 模板json
  printData: {name: '张三'} // 打印数据
});

// hiwebSocket.send(xxx) 发送数据 等同于  hiwebSocket.socket.emit('news', xxx)


// 打印消息回调
hiwebSocket.socket.on('success', (data) => {
  console.log(data);
});
hiwebSocket.socket.on('error', (e) => {
  console.log(e);
});
```