Skip to content

Commit

Permalink
Merge pull request #138 from george-hong/main
Browse files Browse the repository at this point in the history 
feat: 拓展print2方法，支持分批打印（需使用客户端v1.0.11）
  • Loading branch information
@Xavier9896
Xavier9896 authored Aug 9, 2024
2 parents 8b9b31d + 69e4796 commit e678bc2
Show file tree
Hide file tree
Showing 4 changed files with 185 additions and 33 deletions.
34 changes: 33 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,42 @@
### 💐 同时自动更新 GitHub Pages 同步 Gitee;
### 💐 感谢各位贡献者的支持。 🔥

## 0.0.57-beta28(2024-08-10)
**⚠️⚠️⚠️ 有限的破坏性更新 Breaking changes**
<details>
<summary>01. 🌈 新增支持 print2支持分批打印（需客户端 v1.0.11）</summary>

支持单模版大单据量连续打印 @george-hong ([#138](https://github.com/CcSimple/vue-plugin-hiprint/pull/138))
```js
hiprintTemplate.print2(printDataList, {
printer: '打印机名称',
title: '打印标题',
printByFragments: true, // 是否需要分批打印，分批打印能够支持连续打印大量数据，但会增加打印所需时间
generateHTMLInterval: 30, // 多条数据生成HTML的间隔，单位ms，默认10
fragmentSize: 10000, // 分片字符长度，默认50000
sendInterval: 20, // 分片传输间隔，单位ms，默认10
})
```
</details>

<details>
<summary>02. ⚠️ 修改 print2 打印成功回调事件为 <b>success</b></summary>

项目初始时 print2 打印成功回调事件即为 `successs` 事件 (手抖多打了个 s)，electron-hiprint v1.0.8 重构关键代码时发现了该问题，为了标准及向下兼容，同时保留了 `succsss` 和 `success` 事件，经过 8 个多月的过渡期，现统一改为 `success` ，该改动仅对 electron-hiprint 1.0.7 及以前的客户端版本造成破坏性更新，后续版本无影响，我们也推荐大家及时更新至 1.0.11 以后的版本，体验更多优秀的功能。
</details>

## 0.0.57-beta27(2024-07-30)
<details>
<summary>01. 🐛️ fix 表格字段为图片，单元格高度无效修复</summary>

表格里面当字段类型为图片时，单元格高度设置无效 BUG 修复，并设置最小高度避免表单高度计算失败 @zhmlsj ([#131](https://github.com/CcSimple/vue-plugin-hiprint/pull/131))
</details>

## 0.0.57-beta26(2024-07-11)
<details>
<summary>01. ✨ 调整优化 水印 打印无需在浏览器预览勾选背景图案</summary>

需要支持 [-webkit-print-color-adjust](https://caniuse.com/?search=-webkit-print-color-adjust) 样式
需要支持 [-webkit-print-color-adjust](https://caniuse.com/?search=-webkit-print-color-adjust) 样式 @Xavier ([#129](https://github.com/CcSimple/vue-plugin-hiprint/pull/129))
</details>

## 0.0.57-beta25(2024-07-10)
Expand All @@ -22,6 +53,7 @@
<details>
<summary>01. 🌈 新增支持 添加 selectElementsByField 属性，通过传入field的字符串数组选中文本类型的元素</summary>

@xiaolonggee ([#123](https://github.com/CcSimple/vue-plugin-hiprint/pull/123))
```js
hiprintTemplate.selectElementsByField(['name'])
```
Expand Down
41 changes: 29 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,13 @@

## 关于此插件

vue-plugin-hiprint(基于[hiprint 2.5.4](http://hiprint.io/)) 当时只是为了方便<span style="color: red">我（并非hiprint原作者）</span> 在vue项目中引入使用，所以以此命名。
vue-plugin-hiprint (基于 [hiprint 2.5.4](http://hiprint.io/)) 当时只是为了方便 <span style="color: red">我（并非hiprint原作者）</span> 在vue项目中引入使用，所以以此命名。

此<span style="color: red">插件</span>仅仅是一个<span style="color: red">JavaScript【工具库】</span>而非 <span style="color: yellow">Vue【组件库】</span>，所以它默认是不包含demo中所见的那些组件页面的（demo代码随便复制修改拿去用）。
此 <span style="color: red">插件</span> 仅仅是一个 <span style="color: red">JavaScript【工具库】</span> 而非 <span style="color: yellow">Vue【组件库】</span>，所以它默认不包含demo中的那些组件页面（demo代码可复制使用）。

由于hiprint官网最后一次更新时间为2019年【hiprint 2.5.4 是 [LGPL](#关于lgpl协议) 协议】，后在诸多使用者及反馈下进行了许多优化调整。[更新日志](CHANGELOG.md)（同时感谢各位群友支持和参与）
由于hiprint官网最后一次更新时间为2019年【hiprint 2.5.4 是 [LGPL](#关于lgpl协议) 协议】，后在诸多使用者及反馈下进行了许多优化调整。

[更新日志](CHANGELOG.md)（感谢各位群友支持和参与）

## vue-plugin-hiprint [更新日志](CHANGELOG.md)
> hiprint for Vue2.x / Vue3.x (基于jQuery, 理论上应该也是支持其他框架的)
Expand All @@ -49,7 +51,7 @@ vue-plugin-hiprint(基于[hiprint 2.5.4](http://hiprint.io/)) 当时只是为了

Demo预览：[https://ccsimple.gitee.io/vue-plugin-hiprint/](https://ccsimple.gitee.io/vue-plugin-hiprint/)(已挂，恢复看gitee官方情况)

Github Demo预览：[https://ccsimple.github.io/vue-plugin-hiprint/](https://ccsimple.github.io/vue-plugin-hiprint/)(慢，请墙)
Github Demo预览：[https://ccsimple.github.io/vue-plugin-hiprint/](https://ccsimple.github.io/vue-plugin-hiprint/)(慢，需翻墙)

更新记录：[npm包版本及更新记录](CHANGELOG.md)

Expand Down Expand Up @@ -91,7 +93,9 @@ npm install vue-plugin-hiprint
```

```html
<!--【必须】在index.html 文件中添加打印所需样式(此cdn可能不稳定):-->
<!--【必须】在index.html 文件中添加打印所需样式(cdn可能不稳定):-->
<link rel="stylesheet" type="text/css" media="print" href="https://npmmirror.com/package/vue-plugin-hiprint/files/dist/print-lock.css">
<!-- OR -->
<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
<!-- 可以调整成 相对链接/自有链接, 【重要】名称需要一致 【print-lock.css】-->
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">
Expand Down Expand Up @@ -199,7 +203,7 @@ panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, t
hiprintTemplate.print({});
```

## i18n 设置
## i18n 设置 ⬆️ 0.0.55-beta8

原生为简体中文，英语、德语、西班牙语、法语、意大利语、日语、俄语、繁体中文皆为 AI 机翻，欢迎帮助 [订正](https://github.com/CcSimple/vue-plugin-hiprint/tree/main/src/i18n)。

Expand Down Expand Up @@ -360,8 +364,8 @@ this.$error({
import { hiprint } from 'vue-plugin-hiprint'

hiprint.init({
host: 'https://printjs.cn:17521', // 此处输入服务启动后的地址
token: 'vue-plugin-hiprint', // 用于鉴权的token
host: 'https://v4.printjs.cn:17521', // 此处输入服务启动后的地址
token: 'hiprint-17521', // 用于鉴权的token，hiprint* （*可替换为[0-9a-zA-Z\-_]字符）
});

// or
Expand Down Expand Up @@ -436,10 +440,23 @@ hiprintTemplate.on('printError', function (data) {
console.log('打印失败')
})
```
> 打印重叠 / 样式问题
> 大量单据连续打印 ⬆️ v0.0.57-beta28
```javascript
hiprintTemplate.print2(printDataList, {
printer: '打印机名称',
title: '打印标题',
printByFragments: true, // 是否需要分批打印，分批打印能够支持连续打印大量数据，但会增加打印所需时间
generateHTMLInterval: 30, // 多条数据生成HTML的间隔，单位ms，默认是10
fragmentSize: 10000, // 分片字符长度，默认50000
sendInterval: 20, // 分片传输间隔，单位ms，默认10
})
```
> 打印重叠 / 样式问题 ⬆️ v0.0.19
```javascript
/**
* 从 0.0.19 起, 在index.html添加:
* 从 在index.html添加:
* <link rel="stylesheet" type="text/css" media="print" href="https://npmmirror.com/package/vue-plugin-hiprint/files/dist/print-lock.css">
* 或者
* <link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
* 以处理打印所需css, 当然你也可以自行处理
* 比如： index.html目录下放一个print-lock.css, 然后在index.html添加:
Expand Down Expand Up @@ -469,9 +486,9 @@ hiprintTemplate.print2(this.printData, {
}
})
```
> 修改默认配置 / 显示/隐藏元素设置参数
> 修改默认配置 / 显示/隐藏元素设置参数 ⬆️ v0.0.13
```javascript
// 0.0.13， 新增setConfig方法
// 新增setConfig方法
// 还原配置
hiprint.setConfig()
// 替换配置
Expand Down
58 changes: 41 additions & 17 deletions src/demo/design/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@
<a-button type="primary" icon="printer" @click="print">
直接打印
</a-button>
<a-button type="primary" icon="printer" @click="printByFragments">
分批直接打印
</a-button>
<a-button type="primary" @click="onlyPrint">
Api单独打印
</a-button>
Expand Down Expand Up @@ -889,31 +892,52 @@ export default {
});
},
print() {
if (window.hiwebSocket.opened) {
this.doOperationWhenClientConnected(() => {
const printerList = hiprintTemplate.getPrinterList();
console.log(printerList)
hiprintTemplate.print2(printData, {printer: '', title: 'hiprint测试打印'});
})
},
printByFragments() {
this.doOperationWhenClientConnected(() => {
const dataList = new Array(50).fill(printData)
// 原有方法打印不成功，原因是获取HTML的方法处理时间过长，导致超过socket心跳间隔
// hiprintTemplate.print2(dataList, {printer: '', title: 'hiprint测试打印'});
hiprintTemplate.print2(dataList, {
printer: '',
title: 'hiprint测试打印',
printByFragments: true, // 是否需要分批打印，分批打印能够支持连续打印大量数据，但会增加打印所需时间
// generateHTMLInterval: 30, // 多条数据生成HTML的间隔，单位ms，默认是10
// fragmentSize: 10000, // 分片字符长度，默认50000
// sendInterval: 20, // 分片传输间隔，单位ms，默认10
// type: 'pdf',
});
})
},
doOperationWhenClientConnected(operation) {
if (window.hiwebSocket.opened) {
operation?.()
return
}
this.$error({
title: "客户端未连接",
content: (h) => (
<div>
连接【{hiwebSocket.host}】失败！
<br/>
请确保目标服务器已
<a
href="https://gitee.com/CcSimple/electron-hiprint/releases"
target="_blank"
>
下载
</a>
并
<a href="hiprint://" target="_blank">
运行
</a>
打印服务！
</div>
<div>
连接【{hiwebSocket.host}】失败！
<br/>
请确保目标服务器已
<a
href="https://gitee.com/CcSimple/electron-hiprint/releases"
target="_blank"
>
下载
</a>
并
<a href="hiprint://" target="_blank">
运行
</a>
打印服务！
</div>
),
});
},
Expand Down
85 changes: 82 additions & 3 deletions src/hiprint/hiprint.bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7717,6 +7717,39 @@ var hiprint = function (t) {
console.log("send data error:" + (t || "") + JSON.stringify(e));
}
},
sendByFragments: function(content) {
try {
const {
fragmentSize = 50000, // 单片字符长度
sendInterval = 10, // 分批传输间隔
html,
generateHTMLInterval, // 不需要传给client,取出字段
printByFragments, // 不需要传给client,取出字段
...otherFields
} = content
const contentToSplit = content.html
// 字符总数
const charsCount = contentToSplit.length
// 片段总数
const fragmentsCount = Math.ceil(charsCount / fragmentSize)
Array.apply(undefined, { length: fragmentsCount }).forEach((item, index) => {
const startIndex = index * fragmentSize
// 字符结束索引
const endIndex = index + 1 === fragmentSize ? charsCount : (index + 1) * fragmentSize
// socket分段发送内容
setTimeout(() => {
this.socket.emit('printByFragments', {
...otherFields,
index,
total: fragmentsCount,
htmlFragment: html.slice(startIndex, endIndex)
});
}, sendInterval * index);
})
} catch (e) {
console.log("send data fragment error:" + (content || "") + JSON.stringify(e));
}
},
getPrinterList: function getPrinterList() {
return this.printerList;
},
Expand Down Expand Up @@ -7791,7 +7824,8 @@ var hiprint = function (t) {
token: this.token
}
}), this.socket.on("connect", function (e) {
t.opened = !0, console.log("Websocket opened."), _this.socket.on("successs", function (t) {
t.opened = !0, console.log("Websocket opened."),
_this.socket.on("success", function (t) {
hinnn.event.trigger("printSuccess_" + t.templateId, t);
}), _this.socket.on("error", function (t) {
hinnn.event.trigger("printError_" + t.templateId, t);
Expand Down Expand Up @@ -10549,8 +10583,43 @@ var hiprint = function (t) {
}
});
return e && e.imgToBase64 && this.transformImg(i.find("img")), i;
}, t.prototype.getSimpleHtmlAsync = function (dataItemOrList, e) {
return new Promise(resolve => {
var that = this;
e || (e = {});
let rootElement = $('<div class="hiprint-printTemplate"></div>');
// 将数据转换成列表处理，简化代码
const dataList = Array.isArray(dataItemOrList) ? dataItemOrList : [dataItemOrList]
// 生成参数列表，用于后续递归
const paramsListToCreateHTML = []
dataList.forEach(function (data, dataIndex) {
data && that.printPanels.forEach(function (panel, o) {
paramsListToCreateHTML.push([panel, data, e])
});
});

function appendElementByParamsList(paramsListToCreateHTML, onFinish) {
if (!paramsListToCreateHTML.length) return onFinish();
const [panel, data, e] = paramsListToCreateHTML.shift();
rootElement.append(panel.getHtml(data, e));
// 每次生成Html之间留一些间隔，默认10，通过generateHTMLInterval字段控制
console.log('e.generateHTMLInterval', e.generateHTMLInterval)
setTimeout(() => appendElementByParamsList(paramsListToCreateHTML, onFinish), e.generateHTMLInterval ?? 10)
}

function onFinish() {
delete hinnn._paperList;
e && e.imgToBase64 && that.transformImg(rootElement.find("img"));
resolve(rootElement)
}

appendElementByParamsList(paramsListToCreateHTML, onFinish);
});
}, t.prototype.getHtml = function (t, e) {
return t || (t = {}), this.getSimpleHtml(t, e);
}, t.prototype.getHtmlAsync = function (t, e) {
// 分解生成HTML任务，留下空隙发送socket信息，避免断开连接
return t || (t = {}), this.getSimpleHtmlAsync(t, e);
}, t.prototype.getJointHtml = function (t, e, n) {
var i = $('<div class="hiprint-printTemplate"></div>'),
o = [];
Expand Down Expand Up @@ -10674,8 +10743,18 @@ var hiprint = function (t) {
e || (e = {});
var i = $.extend({}, n || {});
i.imgToBase64 = !0;
var o = t + this.getHtml(e, i)[0].outerHTML;
i.id = s.a.instance.guid(), i.html = o, i.templateId = this.id, hiwebSocket.send(i);
if (i.printByFragments) {
// 分批打印
this.getHtmlAsync(e, i)
.then(rootElement => {
var o = t + rootElement[0].outerHTML;
i.id = s.a.instance.guid(), i.html = o, i.templateId = this.id, hiwebSocket.sendByFragments(i, n);
})
} else {
// 同步打印
var o = t + this.getHtml(e, i)[0].outerHTML;
i.id = s.a.instance.guid(), i.html = o, i.templateId = this.id, hiwebSocket.send(i);
}
}, t.prototype.printByHtml = function (t) {
$(t).hiwprint();
}, t.prototype.printByHtml2 = function (t, e) {
Expand Down

0 comments on commit e678bc2

Please sign in to comment.