element+vue 调发软打印

1.组件

<template>
  <div style="display: inline-block; margin-left: 10px; margin-bottom: -11px">
    <el-dropdown class="fr" :hide-on-click="false" trigger="click">
      <span class="el-dropdown-link">
        <el-button
          v-if="printName"
          type="primary"
          size="small"
          icon="el-icon-printer"
          plain
          >{{ printName }}</el-button
        >
        <el-button
          v-else
          type="primary"
          size="small"
          icon="el-icon-printer"
          plain
          >打印</el-button
        >
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="(item, index) in printClass"
          :key="item.id"
          class="dropdown_item"
        >
          <el-dropdown
            placement="right-start"
            class="personalization"
            trigger="hover"
          >
            <span class="el-dropdown-link personalization">
              {{ item.templateName
              }}<i class="icon iconfont icongexinghuashezhi"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                index="2-4-1"
                @click.native="preview(item.templateUrl)"
                >预览</el-dropdown-item
              >
              <el-dropdown-item
                index="2-4-2"
                @click.native="print(item.templateUrl)"
                >打印
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { queryByTemplateClass } from "@/http/moudules/warehouse"
import { FRreportUrl } from "@/utils/global"
import qs from "qs"
import {Loading} from "element-ui" // 项目已经全局引入element的话可以不单独引入

export default {
  name: "printHeades",
  props: {
    params: {
      type: Array,
      default: null
    },
    moduleId: {
      type: Number,
      default: null
    },
    tableSelection: {
      type: String,
      default: null
    },
    printName: {
      type: String,
      default: null
    },
    handelcallback: {
      type: Function
    },
     handRulesCallback: {
      type: Function,
      default: null
    },
  },
  data () {
    return {
      printClass: [],
      houseId: localStorage.getItem("whId" + localStorage.getItem("urlHerf"))
    }
  },
  mounted () {
    this.GetByTemplateClass()
  },

  methods: {
    GetByTemplateClass () {
      queryByTemplateClass({
        houseId: this.houseId,
        templateClass: this.moduleId
      }).then((res) => {
        this.printClass = res.data.data
      })
    },
    preview (reportlet) {
         if (this.moduleId==2 && this.rulesCallback()) {
          this.$message.error("请选择状态已完成的订单！");
          return;
        }

           if (this.handRulesCallback && this.handRulesCallback()) {
         return;
        }
      if (this.params.length !== 1) {
        const title = "操作失败"
        const type = "error"
        const msg = "请选择一条数据预览！"
        this.$notification(title, type, msg)
        return
      }
      let actualParameter = ""

      let map = new Map()
      console.log(this.params)
      for (let item of this.params) {
        console.log(item)

        for (var key in item) {
          let value = item[key]

          let existValue = map.get(key)
          if (existValue) {
            existValue = existValue + "," + value
          } else {
            existValue = value
          }

          map.set(key, existValue)
        }
      }

      map.forEach(function (value, key, entry) {
        actualParameter = actualParameter + "&" + key + "=" + value
      })

      let reportTempalteParams = {
        viewlet: reportlet,
        houseId: this.houseId
      }

      window.open(
        FRreportUrl + "?" + qs.stringify(reportTempalteParams) + actualParameter
      )
    },
    print (reportlet) {
  
        if (this.moduleId==2 && this.rulesCallback()) {
          this.$message.error("请选择状态已完成的订单！");
          return;
        }

       if (this.handRulesCallback && this.handRulesCallback()) {
         return;
        }

       if (this.params.length < 1) {
        const title = "操作失败"
        const type = "error"
        const msg = "请选择打印数据！"
        this.$notification(title, type, msg)
        return
      }

      
     
 
      let startLoading = () => {
        loading = Loading.service({
          lock: true,
          text: "拼命加载中...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.1)",
          target: document.querySelector(".main-container") // 设置加载动画区域
        })
      }
      let reportParameters = []
      let loading = null
      for (let param of this.params) {
        reportParameters.push({
          houseId: this.houseId,
          reportlet: reportlet,
          ...param
        })
      }
      let that = this

      let endLoading = () => {
        loading.close()
      }
      var config = {
        printUrl: FRreportUrl,
        isPopUp: false,
        // 是否弹出设置窗口，true为弹出，false为不弹出
        data: {
          // 多模板格式： [{reportlet: 'name.cpt', a: 'a1'}, {reportlet: 'name.cpt', b: 'b1'}]  同样的模板会出现多页
          // 单模板格式： [{reportlet: 'name.cpt', a: 'a1', b: 'b1'}]  同样的模板只会有单页
          reportlets: reportParameters, // 需要打印的模板列表
            __cumulatepagenumber__: false, // 每个模板的页码独立
        },
      

        printType: 0, // 打印类型，0为零客户端打印，1为本地打印
        // 以下为零客户端打印的参数，仅当 printType 为 0 时生效
        ieQuietPrint: false, // IE静默打印设置 true为静默，false为不静默
        // 以下为本地打印的参数，仅当 printType 为 1 时生效
        printerName: "Microsoft Print to PDF", // 打印机名
        pageType: 2, // 打印页码类型：0：所有页，1：当前页，2：指定页
        pageIndex: "1-3", // 页码范围。当 pageType 为 2 时有效
        copy: 3, // 打印份数
        start() {
          console.log("start")
          startLoading()
        },
        end(err) {
          
          if (err) {
            const msg = err.errorThrown.message || ""
            that.$notification("操作失败", "error", "打印失败，请联系管理员或者同事~")
            console.error(err)
          } else {
            if (that.handelcallback) {
              that.handelcallback()
            }
          }

          endLoading()
        }
      }

      FR.doURLPrint(config)
 
   },
    rulesCallback(){
           var flag = false;
           this.params.forEach(element => {
               if (element.billState !=undefined && element.billState !=4) {
                  flag = true;
                 return flag
              }
           });
        return flag;
    }
  }
}
</script>

<style scoped  lang='scss' >
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled) {
  &:hover {
    border: none !important;
    background-color: #fff !important;
    color: #13d1be;
  }
}

.personalization {
  width: 100%;
}
.dropdown_item {
  //  padding: 0 0;
}
</style>

2.页面使用

import printHeades from "@/components/printHeades";
  <printHeades
            :moduleId="moduleId"
            :params="params"
            :handelcallback="handelPrint"
            v-limit="['ForUnloading.OutboundTrack.print']"
          ></printHeades>
    handelPrint() {
      var ids = this.$refs.dragTable.selection.map((item) => item.id);
      outOrderPrint(ids)
        .then((res) => {
          this.getQueryList();
        })
        .catch(() => {});
    },