简单上手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的设置：

let myTemplate={
        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: {},       //水印设置
          },
        ],
      };

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

  在定义模板对象的时候传入自定义的模板：

  var hiprintTemplate = new hiprint.PrintTemplate({template:myTemplate})

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

     

       this.hiprintTemplate.print()

原文地址：https://blog.csdn.net/cyloser/article/details/142431408

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！