简单上手vue使用vue-plugin-hiprint进行打印

vue-plugin-hiprint是一个功能十分强大的打印插件，正因为功能强大，所以看起来感觉非常复杂，网上示例代码为了追求展现其强大，往往也做的非常庞大，学和分析起来对新手都不友好。本文较简单的让大家上手了解如何使用vue-plugin-hiprint插件打印自己页面需要打印的内容。

1、安装插件：

npm i vue-plugin-hiprint 或npm install vue-plugin-hiprint

2、在要使用插件的页面导入插件：

import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";

3、定义一个模板对象并传入模板设置。所谓模板就是你想打印到纸张上的数据和格式的设置，描述你要在什么样的纸上打印什么样的数据，数据打印出来的格式是什么样的等等信息。

定义模板对象：var hiprintTemplate = new hiprint.PrintTemplate(options);

options就是所有要打印数据的设置信息了，是一个json对象，定义模板对象之前，你要先设置好这个json对象：

{template：模板json数据，settingContainer：用于输出的Html容器，fields：元素的字段数据源}。

这里如果你想先输出到网页上预览，就设置settingContainer，比如你要把打印内容放到页面上

<div id="PrintPreview"></div>

的容器中去，则直接设置为：settingContainer：PrintPreview，就可以了，其实打印控制界面已经有预览了，大部分场景我们不需要再先输出到网页上预览，所以，也可以不设置。fields我们这里不管它，主要用于实现下拉框等数据源的工作，也可以不设置。

所以，我们主要是要设置template，也就是打印模板的json数据。

4、打印模板template的设置：

{panels: [{            height: 296.6,        //输出纸张高度，此处为A4高width: 210,           //输出纸张宽度，此处为A4宽paperHeader: 0,       //页眉高度paperFooter: 0,       //页脚高度 //具体的打印内容设置printElements: [{ //画一个矩形options: { left: 4.5, top: 4.5,height: 189,width: 288, coordinateSync: false, widthHeightSync: false, borderColor: "#000" }, printElementType: { title: "矩形", type: "rect" } },{//画一个二维码options: {left: 145.5,top: 15,height: 123,width: 130.5,field: "UnitPriceId",testData: "CODE888888888",fontSize: 12,lineHeight: 18,textType: "qrcode",title: "二维码",right: 278.25,bottom: 127.5,vCenter: 211.5,hCenter: 71.25,},printElementType: { title: "二维码", type: "text" },},{//写一段文本options: { left: 15, top: 21, height: 17, width: 120, testData: "材料名称", fontSize: 10.5, fontWeight: "700", textAlign: "center", hideTitle: true, field: 'Name', title: "" },printElementType: { title: "", type: "text" },},//可以继续添加更多你想要写的内容],            paperNumberLeft: 267,        //页码左边距paperNumberTop: 176,        //页码顶边距paperNumberDisabled: true,  //是否屏蔽不显示页码watermarkOptions: {},       //水印设置},],};

上面这个设置画了一个矩形框，在矩形框里面画了一个二维码，并输出了一行文字。

5、定义完模板对象后，就可以直接打印了：