vue 使用 print-template 生成pdf 打印 。支持生成二维码、条形码、文本、图片、线
安装
yarn add print-template或npm install print-template内容类型
| line | 线条 |
| barcode | 条形码 |
| qrcode | 二维码 |
| image | 图片 |
| text | 文本 |
内容属性
通用
| x | 必须 所有类型 |
| y | 必须 所有类型 |
| default | 固定内容默认值 |
线条 【line】
| length | 线条长度 | number |
| orientation | 线条方向 p 竖线 / l 横线 | string |
文本 【text】
| fontSize | 字体大小 | number |
| fontWeight | 字体宽度 | number |
| fontFamily | 字体类型 默认 微软雅黑 | string |
| maxWidth | 最大宽度 换行使用（目前英文和数字计算有问题） | number |
图片 【image】
| width | 图片宽度 | number |
| height | 图片高度 | number |
条形码 【brcode】
| format | 条形码格式 CODE128A/B/C ....... | string |
| width | 生成线条的宽度 内容越多 宽度约大 生成的条形码约长 | number |
| height | 高度 条形码加字体高度 | number |
| margin | 条形码白边边距 | number |
| displayValue | 是否显示文字 | boolean |
| fontSize | 字体大小 | number |
| fontOptions | 字体样式 粗体 bold / 斜体 italic / 粗斜体 bold italic | string |
二维码【brcode】
| width | 二维码宽度 | number |
使用
import printTemplate from 'print-template'// 创建打印模板
let template = new printTemplate()// 模板数据
let yto= {name:'yto' // 模板名称unit:'mm', // 尺寸 默认mm mm / pxsize: [76, 130], // 模板大小 宽 76mm / 高130mmfixed:[ // 固定内容 比如：线条 、logo 广告、固定字体 // 个人觉得 制作一个透明的底图 不需要一条线一条线设置{ type: 'line', x: 2, y: 12, length: 72 },{ type: 'line', x: 2, y: 12, orientation: 'p', length: 116 },{ type: 'line', x: 74, y: 12, orientation: 'p', length: 116 },{ type: 'line', x: 2, y: 27, length: 72 },{ type: 'line', x: 2, y: 35, length: 72 },{ type: 'line', x: 2, y: 41, length: 52 },{ type: 'line', x: 54, y: 35, orientation: 'p', length: 32 },{ type: 'line', x: 54, y: 49, length: 20 },{ type: 'line', x: 2, y: 59, length: 72 },{ type: 'line', x: 2, y: 67, length: 72 },{ type: 'line', x: 2, y: 77, length: 72 },{ type: 'line', x: 2, y: 110, length: 72 },{ type: 'line', x: 2, y: 128, length: 72 }, { type: 'text', fontSize: 3.8, fontWeight: 700, x: 66, y: 2, default: '货到\n付款' }, // 固定文字 \n 换行 也可以设置 maxWidth:3.8*2 自动换行 ],data:{ // 动态数据name: { type: 'text', x: 8, y: 45, fontSize: 3.5 },code: { type: 'barcode', x: 7, y: 13, format: 'CODE128A', width: 4, margin: 0, fontSize: 3.3, fontOptions: 'bold', displayValue: true, height: 13 },}}// 添加模板
template.push(yto)// 传入数据
let data = [{name:'张三1',code:'YT100011111'},{name:'张三2',code:'YT100011112'}]// 打印
template.print('yto', data).then(pdf=>{// 返回 jspdf// blob 地址let uri = pdf.output('bloburi', { filename: '打印文件' });// 下载保存pdf.save( '打印文件' );})
生成的文件截图
问题
最近有人私信问我一些问题，在这里回复一下
1、底图
模板中 logo 图标 ，提示文字，边框线或二维码等在固定内容可以合成一张透明图片 在 fixed 中只需设置一次图片类型内容即可
注意：width 和 height 必须是数字类型
{size: [76, 130], //模板大小fixed: [{ type: 'image', // 内容类型 图片width: 76, // 图片宽度一般和模板宽度相同 数字类型 height: 130, // 图片高度一般和模板高度度相同 数字类型 default:'/files/bg.png' // 图片地址 不支持跨域},]}
