vue 使用hiprint

林伟^O^จุ๊บ

已于 2024-08-19 11:15:36 修改

阅读量470

点赞数 5

文章标签： vue.js 前端 javascript

于 2024-08-18 17:53:19 首次发布

本文链接：https://blog.csdn.net/weixin_42556273/article/details/141302819

版权

废话不多，代码来一波
1.首先去到它的官网：hiprint的官网：hiprint.io

2.下载js包：http://hiprint.io/Content/download/hiprint.zip

3.解压放到public 目录下

4.引入：

<!DOCTYPE html>
<html>
  <head>
  
    <!-- 可以调整成 相对链接/自有链接, 【重要】名称需要一致 【print-lock.css】-->
    <link rel="stylesheet" href="hiprint/css/hiprint.css">
    <link rel="stylesheet" href="hiprint/css/print-lock.css">
    <link rel="stylesheet" href="hiprint/css/print-lock.css" media="print">

  </head>
  <body>
    <!-- 引入js -->
    <script src="hiprint/plugins/jq-3.31.js"></script>
    <script src="hiprint/polyfill.min.js"></script>
    <script src="hiprint/hiprint.bundle.js"></script>
    <script src="hiprint/plugins/jquery.hiwprint.js"></script>
    <script src="hiprint/plugins/qrcode.js"></script>
    <script src="hiprint/plugins/JsBarcode.all.min.js"></script>

    <div id="app"></div>
    <!-- built files will be auto injected -->
    <div class="pre-loader" id="pre-loader">
      <div class="inner one"></div>
      <div class="inner two"></div>
      <div class="inner three"></div>
    </div>
  </body>
</html>

5.新建一个页面，下面只是demo

<template>
  <div class="divBox">
    <input type="button" value="标签打印" v-on:click="printTest" />
    <div id="templateDesignDiv"></div>
  </div>
</template>

<script>
  export default {
    // name: "app",
    data() {
      return {
        mypanel: {
          panels: [{
            index: 0,
            height: 30,
            width: 40,
            paperHeader: 0,
            paperFooter: 82.5,
            printElements: [{
                options: {
                  left: 7.5,
                  top: 16,
                  height: 15,
                  width: 127.5,
                  title: "测试",
                  fontSize: 6.75,
                  field: "product",
                  testData: "加多老吉茶 100889",
                  // hideTitle: true
                },
                printElementType: {
                  // title: "文本",
                  type: "text"
                }
              },
              {
                options: {
                  left: 7.5,
                  top: 26,
                  height: 33,
                  width: 127.5,
                  title: "测试1",
                  fontSize: 6.75,
                  field: "ptype",
                  testData: "酒水",
                  // hideTitle: true
                },
                printElementType: {
                  // title: "文本",
                  type: "text"
                }
              },
              {
                options: {
                  left: 7.5,
                  top: 36,
                  height: 33,
                  width: 127.5,
                  title: "测试2",
                  fontSize: 6.75,
                  field: "ptype",
                  testData: "酒水",
                  // hideTitle: true
                },
                printElementType: {
                  // title: "文本",
                  type: "text"
                }
              },
              {
                options: {
                  left: 7.5,
                  top: 46,
                  height: 33,
                  width: 127.5,
                  title: "测试3",
                  fontSize: 6.75,
                  field: "getTime",
                  testData: "酒水",
                  // hideTitle: true
                },
                printElementType: {
                  // title: "文本",
                  type: "text"
                }
              },
              {
                options: {
                  left: 7.5,
                  top: 28.5,
                  height: 30,
                  width: 170,
                  field: "code",
                  testData: "100889",
                  textAlign: "center",
                  textType: "qrcode"
                },
                printElementType: {
                  // title: "文本",
                  type: "text"
                }
              }
            ],
            paperNumberLeft: 111,
            paperNumberTop: 63,
            paperNumberDisabled: true
          }]
        }
        ]
      }
    },
    mounted() {},
    methods: {
      printTest() {
        let printData = {
          product: '测试',
          ptype: '测试2',
          code: '123456',
          getTime: "2024.08.01",
        }
        //  打印模板的json

        //获取系统时间进行打印
        let getDate = new Date();
        printData.printTime = getDate.getFullYear() + '.' + getDate.getMonth() + '.' + getDate.getDay() + ' ';
        printData.getTime = printData.printTime
        hiprint.init();
        //调用接口获取数据
        var hiprintTemplate = new hiprint.PrintTemplate({
          template: this.mypanel,
          settingContainer: "#templateDesignDiv",
        });
        hiprintTemplate.print([printData, printData, printData]);
      },
    },
  };
</script>
<style>
</style>

到此，已经可以使用了
6.如果有问题，可参考 gitee 的 vue-plugin-hiprint-start 也看一看hiprint 官网