vue 使用  print-template 生成pdf 打印 。支持生成二维码、条形码、文本、图片、线 

安装

yarn add print-template

或

npm install print-template

内容类型

内容属性

通用

线条 【line】

文本 【text】

 图片 【image】

条形码 【brcode】

 二维码【brcode】

使用

import printTemplate from 'print-template'


// 创建打印模板 
let  template  = new printTemplate()

// 模板数据
let yto= {
    name:'yto'       // 模板名称
    unit:'mm',       // 尺寸 默认mm    mm / px
    size: [76, 130], // 模板大小  宽 76mm / 高130mm
    fixed:[          // 固定内容 比如：线条 、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' // 图片地址  不支持跨域
        },
    ]

}