【若依前后端分离】选中表格内容，打印为表格_若依 前端打印

基于hiprint 的vue-plugin-hiprint来打印

hiprint地址：hiprint.io
实现点击某些行的数据,然后点击打印按钮直接弹出下面的打印框

 

1.安装依赖

npm install vue-plugin-hiprint

2.找到依赖文件夹node_modules/vue-plugin-hiprint/dist/print-lock.css文件，赋值一份到public目录下，然后打开public/index.html，再其中添加下列代码

<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
<!--    * 以处理打印所需css, 当然你也可以自行处理-->
<!--    * 比如： index.html目录下放一个print-lock.css, 然后在index.html添加:-->
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">

3.再main.js中引入全局依赖

import {hiPrintPlugin} from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')

 

4.在所需要的页面中使用 ，this.selectedData是选中数据是一个数组，需要注意的是数组中字段需要与模板中定义的字段名相同

this.printTemplate是在hiprint.io中生成的

 handlePrint(){
      this.$pluginName.init();
      let hiprintTemplate = new this.$pluginName.PrintTemplate({
        template: JSON.parse(this.printTemplate),
      });
      var selectedData=this.selectedData;
      hiprintTemplate.print(selectedData);
    }

5.设计模板，上列代码中的this.printTemplate内容为下列代码

 

{
        "panels": [
          {
            "index": 0,
            "name": 1,
            "height": 297,
            "width": 210,
            "paperHeader": 49.5,
            "paperFooter": 780,
            "printElements": [
              {
                "options": {
                  "left": 17.5,
                  "top": 87.5,
                  "height": 72,
                  "width": 550,
                  "textAlign": "center",
                  "field": "printData",
                  "coordinateSync": false,
                  "widthHeightSync": false,
                  "columns": [
                    [
                      {
                        "width": 40,
                        "title": "字段1",
                        "field": "one",
                        "checked": true,
                        "columnId": "one",
                        "fixed": false,
                        "align": "center"
                      },
                      {
                        "width": 40,
                        "title": "字段2",
                        "field": "two",
                        "checked": true,
                        "columnId": "two",
                        "fixed": false,
                        "rowspan": 1,
                        "colspan": 1
                      },
                      {
                        "width": 40,
                        "title": "字段三",
                        "field": "three",
                        "checked": true,
                        "columnId": "three",
                        "fixed": false,
                        "rowspan": 1,
                        "colspan": 1
                      }
                    ]
                  ]
                },
                "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
                }
              }
            ],
            "paperNumberLeft": 565.5,
            "paperNumberTop": 819,
            "paperNumberContinue": true,
            "watermarkOptions": {
              "content": "vue-plugin-hiprint",
              "rotate": 25,
              "timestamp": true,
              "format": "YYYY-MM-DD HH:mm"
            }
          }
        ]
      }

6.表格内容，及标题 4中的this.selectedData内容为

{
        printData: [{
          one: '第一行第一列内容',
          two: '第一行第二列内容',
          three: '第一行第三列内容'
        },
          {
            one: '第二行第一列内容',
            two: '第二行第二列内容',
            three: '第二行第三列内容'
          }]
}