Vue-Plugin-HiPrint销售单模板创建及数据绑定

Vue-Plugin-HiPrint 是一个灵活的 Vue.js 打印插件，提供了一个强大的打印解决方案，并支持自定义内容功能。在本文中，我将介绍如何使用 Vue-Plugin-HiPrint 来创建符合自己要求的模板并在项目中使用它。

效果展示：

1、安装

项目中如何引入Vue-Plugin-HiPrint请看vue3打印解决方案：Vue-Plugin-HiPrint

2、制作单据

打开作者提供的Demo预览地址，点击页面上的自定义设计。通过自定义设计功能，你可以根据自己的需求自定义销售单的样式、布局和其他参数。这个功能使你能够根据特定的业务需求创建适合自己公司品牌和风格的销售单模板。你可以调整文本样式、添加背景图像、设置边距、调整表格格式等。

根据自己的需求调整纸张的大小。在这个案例中，我使用的打印纸是210mm * 93mm，本文将以这个尺寸为例展开介绍，演示如何利用 Vue-Plugin-HiPrint 来创建适合这一特定纸张尺寸的销售单模板，并进行相应的调整和布局设置。

左侧的元素可以直接拖动到中间页面上，摆列成自己想要的布局。在页面中摆好元素后，你可以选中这些元素，然后在右侧的设置面板中调节具体的样式，包括字体样式、颜色、大小，背景色，边框样式等。能够根据个人喜好和需求进行实时的调整和预览。

表格添加一个序号列，选中表头中的一个单元格后，右键点击可以对表格进行添加、删除列/行等操作。在右侧的列tab页下，标题就是当前列表头的内容，可修改，字段类型设置为序号后，这一列会自动添加数字并按顺序逐个加一排列下去。

3、程序中给模板赋值

下面代码将展示如何使用 Vue-Plugin-HiPrint 插件将销售单进行赋值并打印。

title、orderId、name、tel等这些都是模板在设计过程中每个元素的字段名，这些字段名可以根据需求自行更改，这些字段名在赋值的时候使用。

javaScript 复制代码

import salesSlip from './salesSlip.json'//引入刚才制作的模板
    let printData = {
              title: this.orderTitle,//单据标题
              orderId: this.customer.orderNo,//单号
              name: this.customer.userName,
              tel: this.customer.phone,
              address: this.customer.address,
              date: this.customer.orderDate,
              table: this.goodsList,//表格的数据
              bottom_phone: this.bottom_phone,
              bottom_address: this.bottom_address,
              bottom_product: this.bottom_product,
              totalCap:this.convertToChinese(this.totalCap),
     let hiprintTemplate = new hiprint.PrintTemplate({ template: salesSlip });
            // 打印
     hiprintTemplate.print(printData);

将刚刚制作的模板文件 salesSlip.json 引入到当前文件中，创建一个名为 printData 的对象，将销售单的相关数据放入此对象中，包括单据标题、订单号、客户姓名、电话、地址、下单日期、商品列表等数据。接着通过hiprint.PrintTemplate 创建了一个名为 hiprintTemplate 的打印模板实例，将销售单模板 salesSlip放入这个实例中。最后，调用 hiprintTemplate 的 print 方法，将 printData 传入，用于生成并打印销售单。

销售单模板

json 复制代码

{"panels":[{"index":0,"name":1,"height":93,"width":210,"paperHeader":2.5,"paperFooter":215,"printElements":[{"options":{"left":70,"top":5,"height":17,"width":453,"testData":"单据表头","fontSize":14,"fontWeight":"500","textAlign":"center","hideTitle":true,"title":"单据表头","right":522.99609375,"bottom":21.9921875,"vCenter":296.49609375,"hCenter":13.4921875,"field":"title","coordinateSync":false,"widthHeightSync":false,"qrCodeLevel":0},"printElementType":{"title":"单据表头","type":"text"}},{"options":{"left":132.5,"top":20,"height":16,"width":90,"field":"name","testData":"高级客户","fontSize":10,"textContentVerticalAlign":"middle","title":"客户","coordinateSync":false,"widthHeightSync":false,"qrCodeLevel":0,"right":210.4921875,"bottom":64.4921875,"vCenter":165.4921875,"hCenter":56.4921875},"printElementType":{"title":"客户名称","type":"text"}},{"options":{"left":225,"top":20,"height":16,"width":97.5,"field":"tel","testData":"18888888888","fontSize":10,"textContentVerticalAlign":"middle","title":"电话","right":310.24999237060547,"bottom":64.50001525878906,"vCenter":265.24999237060547,"hCenter":56.50001525878906,"coordinateSync":false,"widthHeightSync":false,"qrCodeLevel":0},"printElementType":{"title":"客户电话","type":"text"}},{"options":{"left":327.5,"top":20,"height":16,"width":165,"field":"address","testData":"高级客户","fontSize":10,"textContentVerticalAlign":"middle","title":"地址","right":443.49998474121094,"bottom":64.25000762939453,"vCenter":383.49998474121094,"hCenter":56.25000762939453,"coordinateSync":false,"widthHeightSync":false,"qrCodeLevel":0},"printElementType":{"title":"客户名称","type":"text"}},{"options":{"left":17.5,"top":20,"height":16,"width":112.5,"field":"orderId","testData":"XS888888888","fontSize":10,"textContentVerticalAlign":"middle","title":"订单编号","right":124.9921875,"bottom":38.5,"vCenter":72.4921875,"hCenter":30.5,"coordinateSync":false,"widthHeightSync":false,"qrCodeLevel":0},"printElementType":{"title":"订单编号","type":"text"}},{"options":{"left":497.5,"top":20,"height":16,"width":87,"field":"date","testData":"2020-01-01","fontSize":10,"textContentVerticalAlign":"middle","title":"日期","right":579,"bottom":64.25000762939453,"vCenter":535.5,"hCenter":56.25000762939453,"coordinateSync":false,"widthHeightSync":false,"qrCodeLevel":0},"printElementType":{"title":"日期","type":"text"}},{"options":{"left":17.5,"top":37.5,"height":72,"width":564,"fields":[{"text":"名称","field":"product_name"},{"text":"数量","field":"num"},{"text":"规格","field":"specs"},{"text":"单位","field":"unit"},{"text":"单价","field":"unit_price"},{"text":"金额","field":"amount"},{"text":"备注","field":"notes"}],"field":"table","right":580.74609375,"bottom":127.9921875,"vCenter":298.74609375,"hCenter":91.2421875,"coordinateSync":false,"widthHeightSync":false,"fontSize":11,"tableFooterRepeat":"last","footerFormatter":"function(t,e,n,i){return n&&n[\"totalCap\"]?'<td style=\"padding:0 10px\" colspan=\"100\">'.concat(\"合计金额（大写）: \"+n[\"totalCap\"],\"</td>\"):'<td style=\"padding:0 10px\" colspan=\"100\">合计金额（大写）: </td>'}\n","autoCompletion":true,"maxRows":8,"tableHeaderRowHeight":17.25,"tableBodyRowHeight":17.25,"columns":[[{"width":41.714365405594435,"title":"序号","checked":true,"fixed":false,"rowspan":1,"colspan":1,"align":"center","tableTextType":"sequence","tableQRCodeLevel":0,"tableSummaryTitle":true,"tableSummary":""},{"width":129.15139051156532,"title":"名称","field":"product_name","checked":true,"columnId":"product_name","fixed":false,"rowspan":1,"colspan":1,"align":"center"},{"width":63.09427514792896,"title":"规格","field":"specs","checked":true,"columnId":"specs","fixed":false,"rowspan":1,"colspan":1,"align":"center","tableQRCodeLevel":0,"tableSummaryTitle":true,"tableSummary":""},{"width":41.04636834319538,"title":"单位","field":"unit","checked":true,"columnId":"unit","fixed":false,"rowspan":1,"colspan":1,"align":"center","tableQRCodeLevel":0,"tableSummaryTitle":true,"tableSummary":""},{"width":48.10402514792888,"title":"数量","field":"num","checked":true,"columnId":"num","fixed":false,"rowspan":1,"colspan":1,"align":"center","tableQRCodeLevel":0,"tableSummaryTitle":false,"tableSummary":"sum","tableSummaryNumFormat":"0"},{"width":59.01502514792905,"title":"单价","field":"unit_price","checked":true,"columnId":"price","fixed":false,"rowspan":1,"colspan":1,"align":"center"},{"width":96.13927514792891,"title":"金额","field":"amount","checked":true,"columnId":"amount","fixed":false,"rowspan":1,"colspan":1,"align":"center","tableQRCodeLevel":0,"tableSummaryTitle":true,"tableSummaryText":"￥:","tableSummary":"sum"},{"width":85.73527514792906,"title":"备注","field":"notes","checked":true,"columnId":"notes","fixed":false,"rowspan":1,"colspan":1,"align":"center"}]]},"printElementType":{"title":"订单数据","type":"table","editable":true,"columnDisplayEditable":true,"columnDisplayIndexEditable":true,"columnTitleEditable":true,"columnResizable":true,"columnAlignEditable":true,"isEnableEditField":true,"isEnableContextMenu":true,"isEnableInsertRow":true,"isEnableDeleteRow":true,"isEnableInsertColumn":true,"isEnableDeleteColumn":true,"isEnableMergeCell":true}},{"options":{"left":217.5,"top":217.5,"height":13.5,"width":120,"title":"自定义文本","field":"bottom_phone","coordinateSync":false,"widthHeightSync":false,"qrCodeLevel":0,"right":327.4921875,"bottom":240.99609375,"vCenter":267.4921875,"hCenter":234.24609375,"hideTitle":true,"showInPage":"last","fontSize":10},"printElementType":{"title":"自定义文本","type":"text"}},{"options":{"left":337.5,"top":217.5,"height":13.5,"width":120,"title":"收货人签名","field":"bottom_shou","coordinateSync":false,"widthHeightSync":false,"qrCodeLevel":0,"right":432.24609375,"bottom":263.49609375,"vCenter":372.24609375,"hCenter":256.74609375,"hideTitle":true,"showInPage":"last","fontSize":10},"printElementType":{"title":"自定义文本","type":"text"}},{"options":{"left":475,"top":217.5,"height":13.5,"width":120,"title":"  ","field":"bottom_shr","coordinateSync":false,"widthHeightSync":false,"qrCodeLevel":0,"right":594.99609375,"bottom":231.99609375,"vCenter":534.99609375,"hCenter":225.24609375,"hideTitle":true,"showInPage":"last","fontSize":10},"printElementType":{"title":"自定义文本","type":"text"}},{"options":{"left":17.5,"top":217.5,"height":13.5,"width":199.5,"title":"制单人","field":"bottom_address","coordinateSync":false,"widthHeightSync":false,"qrCodeLevel":0,"right":197.49609375,"bottom":231,"vCenter":107.49609375,"hCenter":224.25,"hideTitle":true,"showInPage":"last","fontSize":10},"printElementType":{"title":"自定义文本","type":"text"}},{"options":{"left":17.5,"top":235,"height":13.5,"width":564,"title":"制单人","field":"bottom_product","coordinateSync":false,"widthHeightSync":false,"qrCodeLevel":0,"right":197.49609375,"bottom":145.9921875,"vCenter":107.49609375,"hCenter":139.2421875,"hideTitle":true,"showInPage":"last","fontSize":10},"printElementType":{"title":"自定义文本","type":"text"}}],"paperNumberLeft":575,"paperNumberTop":-2.5,"paperNumberDisabled":true,"paperNumberContinue":true,"watermarkOptions":{"content":"","fillStyle":"rgba(184, 184, 184, 0.3)","fontSize":"14px","rotate":25,"width":200,"height":200,"timestamp":false,"format":"YYYY-MM-DD HH:mm"},"panelLayoutOptions":{"layoutType":"column","layoutRowGap":0,"layoutColumnGap":0}}]}