Vue套用hiprint插件實現(xiàn)打印分頁

hncdman 2023-02-27 發(fā)布于湖南

展開全文

你離優(yōu)秀差多少

已于 2022-06-08 13:49:17 修改

3839

文章標簽：前端 vue.js js

版權(quán)

一,、Vue下依賴包

npm i easy-print

二,、代碼

1.引入：

import hiprint from 'easy-print'//引入hiprint

import panel from './panel.js'//引入打印樣式

2.data里聲明模板變量：

hiprintTemplate: new hiprint.PrintTemplate({ template: panel }),

3.在打印按鈕調(diào)用方法：

hiprintContent(){

//給模板字段賦值

var printData = {

supp: this.print_data.supp,//表頭-供應(yīng)商

order: this.print_data.order,//表頭-單號

address: this.print_data.SUPPADDR,//表頭-地址

sendDate: this.print_data.date,//表頭-送貨日期

tell: this.print_data.SUPPTEL,//表頭-電話

qrcode:this.print_data.order,//表頭-二維碼

detailList:this.print_tatle_data,//表格數(shù)據(jù)

};

this.hiprintTemplate.print(printData);

三,、panel.js

const panel = {

panels: [

{'height': 140,//紙張的高

'width': 215,//紙張的寬

'paperHeader': 115,//頁頭的高度,，調(diào)整高度可設(shè)置分頁的頁眉內(nèi)容

'paperFooter': 330,//頁尾的高度,，調(diào)整高度可設(shè)置分頁的頁尾內(nèi)容

'printElements': [{'options': {'left': 262.5, 'top': 22.5, 'height': 9.75, 'width': 82.5, 'title': '送貨單', 'fontSize': 19.5, 'fontWeight': 600, 'color': '#000'},

'printElementType': {'type': 'text'}}, {'options': {'left': 19.5, 'top': 60, 'height': 9.75, 'width': 300, 'title': '供應(yīng)商', 'field': 'supp', 'fontSize': 14, 'color': '#000'},

'printElementType': {'type': 'text'}}, {'options': {'left': 300, 'top': 60, 'height': 9.75, 'width': 200, 'title': '單號', 'field': 'order', 'fontSize': 14, 'color': '#000'},

'printElementType': {'type': 'text'}}, {'options': {'left': 19.5, 'top': 80, 'height': 9.75, 'width': 400, 'title': '地址', 'field': 'address', 'fontSize': 14, 'color': '#000'},

'printElementType': {'type': 'text'}}, {'options': {'left': 19.5, 'top': 100, 'height': 9.75, 'width': 200, 'title': '送貨日期', 'field': 'sendDate', 'fontSize': 14, 'color': '#000'},

'printElementType': {'type': 'text'}}, {'options': {'left': 300, 'top': 100, 'height': 9.75, 'width': 200, 'title': '電話', 'field': 'tell', 'fontSize': 14, 'color': '#000'},

'printElementType': {'type': 'text'}}, {'options': {'left': 470, 'top': 50, 'height': 60, 'width': 60, 'field': 'qrcode', 'textType': 'qrcode'},

'printElementType': {'type': 'text'}},

//到這里為止是頁眉的內(nèi)容,，下面是表格會自動分頁

{'options': {'left': 19.5,

'top': 120,//表格高度

'height': 39,

'width': 549,

'textAlign': 'center',

'field': 'detailList',//表格數(shù)據(jù)

'columns': [[//表格列

{'title': '序號', 'field': 'SHOWSERIAL', 'width': 28.675373869095594, 'colspan': 1, 'rowspan': 1, 'checked': true, 'columnId': 'SHOWSERIAL'},

{'title': '產(chǎn)品代碼', 'field': 'PROD', 'width': 83.85182567889859, 'colspan': 1, 'rowspan': 1, 'checked': true, 'columnId': 'PROD'},

{'title': '品名', 'field': 'NAME', 'width': 109.20163436367484, 'colspan': 1, 'rowspan': 1, 'checked': true, 'columnId': 'NAME'},

{'title': '規(guī)格', 'field': 'SPEC', 'width': 54.34142950693378, 'colspan': 1, 'rowspan': 1, 'checked': true},

{'title': '送貨數(shù)量', 'field': 'QTY', 'width': 44.082548951480675, 'colspan': 1, 'rowspan': 1, 'checked': true, 'columnId': 'QTY'},

{'title': '單位', 'field': 'UNITNAME', 'width': 43.366939065981505, 'colspan': 1, 'rowspan': 1, 'checked': true, 'columnId': 'UNITNAME'},

{'title': '含稅單價', 'field': 'PRICETAX', 'width': 43.06711654562698, 'colspan': 1, 'rowspan': 1, 'checked': true, 'columnId': 'PRICETAX'},

{'title': '合計', 'field': 'ALL', 'width': 45.989780649905455, 'colspan': 1, 'rowspan': 1, 'checked': true, 'columnId': 'ALL'},

{'title': '備注', 'field': 'REMARK', 'width': 43.878609887169446, 'colspan': 1, 'rowspan': 1, 'checked': true, 'columnId': 'REMARK'}

]]

'printElementType': {'title': '表格', 'type': 'tableCustom'}},

{'options': {'left': 19.5, 'top': 330, 'height': 9.75, 'width': 270, 'title': '購貨單位：金華有限公司', 'fontSize': 13, 'color': '#000'},'printElementType': {'type': 'text'}},

{'options': {'left': 220, 'top': 330, 'height': 9.75, 'width': 250, 'title': '地址：浙江省金華市', 'fontSize': 13, 'color': '#000'},'printElementType': {'type': 'text'}},

{'options': {'left': 450, 'top': 330, 'height': 9.75, 'width': 250, 'title': '電話：12345', 'fontSize': 13, 'color': '#000'},'printElementType': {'type': 'text'}},

{'options': {'left': 19.5, 'top': 350, 'height': 9.75, 'width': 250, 'title': '購貨單位簽收:', 'fontSize': 13, 'color': '#000'}, 'printElementType': {'title': '自定義文本', 'type': 'text'}

}],

'paperNumberLeft': 565.5,

'paperNumberTop': 380,//頁碼位置

'paperNumberFormat': 'paperNo/paperCount'}

]

}

export default panel

文章知識點與官方知識檔案匹配,，可

————————————————

版權(quán)聲明：本文為CSDN博主「你離優(yōu)秀差多少」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明,。

原文鏈接：https://blog.csdn.net/weixin_45891332/article/details/124426242