当前位置:   article > 正文

若依vue打印的简单方法_vue-plugin-hiprint

vue-plugin-hiprint

像我们后端程序员做前端的话,有时候真不需要知道什么原理,直接塞就好了
我们选用基于hiprint 的vue-plugin-hiprint来打印
目的是为了实现点击某些行的数据,然后点击某个按钮直接弹出下面的打印
别光看不点赞啊,能解决大问题就回来给我点个赞啊!!!
在这里插入图片描述
此链接 的开源插件大佬是原创,我且拿来使用梳理一下
插件进阶功能请移步: 链接
插件模板制作页面: 链接

首先安装2个依赖

npm install vue-plugin-hiprint
npm i jquery --save-d
npm install vue-plugin-hiprint@0.0.55-beta3
这里是更新包,想获取最新包移步:https://github.com/CcSimple/vue-plugin-hiprint/blob/main/CHANGELOG.md

  • 1
  • 2
  • 3
  • 4
  • 5

然后找到项目中的依赖文件夹node_modules/vue-plugin-hiprint/dist/中的print-lock.css文件,复制一份到自己项目的静态资源目录public下
在这里插入图片描述

然后在 public/index.html 中添加:

 <link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css">
  • 1

在这里插入图片描述

然后 main.js 中引入 依赖

import { hiPrintPlugin } from 'vue-plugin-hiprint'
//引入一维码
import JsBarcode from "jsbarcode";

Vue.use(hiPrintPlugin, '$pluginName')
import jquery from 'jquery'
Vue.prototype.$ = jquery
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

将下面的代码复制到自己项目中

methods: {
    //打印部分
    // 初始化
    init() {
      // 初始化 打印对象
      const hiprintTemplate = new this.$pluginName.PrintTemplate()
      this.hiprintTemplate = hiprintTemplate
    },
    // 获取打印机列表
    getPrinterList() {
      if (window.hiwebSocket.opened === false) {
        this.$notify.error('打印机客户端未连接')
      }
      // 模板对象获取
      const printerList_ = this.hiprintTemplate.getPrinterList()
      console.info(printerList_)
    },

    // 使用 hiPrintPlugin 控件打印
    confirmPrintPrint(row) {

      // 如果在 main.js 中设置了取消自动连接客户端 是获取不到打印机列表的!!!
      if (window.hiwebSocket.opened === false) {
        this.$notify.error('打印机客户端未连接,请点击右上角头像下载打印客户端')
      }

      // 这一句代码 如果打印出来有问题 可以尝试加进去,没有出现 则不用加
      // 初始化 provider
      this.$pluginName.init({
        providers: [defaultElementTypeProvider()]
      })
      // 这一句代码 如果打印出来有问题 可以尝试加进去,没有出现 则不用加
      this.$pluginName.PrintElementTypeManager.buildByHtml(this.$('.ep-draggable-item'))


      // 清空原内容
      this.$('#printDivXm3').empty()

      // 不使用全局对象, 使用模版打印,在线设计模版:https://ccsimple.gitee.io/vue-plugin-hiprint/
      const hiprintTemplate = new this.$pluginName.PrintTemplate({
        template:

          {"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,"field":"dayincanshu","groupFooterFormatter":"function(t,e){return\"这里自定义统计脚信息\"}","groupFieldsFormatter":"function(type,options,data){ return [\"name\"] }","coordinateSync":false,"widthHeightSync":false,"columns":[[{"width":70,"title":"行号","field":"id","checked":true,"columnId":"id","fixed":false,"rowspan":2,"colspan":1},{"width":100,"title":"人员信息","checked":true,"fixed":false,"rowspan":1,"colspan":2},{"width":100,"title":"销售统计","checked":true,"fixed":false,"rowspan":1,"colspan":2}],[{"width":120,"title":"姓名","field":"name","checked":true,"columnId":"name","fixed":false,"rowspan":1,"colspan":1,"align":"left"},{"width":120,"title":"性别","field":"gender","checked":true,"columnId":"gender","fixed":false,"rowspan":1,"colspan":1},{"width":120,"title":"销售数量","field":"count","checked":true,"columnId":"count","fixed":false,"rowspan":1,"colspan":1},{"width":120,"title":"销售金额","field":"amount","checked":true,"columnId":"amount","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"}}]}


      })

      // 挂载打印内容
      hiprintTemplate.design('#printDivXm3')

      // 打印数据,要和 上面 panel 内的 field 参数一致
      const table = [{
        id: '我是条形码内容',
        name: '我是测试内容1',
        gender: '我是测试内容2'
      },
        {
          id: '我是条形码内容',
          name: '我是测试内容1',
          gender: '我是测试内容2'
        },]
     
      const contentToPrint = document.getElementById("contentToPrint");
        var dayincanshu = {
          // dayincanshu:this.dayincanshu
          dayincanshu:table
        }
        hiprintTemplate.print(dayincanshu)
    },}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69

注意这个字段名要匹配,就ok 了
在这里插入图片描述
2023.12.26日更新:
发现此插件可能与Raw Loader 加载器起冲突,导致线框无法加载。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/629279
推荐阅读
相关标签
  

闽ICP备14008679号