记录下vue-plugin-hiprint使用记录

引入依赖

npm install vue-plugin-hiprint --save

局部使用

import * as hiPrint from 'vue-plugin-hiprint'

这是我自己使用的demo

这里是全部代码

<template>

  <div id="app">

    <input type="button" value="资产打印" v-on:click="printTest" />

    <div id="templateDesignDiv">

    </div>

  </div>

</template>

<script>

const tableData = [

  {date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},  {date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},

  {date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},  {date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},

  {date: '2016-05-05',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},  {date: '2016-05-06',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},

  {date: '2016-05-07',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},  {date: '2016-05-08',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},

  {date: '2016-05-09',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},  {date: '2016-05-10',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},

  {date: '2016-05-11',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},  {date: '2016-05-12',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},

  {date: '2016-05-13',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},  {date: '2016-05-14',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},

  {date: '2016-05-15',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},  {date: '2016-05-16',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},

]

import * as hiPrint from 'vue-plugin-hiprint'

export default {

  name: "app",

  data() {

    return {

      name: "测试患者",

      mrn: "356745",

      jcms: "1、测试描述1\n2、测试描述2\n3、测试描述\n2、测试描述2\n3、测试描述\n2、测试描述2\n3、测试描述\n2、测试描述2\n3、测试描述\n2、测试描述2\n3、测试描述\n2、测试描述2\n3、测试描述\n2、测试描述2\n3、测试描述\n2、测试描述2\n3、测试描述\n2、测试描述2\n3、测试描述",

      mypanel: {

        "panels": [{

          "index": 0, "paperType": "A4", "height": 296, "width": 210, "paperHeader": 100, "paperFooter": 805,

          "printElements": [

            //图片

            { "options": { "left": 19.5, "top": 30, "height": 37, "width": 180, "src": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" }, "printElementType": { "title": "图片", "type": "image" } },

            //文本

            { "options": { "left": 30, "top": 81, "height": 9.75, "width": 120, "title": "姓名", "field": "name" }, "printElementType": { "type": "text" } },

            { "options": { "left": 150, "top": 81, "height": 9.75, "width": 120, "title": "病历号", "field": "mrn" }, "printElementType": { "type": "text" } },

            { "options": { "left": 30, "top": 100, "height": 30, "width": 120, "title": "检查描述：" }, "printElementType": { "type": "longText" } },

            { "options": { "left": 50, "top": 140, "height": 30, "width": 120, "title": "", "field": "jcms" }, "printElementType": { "type": "longText" } },

            //表格内容

            {

              'options': {

                'left': 19.5, 'top': 190,//表格高度

                'height': 39,

                'width': 549,

                'textAlign': 'center',

                'field': 'detailList',//表格数据

                'columns': [[//表格列

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

                  { 'title': '产品代码', 'field': 'name', 'width': 83.85182567889859, 'colspan': 1, 'rowspan': 1, 'checked': true, 'columnId': 'name' },

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

                ]]

              },

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

            },

          ],

          "paperNumberLeft": 565, "paperNumberTop": 819

        }]

      },

    }

  },

  mounted() {

  },

  methods: {

    printTest() {

      const printData = {

        detailList: tableData,

        name: this.name,

        jcms: this.jcms,

        mrn: this.mrn,

      };

      //获取系统时间进行打印

      //let getDate = new Date();

      //let getDate_y_m_d = getDate.getFullYear() + '.' + getDate.getMonth() + '.' + getDate.getDay() + ' ';

      //调用接口获取数据

      var hiprintTemplate = new hiPrint.hiprint.PrintTemplate({

        template: this.mypanel,

        settingContainer: "#templateDesignDiv",

      });

      hiprintTemplate.print(printData, {}, {

        styleHandler: () => {

          // 这里拼接成放html->head标签内的css/style

          // 1.例如：使用hiprin官网的样式

          let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">'

          // 2.重写样式：所有文本红色

          css += '<style>.hiprint-printElement-text{color:red !important;}</style>'

          return css

        }

      });

    },

  },

};

</script>

<style>

.t {

  width: 0mm;

}

</style>