一个WEB 打印的JS组件,支持数据分组,快速分页批量预览,打印,转PDF,移动端,PC端

### **前言**

在数字化办公时代，打印需求呈现多样化和复杂化的趋势。现有的打印软件往往存在cao作繁琐、兼容性差、功能单一等问题，难以满足现代企业高-效、灵活的打印需求。

为了解-决这些痛点，一款简单、高-效、多功能的打印插件成为了迫切需求。

### **介绍**

HiPrint是一款免费、简单、快速的JS打印插件，它支持快速分页预览、打印、转换为PDF等功能。HiPrint无需安装额外软件，即可在多种cao作系统和浏览器上运行，适用于Angular、Vue、React等前端框架。

![图片](http://banmag.cn:8089/i/2024/07/01/668294f522b65.png)

#### **特点**

- 支持Windows、macOS、Linux系统，以及移动端和PC端浏览器。
- cao作简单，运行快速，预览界面采用CSS+HTML。
- 支持数据分组和批量预览，提高工作效率。
- 支持生成PDF和图片，方便文件的存储和传输。

### **技术架构**

HiPrint作为一个Web打印组件，基于JavaScript开发，易于集成到现有的Web项目中。

![图片](http://banmag.cn:8089/i/2024/07/01/668294f4ac286.png)

### **部署方式**

HiPrint的部署方式非常简便，直接通过引入JS文件即可。

```

<script src="path/to/hiprint.bundle.js"></script>
<script>
  // HiPrint初始化和使用代码
  hiprint.init();
  // 创建打印模板对象和添加打印元素的代码
</script>
```

### **其他的用法**** **![图片](http://banmag.cn:8089/i/2024/07/01/668294f4f2c83.png)** ****开源协议**

### **即刻体验一波**

HiPrint提供了丰富的打印功能，以下是一些核心功能的展示：

![图片](http://banmag.cn:8089/i/2024/07/01/668294f4bec1f.png)

**综合实例**：演示了如何通过拖拽和配置实现打印。

![图片](http://banmag.cn:8089/i/2024/07/01/668294f4cc1f0.png)

![图片](http://banmag.cn:8089/i/2024/07/01/668294f4eb002.png)

**Hiprint组件引入**：展示了如何在项目中引入HiPrint组件。

![图片](http://banmag.cn:8089/i/2024/07/01/668294f911180.png)

**票据定位套打**：介绍了如何使用HiPrint进行精-确的票据打印。

![图片](http://banmag.cn:8089/i/2024/07/01/668294fa45411.png)

**代码生成打印模板**：演示了如何通过代码生成打印模板。

![图片](http://banmag.cn:8089/i/2024/07/01/668294fa8c5b1.png)

**控制纸张大小和连续打印**：展示了如何控制打印的纸张大小和连续打印功能。

![图片](http://banmag.cn:8089/i/2024/07/01/668294faa8ae1.png)

**条码打印**：介绍了如何打印单个或批量打印条码。

![图片](http://banmag.cn:8089/i/2024/07/01/668294fab99cb.png)

**表格分页打印**：演示了表格的分页打印功能。

![图片](http://banmag.cn:8089/i/2024/07/01/668294fad2a04.png)

**HTML转PDF**：展示了如何将HTML内容转换为PDF并打印。

![图片](http://banmag.cn:8089/i/2024/07/01/668294fd60395.png)

**长文本分页打印**：介绍了长文本的分页打印功能。

![图片](http://banmag.cn:8089/i/2024/07/01/668294fe8fe10.png)

**批量设计模板**：提供了批量设计打印模板的方法。

![图片](http://banmag.cn:8089/i/2024/07/01/668294fec1fa3.png)

**公文批文打印**：展示了公文批文的打印方式。

![图片](http://banmag.cn:8089/i/2024/07/01/668294fec7026.png)

**直接打印**：介绍了如何实现直接打印功能。

![图片](http://banmag.cn:8089/i/2024/07/01/668294fecc041.png)

### **结语**

HiPrint作为一款多功能、易部署、跨平台的Web打印JS组件，为企业和开发者提供了高-效、灵活的打印解-决方案。

文档：hiprint.io/demo/list

> 原文地址 https://mp.weixin.qq.com/s/13jRiTTurFWUxRXdB-cR3Q