151 lines
4.6 KiB
Markdown
151 lines
4.6 KiB
Markdown
|
|
# print-template
|
|||
|
|
> 模板打印
|
|||
|
|
|
|||
|
|
## 安装
|
|||
|
|
|
|||
|
|
```sh
|
|||
|
|
npm install print-template
|
|||
|
|
#或
|
|||
|
|
pnpm install print-template
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import printTemplate from 'print-template'
|
|||
|
|
|
|||
|
|
let template = new printTemplate()
|
|||
|
|
|
|||
|
|
//添加模板
|
|||
|
|
template.push({
|
|||
|
|
name:'template1', // 模板名称
|
|||
|
|
unit:'mm', // 尺寸 mm / px
|
|||
|
|
size:'a4', // a4 或 [221,291]
|
|||
|
|
fixed:[ // 固定的数据
|
|||
|
|
{
|
|||
|
|
type:'line' , // 类型 线条 line / text / image / barcode / qrcode
|
|||
|
|
x:10, // x
|
|||
|
|
y:20, // y
|
|||
|
|
length:10, // 长度
|
|||
|
|
orientation:'l',// 方向 默认 l 横向 / p 竖向
|
|||
|
|
width:0.3, // 线段宽度 (1.2.8版本新增)
|
|||
|
|
color:'blue' // 线段颜色 (1.2.8版本新增)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type:'text' , // 类型 文本 line / text / image / barcode / qrcode
|
|||
|
|
default:'张三', // 默认值 \n 换行 或设置maxWidth大小
|
|||
|
|
x:10, // x
|
|||
|
|
y:20, // y
|
|||
|
|
fontSize:'20', // 字体大小
|
|||
|
|
fontFamily:'微软雅黑', // 字体类型 默认 '微软雅黑'
|
|||
|
|
fontWeight:null, // 字体宽度
|
|||
|
|
fontStyle:'normal', // 字体样式 normal / 斜体
|
|||
|
|
maxWidth:null, // 最大换行宽度
|
|||
|
|
orientation:'l', // 方向 默认 l 横向 / p 竖向
|
|||
|
|
color:'red' // 字体颜色 (1.2.8版本新增)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type:'image' , // 图片 文本 line / text / image / barcode / qrcode
|
|||
|
|
default:'图片地址', // *默认值 图片地址 或 base64
|
|||
|
|
x:10, // *x
|
|||
|
|
y:20, // *y
|
|||
|
|
width: 25, // *宽度
|
|||
|
|
height: 25, // *高度
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type:'barcode' , // 条形码 文本 line / text / image / barcode / qrcode
|
|||
|
|
default:'OK111111', // *默认值 条形码值
|
|||
|
|
x:10, // *x
|
|||
|
|
y:20, // *y
|
|||
|
|
width: 3, // *线宽
|
|||
|
|
height: 25, // *高度
|
|||
|
|
format: 'CODE128A', // 条形码格式
|
|||
|
|
fontOptions: 'bold' // 粗体 bold / italic / bold italic
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type:'qrcode' , // *条形码 文本 line / text / image / barcode / qrcode
|
|||
|
|
default:'二维码文本', // *默认值
|
|||
|
|
x:10, // *x
|
|||
|
|
y:20, // *y
|
|||
|
|
width: 25, // *宽度
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
data:{ // 动态数据
|
|||
|
|
code1: { // 传入数据的属性名称
|
|||
|
|
type:'barcode' , // 条形码 文本 line / text / image / barcode / qrcode
|
|||
|
|
x:10, // *x
|
|||
|
|
y:20, // *y
|
|||
|
|
width: 3, // *线宽度
|
|||
|
|
height: 25, // *高度
|
|||
|
|
format: 'CODE128A', // 条形码格式
|
|||
|
|
},
|
|||
|
|
code2:{ // 传入数据的属性名称
|
|||
|
|
type:'qrcode' , // *条形码 文本 line / text / image / barcode / qrcode
|
|||
|
|
x:10, // *x
|
|||
|
|
y:20, // *y
|
|||
|
|
width: 25, // *宽度
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 打印模板
|
|||
|
|
// 异步方法 返回 jspdf
|
|||
|
|
let pdf = await template.print(
|
|||
|
|
'template1', // 刚才添加的模板名称
|
|||
|
|
[ // 打印数据 {} 或 [{},{},{}]
|
|||
|
|
{
|
|||
|
|
code:'YOO11111111', // 条形码 CODE128A 类型 大写字母加数字
|
|||
|
|
code2:'记得start', // 二维码
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
code:'T00222222', // 条形码 CODE128A 类型 大写字母加数字
|
|||
|
|
code2:'记得start', // 二维码
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 下载 / 预览
|
|||
|
|
|
|||
|
|
// blob 地址
|
|||
|
|
let uri = pdf.output('bloburi', { filename: '打印文件' });
|
|||
|
|
|
|||
|
|
// 下载
|
|||
|
|
let fileName = 'test'
|
|||
|
|
pdf.save( fileName ||'打印文件' );
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 多页模版
|
|||
|
|
``` js
|
|||
|
|
{
|
|||
|
|
|
|||
|
|
name:'template1',
|
|||
|
|
unit:'mm',
|
|||
|
|
size:'a4',
|
|||
|
|
multiPage: true, // treu : 多页模板 false : 默认 单页
|
|||
|
|
// 分页方式 传入打印每行的数据 返回要打印的信息
|
|||
|
|
// - 返回 null 继续打印当前模版
|
|||
|
|
// - 返回 [] 空数组什么也不打印,当前页也不打印
|
|||
|
|
// - 返回 [{name:'模版名称',data:{打印对象}},{name:'模版名称',data:{打印对象}] 打印多页信息
|
|||
|
|
pageMode: function (data) {
|
|||
|
|
// 判断 存在 phone 属性 打印 当前模板 和 template1 模板
|
|||
|
|
if (data.phone) {
|
|||
|
|
return [{ name: this.name, data }, { name: 'template1', data: { text: data.phone } }]
|
|||
|
|
}
|
|||
|
|
return null
|
|||
|
|
},
|
|||
|
|
// 关联 模板 : 打印时验证存不存在模板 如果为空或模板为空 不生成pdf页
|
|||
|
|
linkTemplate: ['template1','template1'],
|
|||
|
|
... // 其他属性
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 例子
|
|||
|
|
|
|||
|
|
[例子](https://xxllxx.github.io/PrintTemplate/example/vue3.html)
|
|||
|
|
|
|||
|
|
[下载](https://xxllxx.github.io/PrintTemplate/example/vue3-print.zip)
|