vue 打印（模板套打）

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 / 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( '打印文件' );
    
})

 

生成的文件截圖