Hiprint

http://hiprint.io/docs/
Admin
Hiprint is a web-based JavaScript printing component that enables print preview, PDF/image...
Tokens:12,856
Snippets:30
Trust Score:2.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Basic Hiprint HTML Setup

This HTML code demonstrates the basic setup for using Hiprint in a web page. It includes linking the necessary CSS and JavaScript files, including jQuery, Hiprint core, and plugins for barcode and QR code generation.

```html
<!DOCTYPE html>
<html lang="zh-CN">
 <head>
 <meta charset="utf-8">
 <title>hinnn-hiprint</title>
 <!-- hiprint -->
 <link href="hiprint/css/hiprint.css" rel="stylesheet">
 <link href="hiprint/css/print-lock.css" rel="stylesheet">
 <link href="hiprint/css/print-lock.css" media="print" rel="stylesheet">
 
 </head>
 <body>
 <h1>hiprint 是一款用于web打印的js组件</h1>

 <!-- jQuery (hiprint 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
 <!-- 加载 hiprint 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
 <!-- polyfill.min.js解决浏览器兼容性问题v6.26.0-->
 <script src="hiprint/polyfill.min.js"></script>
 <!-- hiprint 核心js-->
 <script src="hiprint/hiprint.bundle.js"></script>
 <!-- 条形码生成组件-->
 <script src="hiprint/plugins/JsBarcode.all.min.js"></script>
 <!-- 二维码生成组件-->
 <script src="hiprint/plugins/qrcode.js"></script>
 <!-- 调用浏览器打印窗口helper类，可自行替换-->
 <script src="hiprint/plugins/jquery.hiwprint.js"></script>
 </body>
</html>
```

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

### Get Print HTML

Generates HTML for printing based on provided data and options. Options can include offsets for positioning and rules for displaying page numbers on even pages.

```JavaScript
//定义打印左上偏移量
template.getHtml(data,{leftOffset:-1,topOffset:-1 })
//设置页码显示规则 页码在偶数页显示位置与设置相互对称 （适应双面打印要求页码位置一致要求）
template.getHtml(data,{ paperNumberToggleInEven:true })
```

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

### Get Element by Name

Retrieves an array of template elements by their name. Optionally, a panel index can be specified to search within a particular panel.

```JavaScript
var elements= hiprintTemplate.getElementByName('testName');
var elements= hiprintTemplate.getElementByName(testName,1) ;
```

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

### Hiprint Page Number Display Rules

Shows how to set display rules for page numbers in Hiprint, specifically for even pages. This is useful for ensuring page number alignment in double-sided printing scenarios. It includes examples for both `print` and `getHtml` methods.

```javascript
template.print(data,{ paperNumberToggleInEven:true });
template.getHtml(data,{ paperNumberToggleInEven:true });
```

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

### Initialize Hiprint PrintTemplate

Initializes a new Hiprint PrintTemplate instance with specified options. The options object can configure template data, HTML containers for settings, and data sources for template fields.

```JavaScript
var hiprintTemplate = new hiprint.PrintTemplate(options);
```

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

### Hiprint Project Structure

This snippet outlines the directory structure of the Hiprint project, including CSS files, plugins, and core JavaScript bundles.

```bash
hiprint/
    ├── css/
    │   ├── hiprint.css
    │   ├── print-lock.css
    ├── plugins/
    │   ├── JsBarcode.all.min.js
    │   └── qrcode.js
    │   └── jquery.minicolors.min.js
    │   └── jquery.hiwprint.js
    ├── hiprint.bundle.js
    ├── polyfill.min.js
```

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

### Hiprint Table General Options

Outlines the general options for configuring Hiprint tables, including font properties, alignment, borders, and drag-and-drop axis.

```javascript
{
  field: "string", // Field name
  fontFamily: "string", // Font family (e.g., '宋体')
  fontSize: "number", // Font size (e.g., '9pt')
  lineHeight: "number", // Line height (e.g., '9.75pt')
  textAlign: "string", // Text alignment ('left', 'center', 'right')
  tableBorder: "string", // Table border ('noBorder' or 'border')
  tableHeaderBorder: "string", // Header border options
  tableHeaderCellBorder: "string", // Header cell border options
  tableHeaderRowHeight: "number", // Header row height in pt
  tableHeaderBackground: "string", // Header background color
  tableHeaderFontSize: "number", // Header font size
  tableHeaderFontWeight: "string", // Header font weight
  tableBodyCellBorder: "string", // Body cell border options
  tableBodyRowBorder: "string", // Body row border options
  tableBodyRowHeight: "number", // Body row height
  axis: "string", // Drag-and-drop axis ('v' for vertical, 'h' for horizontal)
  lHeight: "number" // Minimum element height for long text or sparse data
}
```

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

### Print Template

Initiates the printing process for the Hiprint template with provided data and options. Supports batch printing and custom offsets. Options for page number display on even pages are also available.

```JavaScript
hiprintTemplate.print({})
//批量打印
hiprintTemplate.print([{},{},{},{}])
//定义打印左上偏移量
template.print(data,{leftOffset:-1,topOffset:-1 })
//设置页码显示规则 页码在偶数页显示位置与设置相互对称 （适应双面打印要求页码位置一致要求）
template.print(data,{ paperNumberToggleInEven:true })
```

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

### 添加文本元素 (JavaScript)

使用 `panel.addPrintText` 方法向 Hiprint 打印面板添加一个文本元素。该方法接受一个包含 `options` 的对象，用于配置文本的宽度、高度、位置、标题和对齐方式等。

```javascript
panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
```

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

### Hiprint Image Element Options

Defines the configuration options for the image element in Hiprint. It includes properties for data binding, display rules, fixed positioning, and rotation.

```JavaScript
{
  title: string, // Title or content, if field exists: title is the title, print result is `title:data`, if field does not exist: title is content, print result is `title`
  field: string, // Field name
  src: string, // If field does not exist, display src content
  showInPage: string, // Display rules `Only header and footer elements or fixed position are valid`
    // first: first page display
    // odd: odd page display
    // even: even page display
    // last: last page display
  fixed: boolean, // Position fixed, printed to the specified position on each page
    // Fixed elements are detached from the normal printing flow, allowing elements not within the header or footer range to have the characteristic of outputting on each page.
    // It cooperates with the footer line setting of the specified page to set different footer information display on specified pages.
  axis: string, // Dragging direction during print design axis v: vertical h: horizontal. Must be explicitly enabled in the design method, template.design('#designDiv',{ axisEnabled:true })
  transform: number // Rotation angle
}
```

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

### Direct Print (Print2)

Skips the print preview and directly prints the template, requiring compatible software. Supports batch printing, custom offsets, and page number display rules. Printer-specific properties like name and title can also be set.

```JavaScript
hiprintTemplate.print2({})
//批量打印
hiprintTemplate.print2([{},{},{},{}])
//定义打印左上偏移量
template.print2(data,{leftOffset:-1,topOffset:-1 })
//设置页码显示规则 页码在偶数页显示位置与设置相互对称 （适应双面打印要求页码位置一致要求）
template.print2(data,{ paperNumberToggleInEven:true })
//指定打印机相关属性 template.print2(data,{ printer:'打印机名称',title:'打印任务名称' })
```

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

### 添加椭圆元素

使用 `addPrintOval` 方法在 Hiprint 打印面板中添加一个椭圆元素。可以配置椭圆的尺寸、位置和边框样式。

```javascript
panel.addPrintOval({ options: { width: 135, height:135,top: 30, left: 20,borderColor:'',borderWidth:0.75 } });
```

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

### 添加矩形元素 - Hiprint

使用 `addPrintRect` 方法在 Hiprint 打印模板中添加一个矩形元素。可以配置矩形的宽度、高度、边框颜色和边框宽度等属性。该方法是 Hiprint 库的一部分，用于定义打印布局。

```javascript
panel.addPrintRect({ options: { width: 135, height:135,top: 30, left: 20,borderColor:'',borderWidth:0.75 } });
```

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

### Add Hiprint Print Panel

Demonstrates how to add a print panel to the Hiprint template. This function allows you to define the dimensions (width and height) of the print area, as well as configure header and footer margins.

```javascript
var panel = hiprintTemplate.addPrintPanel({
    width: 100,
    height: 130,
    paperFooter: 340,
    paperHeader: 10
});
```

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

### Export to PDF

Exports the template content to a PDF file. Options include setting the file name, scale for clarity, offsets, and page number display rules.

```JavaScript
hiprintTemplate.toPdf(data,"测试导出");
hiprintTemplate.toPdf(data,"测试导出",{scale:4}) //scale 越大 pdf 越清晰，文件越大 性能越差 默认2;
hiprintTemplate.toPdf(data,"测试导出",{leftOffset:-1,topOffset:-1,scale:4,paperNumberToggleInEven:true});
```

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

### Hiprint Dynamic Element Addition

This JavaScript code demonstrates how to dynamically add various printing elements to a Hiprint template using its API. It covers adding text, barcodes, QR codes, long text, tables, HTML snippets, vertical lines, horizontal lines, and rectangles to a print panel.

```javascript
hiprint.init();
<!-- 创建打印模板对象-->
var hiprintTemplate = new hiprint.PrintTemplate();
<!-- 模板对象添加打印面板 paperHeader：页眉线 paperFooter：页尾线-->
var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
<!-- 文本 打印面板添加文本元素-->
panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
<!-- 条形码 打印面板添加条形码元素-->
panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });
<!-- 二维码 打印面板添加二维码元素-->
panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '二维码', textType: 'qrcode' } });
<!-- 长文本 打印面板添加长文本元素-->
panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本：' } });
<!-- 表格 打印面板添加表格元素 content为字符串 -->
panel.addPrintTable({ options: { width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } });
<!-- html 打印面板添加自定义html content为字符串或$('..') -->
panel.addPrintHtml({ options: { width: 140, height: 35, top: 180, left: 20, content:'' } });
<!-- 竖线 -->
panel.addPrintVline({ options: { height: 35, top: 230, left: 20 } });
<!-- 横线 -->
panel.addPrintHline({ options: { width: 140, top: 245, left: 120 } });
<!-- 矩形 -->
panel.addPrintRect({ options: { width: 35, height: 35, top: 230, left: 60 } });
<!-- 打印设计 -->
hiprintTemplate.design('#templateDesignDiv');
```

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

### Hiprint Print Element Type Configuration

Details the configuration for various print element types in Hiprint, including their identifiers, data sources, default values, and custom formatting or styling functions.

```JavaScript
{
  tid: string, // Identifier for the element type
  field: string, // Key corresponding to the data JSON for the print element
  data: string, // Default value displayed during print settings
  formatter: function, // Text element formatting function, requires three parameters: value, options, templateData
  styler: function, // Text element style function, returns a style object to customize the text element's style, requires four parameters: value, options, target, templateData
  onRendered: function, // Element rendered event, requires three parameters: target, options, paperTarget
  fields: Array // Element field data source [{field:'' ,text:'' }]
    // If fields exist, element fields are displayed as a dropdown.
    // If fields do not exist, element fields are displayed as input boxes.
    // Priority is higher than the template's global data source setting.
}
```

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

### Add Print Panel with Paper Footer

Demonstrates how to add a print panel using the hiprintTemplate library. It specifically shows how to set the paperFooter property to define the position of the footer line, which is repeated at the end of each printed page.

```javascript
var panel = hiprintTemplate.addPrintPanel({ paperFooter: 340, paperHeader: 10 });
```

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

### 添加长文本元素 (JavaScript)

使用 Hiprint 插件的 `panel.addPrintLongText` 方法向打印面板添加一个长文本元素。可以配置宽度、高度、边距、标题和文本对齐方式等选项。

```javascript
panel.addPrintLongText({
    options: {
        width: 140,
        height: 15,
        top: 20,
        left: 20,
        title: 'hiprint插件手动添加text',
        textAlign: 'center'
    }
});
```

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

### Add a Print Panel

Adds a new print panel to the Hiprint template. Panels can be customized with dimensions, header, and footer settings. A default A4 panel can also be added.

```JavaScript
var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
//默认A4面板
var panel = hiprintTemplate.addPrintPanel();
```

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

### Print by HTML

Prints content directly from an HTML element. This is useful for printing pre-rendered HTML snippets.

```JavaScript
hiprintTemplate.printByHtml($('#Id').html())
```

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

### Set Template Fields

Sets the data source for template elements, allowing them to be displayed as dropdowns or input fields based on the provided field data.

```JavaScript
hiprintTemplate.setFields([{field:'',text:''}]);
```

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

### Add Vertical Line - Hiprint

Adds a vertical line element to the Hiprint document. The 'options' parameter allows customization of height, position, border color, and border width. It also supports 'showInPage' for controlling visibility on specific pages and 'fixed' for positioning.

```javascript
panel.addPrintVline({ options: { height: 35, top: 230, left: 20,borderColor:'',borderWidth:0.75 } });
```

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

### Hiprint Table Element Properties

Defines the properties for the 'printElementType' of a table in Hiprint. This includes identifiers, display names, field names, and various functions for styling and formatting.

```javascript
{
  tid: "string", // Element type identifier
  title: "string", // Display name in the drag-and-drop list
  field: "string", // Field name
  styler: "function", // Function to customize table element styles
  rowStyler: "function", // Function to customize table row styles
  columns: "array<array>", // Configuration object for table columns
  formatter: "function", // Function to return table HTML string
  groupFields: "array", // Fields for data grouping
  groupFormatter: "function", // Function to format group headers
  footerFormatter: "function", // Function to format table footers
  gridColumnsFooterFormatter: "function", // Function for multi-group table footers
  groupFooterFormatter: "function", // Function to format group footers
  onRendered: "function", // Event triggered after element rendering
  fields: "array" // Data source for element fields
}
```

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

### Event Handling

Attaches event listeners for print success and print error events. Callbacks receive data related to the print job.

```JavaScript
hiprintTemplate.on('printSuccess', function (data) { })
hiprintTemplate.on('printError', function (data) { })
```

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

### Design Print Layout

Enables design mode for the print layout, allowing users to specify an HTML element by ID or class. An option to enable axis-based dragging is also available.

```JavaScript
design('#id') design('.class')
design('#id') design('.class', { axisEnabled:true } )
```

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

### Add Print Panel with Header Line - Hiprint

Demonstrates how to add a print panel using Hiprint and set the header line property. The header line is repeated at the top of each printed page. The `paperHeader` option defines the position of the header line.

```javascript
var panel = hiprintTemplate.addPrintPanel({ paperFooter: 340, paperHeader: 10 });
```

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

### Add Horizontal Line with Hiprint

This snippet demonstrates how to add a horizontal line to a Hiprint document. It utilizes the `addPrintHline` function with specified options for width, position, and border properties. The `printElementType` and `options` parameters are detailed for customization.

```javascript
panel.addPrintHline({ options: { width: 135, top: 30, left: 20,borderColor:'',borderWidth:0.75 } });
```

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

### Add Hiprint Panel with Page Numbers

Demonstrates how to add a print panel to Hiprint and configure its page number settings. The `paperNumberDisabled` option controls whether page numbers are initially disabled, and `paperNumberFormat` defines the display format.

```javascript
var panel = hiprintTemplate.addPrintPanel({ paperNumberDisabled:false,paperNumberFormat:'paperNo-paperCount' });
```

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

### Hiprint Table Column Attributes

Specifies the attributes for individual columns within a Hiprint table. This includes width, title, field mapping, fixed width, rowspan, colspan, and alignment.

```javascript
{
  width: "number", // Relative width, converted proportionally during rendering
  title: "string", // Column title
  field: "string", // Data field corresponding to the column
  fixed: "boolean", // Fixed width, not proportionally converted during rendering
  rowspan: "number", // Number of rows a cell spans
  colspan: "number", // Number of columns a cell spans
  align: "string", // Data alignment ('left', 'right', 'center')
  halign: "string", // Header alignment ('left', 'right', 'center')
  formatter: "function", // Cell formatting function
  styler: "function" // Cell styling function
}
```
Tokens:
Raw