# vue-plugin-hiprint
**Repository Path**: webguide/vue-plugin-hiprint
## Basic Information
- **Project Name**: vue-plugin-hiprint
- **Description**: vue-plugin-hiprint预览、打印自定义报表demo
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 3
- **Forks**: 1
- **Created**: 2024-11-12
- **Last Updated**: 2025-07-07
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
### 项目介绍
本项目使用 vue-plugin-hiprint 实现自定义报表模版的预览和打印
### 报表设计工具
https://ccsimple.github.io/vue-plugin-hiprint
### 自定义报表模版
- 1、打开 excel 文件 print.xlsx ，关闭 excel 的超链接自动转换功能
- windows:工具-选项-编辑与显示-取消勾选”键入时将 Internet 及网络路径转换为超链接(R)“
- mac:文件-表格偏好设置-编辑-取消勾选”键入时将 Internet 及网络路径转换为超链接(R)“
- 2、在 print.xlsx 文件 绘制打印模版,并写入字段 "\\\\${d.xxx}"，
- 3、excel 中选中模版并复制，打开 https://www.lingdaima.com/table/ 粘贴，转换 html 代码，然后下载，使用 vscode 打开
- 表格打印时边框有粗有细
```css
/* 修改模版以下样式 */
table {
border-width: 1px;
background-color: #fff;
width: 100%;
}
table td {
border-width: 1px;
font-size: 13px;
padding: 5px;
}
```
```html
```
- 4、复制标签及里面的内容去 https://tool.36130.com/code/html_minifier.html 进行 html 代码压缩，删除 table 下的 `style="width: 485.02pt"`行内样式
- 5、将压缩后的代码放到 mb.json 中的 #替换# 位置
- 6、刷新项目预览
### hiprint 官方文档
- http://hiprint.io/docs/template
- https://ccsimple.github.io/sv-print-docs/config/hiprint.html
### 模版.json
```json
{
"panels": [
{
"index": 0,
"name": 1,
"height": 297,
"width": 210,
"paperHeader": 0,
"paperFooter": 842,
"printElements": [
{
"options": {
"left": 28.5,
"top": 27,
"height": 151.5,
"width": 538.5,
"formatter": "function(t, e, d) {\nvar html = `#替换#`\n\n// ! 这里的处理很关键\nif (d) {\n return html.replace(/\\${(\\S+)}/g, (match, key) => {\n return eval(key);\n });\n} else {\n return html;\n}\n// ! 这里的处理很关键}",
"right": 577.5,
"bottom": 457,
"vCenter": 303,
"hCenter": 242
},
"printElementType": {
"title": "html",
"type": "html"
}
}
],
"paperNumberLeft": 565.5,
"paperNumberTop": 819,
"paperNumberDisabled": true,
"paperNumberContinue": true,
"watermarkOptions": {},
"panelLayoutOptions": {}
}
]
}
```
### window.print 打印时默认不会打印背景图形，将下面代码压缩后放入 mb.json 中 html 模版中可以打印背景图形
demo 中已在 print 方法的 styleHandler 做了处理
```html
```
### 注意点
excel 中如果一个单元格中有多个填充字段时
```
比如：\\${d.date}-\\${d.type}-门诊挂号日报表
需要以下写法：\\${d.date}-${d.type}-门诊挂号日报表
```