HttpPrinter 与vue结合 实现网页打印技术

本文HttpPrinter版本必须大于等于4.0.0.31

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、HttpPrinter下载

HttpPrinter下载

二、使用步骤

1.解压双击点击

     ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210306135650260.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FTWVRQ,size_16,color_FFFFFF,t_70)

2.vue代码模板

在下载包中：

可以先体验一下。

三、使用步骤

main.js

import axios from 'axios'
//axios.defaults.baseURL = '/api'
Vue.prototype.$http = axios

业务代码

dosth() {

      const ip = '127.0.0.1'
      const port = 12345
      // let omo=[]
      // var msg = '{'
      //   +'"method":"' + 'getprinterlist' +'"'  /*报表类型 gridreport fastreport reportmachine 为空 将默认为gridreport  */
      //   +',"token":"' + 'aa' +'"' /*可选。只要token值在列表中 方可打印*/
      //   +',"taskId":"' + '1234567' +'"' /*可选。多个打印任务同时打印时，根据该id确定返回的是哪个打印任务。 */
      //   + '}';
      this.$http.get(
        'http://' + ip + ':' + port + '/?time=' + new Date().getTime()).then(ers => {
        console.log('链接成功');
        this.lianjie()
      })},
      //链接打印机列表
      lianjie() {
        const ip = '127.0.0.1'
        const port = 12345;
        this.$http.post('http://' + ip + ':' + port + '/?time=' + new Date().getTime(), {
            method: 'getprinterlist',
            token: 'aa',
            taskId: '1234567'
          }, {
          headers: {'Content-Type': 'application/x-www-form-urlencoded'//一定注意这个地方
          }}
        ).then(response => {
          // omo = response.data.data
          // console.log(omo)
          this.menys=response.data.data
        })
        console.log(this.menys)
      this.listoqu = true
    },
    //总览打印
    opssd(printse,mon) {
      sessionStorage.setItem("printse",printse);
      const ip = '127.0.0.1'
      const port = 12345;
      this.$http.post('http://' + ip + ':' + port + '/', {
        method: 'printreport',
        ReportType: 'gridreport',
        ReportName: 'label.grf',
        ReportVersion: '1',
        ReportUrl: '',
        Copies: '1',
        Duplex: '0',
        vue: '1', //需要设置为 1, 要不 局域网打印等 含有\\的无法识别 , vue 提交的数据需要把\\替换为\
        PrinterName: printse,//这个无法转义
        PrintOffsetX: '0',
        PrintOffsetY: '0',
        Preview: '0',
        token: 'aa',
        taskId: '1234567',
        exportfilename: '',
        exportfiletype: '',
        Parameter:mon
          [
          {"type": "", "name": "deptName", "value": this.form.deptName, "required": false},
         {"type": "", "name": "batch", "value": this.maxNum +'--'+ reop.batch, "required": false},
          {"type": "", "name": "patientName", "value":this.form.patientName, "required": false},
          {"type": "", "name": "bedNo", "value": this.form.bedNo, "required": false},
          {"type": "", "name": "sex", "value":  this.form.sex, "required": false},
          {"type": "", "name": "age", "value": this.form.age, "required": false},
          {"type": "", "name": "fullName1", "value": reop.recipeDetailList[0].fullName ,"required": false},
          {"type": "", "name": "fullName2", "value": reop.recipeDetailList[1].fullName, "required": false},
         {"type": "", "name": "fullName3", "value": reop.recipeDetailList[2].fullName, "required": false},
           {"type": "", "name": "weight1", "value": reop.recipeDetailList[0].weight, "required": false},
         {"type": "", "name": "weight2", "value": reop.recipeDetailList[1].weight, "required": false},
          {"type": "", "name": "weight3", "value": reop.recipeDetailList[2].weight, "required": false},
          {"type": "", "name": "carbonWater", "value":  reop.carbonWater, "required": false},
          {"type": "", "name": "proteinContent", "value": reop.proteinContent, "required": false},
          {"type": "", "name": "fatContent", "value": reop.fatContent, "required": false},
           {"type": "", "name": "energy", "value": reop.energy, "required": false},
           {"type": "", "name": "configTime", "value": reop.configTime, "required": false}
         ]
      }, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}},)
        .then(function (response) {
          let re = response.data;
          if (re.status == "ok") {

          } else {
            alert("打印失败:" + re.data);
          }
        }).catch(error => (
          console.log(error)
        )
      )
    },

---