vue element UI 学习总结笔记（十一）_vue中打印模板设置

wh_xia_jun

已于 2023-02-20 19:13:10 修改

阅读量6.8k

点赞数 5

分类专栏： vue UI lodop 文章标签： vue lodop 打印模板

于 2019-10-09 16:36:20 首次发布

本文链接：https://blog.csdn.net/wh_xia_jun/article/details/101695580

版权

vue 同时被 3 个专栏收录

13 篇文章 6 订阅

订阅专栏

10 篇文章 2 订阅

订阅专栏

lodop

1 篇文章 0 订阅

订阅专栏

打印经常需要根据用户需求自定义，整个问题解决思路是：

把打印内看成三个部分，头部、明细区、脚步；

根据选中的元数据，输出界面内容：

            <ul class="print-head" style="margin:0;padding:0;height:100px;display: flex;justify-content:space-between;flex-flow: wrap row;align-items:flex-start;list-style:none;">
              <li v-for="(item,i) in checkedPrintHead" :key="i" class="print-item" style="margin:0;padding:0;margin-bottom:5px;flex:0 0 33.3%;display:flex;justify-content:space-between">
                <span style="margin:0;padding:0;flex:0 0 40%">{{ item.text }}:</span>
                <span class="hidden" style="margin:0;padding:0;flex:1 1 60%">{{ item.value }}</span>
              </li>
            </ul>

....
            <table style="margin:0 auto;border: 1px solid #000;border-collapse: collapse" class="print-table">
              <thead>
                <tr>
                  <!-- v-dragging="{item:item,list:checkedTableHead,group:'tbHead'}"  -->
                  <th v-for="(item,i) in checkedTableHead" :key="i" :style="`width:${item.width}px;border: 1px solid #000;border-collapse: collapse`">{{ item.text }}</th>
                </tr>
              </thead>
              <tbody class="none">
                <tr v-for="(rowData,i) in printData" :key="i">
                  <td v-for="(item ,index) in checkedTableHead" :key="index" :style="`width:${item.width}px;border: 1px solid #000;border-collapse: collapse;vertical-align:middle;`" align="center">
                    {{ $getCodeLabel(rowData[item.key]) === null ? '-' : $getCodeLabel(rowData[item.key]) }}
                  </td>
                </tr>
                <tr>
                  <td v-for="(item ,index) in checkedTableHead" :key="index" :style="`width:${item.width}px;border: 1px solid #000;border-collapse: collapse;text-align:center;padding-left:${totalTextArrayBool(item)?item.width:'0'}px`" :tdata="totalTextArrayBool(item)?'AllSum':''" format="#.###" >
                    {{ getTfootHtmlByItem(item,index) }}
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <!-- <tr>
                  <td v-for="(item ,index) in checkedTableHead" :key="index" :style="`width:${item.width}px;border: 1px solid #000;border-collapse: collapse;text-align:center;padding-left:${(item.text ==='份数' || item.text === '本数')?item.width:'0'}px`" :tdata="(item.text ==='份数' || item.text === '本数')?'AllSum':''" format="#.###" >
                    {{ getTfootHtmlByItem(item,index) }}
                  </td>
                </tr> -->
              </tfoot>
            </table>
...

看看效果：

页面需要自定义打印。

设置即是设置打印模板：

这个模板分为三个区域：

表头区、表尾区、中间明细区。

点击打印预览：

这里，我们写了一个打印组件，实现上述功能。

组件接受三个参数：

表头、明细数据、模板数据

  props: {
    formPrintData: { //  表单参数数据。
      type: Array,
      required: false,
      default() {
        return []
      }
    },
    printData: {
      type: Array,
      required: false,
      default() {
        return []
      }
    },
    templateData: {
      type: Array,
      default() {
        return []
      }
    },
    defaultData: {    //这个没有用到
      type: Array,
      default() {
        return []
      }
    }
  },

组件接受到模板参数后，对其进行相关处理：

    employTemplateData: { // 当前应用模板
      get() {
        // var target = this.templateData.find(item => item.isdefault === 1)
        // if (!target) {
        //   target = this.templateData.find(item => item.isstandardtemplage === 1)
        // }
        var target = ''
        var targetList = this.templateData.filter(item => +item.isdefault === 1)
        // 没有isdefault = 1,取isstandardtemplage = 1
        if (targetList.length === 0) {
          target = this.templateData[0]
        } else { //  有isdefault等于1时，要判断isstandardtemplage，有为0的情况就取0，没有就取1，即默认的标准模板。
          var customerTemplate = targetList.find(item => +item.isstandardtemplage === 0)
          if (customerTemplate) target = customerTemplate
          else target = targetList[0]
        }

        if (target) {
          if (typeof (target.templatecontent) === 'string') {
            target.templatecontent = JSON.parse(target.templatecontent)
          }
          if (this.formPrintData.length > 0) {
            console.log('target', target)
            // target.templatecontent.printHead = JSON.parse(JSON.stringify(this.formPrintData))
            // target.templatecontent.printFoot = JSON.parse(JSON.stringify(this.formPrintData))
            // 这里的代码是因为模板有时候没有传递printData这些字段，避免undefined报错。
            if (!target.templatecontent.printHead) {
              target.templatecontent.printHead = []
            }
            if (!target.templatecontent.printFoot) {
              target.templatecontent.printFoot = []
            }
            // 这里由于开始的设计有误，没有将显示的表单信息和渲染数据的表单信息分开，合在一起了。
            // 所以需要根据模板里面的表单的值，对比传递进来的表单，找到对应的值即可。
            console.log('target.templatecontent.printFoot:', target.templatecontent.printFoot)
            target.templatecontent.printHead.forEach(item => {
              var matchedItem = this.formPrintData.find(dataItem => dataItem.text === item.text)
              item.value = matchedItem === undefined ? item.value : matchedItem.value
            })
            target.templatecontent.printFoot.forEach(item => {
              var matchedItem = this.formPrintData.find(dataItem => dataItem.text === item.text)
              item.value = matchedItem === undefined ? item.value : matchedItem.value
            })
          }
          return target
        }
      },
      set(val) {
        return val
      }
    },

ps:

这里var targetList = this.templateData.filter(item => +item.isdefault === 1) “+“是类型转换，把字符串转换为int类型。
item.value = matchedItem === undefined ? item.value : matchedItem.value 这句话是根据条件判断对item.value进行赋值。

组件的结构：

<!-- 表格打印设置组件 -->
<template>
	//模板...
</template>

<script>
import printItemControl from './printItemControl'
import Bus from '@/utils/Bus'
import { getLodop } from '@/assets/LodopFuncsNew' // 导入模块
import { savePrintTemplateData, removePrintTemplateData } from '@/api/webPrint'
// import { deepClone } from '@/utils/Common'

export default {
  components: {
    printItemControl
  },
  props: {
	//父表单传递的参数
  },
  data() {
    return {
      updateTitleVisible: false,
      updateTitleError: true,
      updateTitleName: '',
      selectedItem: {},
      updateError: true,
      updateTempLateName: '',
      updateBoxVisible: false,
      alertBoxVisible: false,
      errMessage: true,
      addTempLateName: '',
      messageBoxVisible: false,
      // direction: 1, // 1竖，2横
      // templateData
      // checkedTexts: [],
      // printHeadHeight: '10',
      dialogTableVisible: false,
      LODOP: '' // 准备用来调用getLodop获取LODOP对象
    }
  },

  computed: {
    employTemplateData: {
		//把模板和数据绑定
    },
	......
  },

  watch: {
    dialogTableVisible(newVal, oldVal) {
      if (newVal === false) {
        Bus.$emit('getPrintDataAdd')
      }
    }
  },

  created() {
    // 下面这条句子应该放在请求的then里面。
    // this.checkedTexts = this.employTemplateData.templatecontent.printHead.filter(item => item.checked === true).map(item => item.text)
    Bus.$off('addExport')
    Bus.$on('addExport', () => {
      this.addExport()
    })
    Bus.$off('addPreview')
    Bus.$on('addPreview', () => {
      this.addPreview()
    })
    Bus.$off('addPrint')
    Bus.$on('addPrint', () => {
      this.addPrint()
    })
    Bus.$off('addSet')
    Bus.$on('addSet', () => {
      this.addSet()
    })
  },
  mounted() {
  },
  methods: {
  ...
  }
}

</script>
<style rel='stylesheet/scss' lang='scss' scoped>
....
</style>

注意修改标题代码用到$set()方法：

代码：

    confirmTitle() {
      if (this.updateTitleName) {
        // this.validatorUpdate()
        this.updateTitleError = true
        this.updateTitleVisible = false

        this.$set(this.employTemplateData.templatecontent, 'title', this.updateTitleName)
      } else {
        this.updateTitleError = '打印表头名称不能为空！'
      }
    },

ps: Vue2.0 $set()的正确使用方式

打印模板组件的使用：

从业务上要理解上面的代码，先看看系统模板初始化：（这个在这个打印组件以外）。

      templateInitData: {
        //  add
        guid: "",
        userid: null,
        templatecontent: {
          // 注释 title标题
          title: "财政审批退付申请",
          direction: 2,
          printHeadHeight: 50, // 打印头部区域的高度，单位mm
          printHead: [
            // 注释 表格上面内容
            // { text: "制表人", checked: true },
            { text: "资金退付书编号", checked: true },
            { text: "开具日期", checked: true },
            { text: "原缴款书编号", checked: true },
            { text: "执收单位", checked: true },
            { text: "缴款人名称", checked: true },
            { text: "缴款人账号", checked: true },
            { text: "缴款人开户行", checked: true },
            { text: "收款人名称", checked: true },
            { text: "收款人账号", checked: true },
            { text: "收款人开户行", checked: true },
            { text: "退付原因", checked: true }
          ],
          tableHead: [
            // 注释 表格内容
            {
              text: "收费项目编码",
              key: "nontaxcode",
              width: "200",
              checked: true
            },
            {
              text: "收费项目名称",
              key: "nontaxname",
              width: "200",
              checked: true
            },
            { text: "收费金额", key: "amt", width: "200", checked: true },
            {
              text: "退付金额",
              key: "rfdamt",
              width: "200",
              checked: true
            }
          ],
          printFoot: [
            // 注释 表格下面内容
            {
              text: "制表人",
              value: this.$store.state.user.name,
              checked: true
            },
            {
              text: "打印时间",
              value: new Date().toLocaleString(),
              checked: true
            }
          ]
        },
        isdefault: 1, // 是否现在使用的模板
        templatecode: this.$route.path + "/add",
        templatename: "标准模板",
        isstandardtemplage: 1 // 是否标准模板
      },

数据中的几个变量名称对应的内容图示：

后端相关查询的数据（例子）：

{"code":"200","data":[{"guid":"8a8181846d80e0ea016d80fe1a050006","year":"2019","admdivcode":"420822","userid":"F77F3055AABCE8803C29DF683825B7BF","templatecode":"/czzsgl/fssrtfgl/dwlrtfsq/add","templatename":"222","isstandardtemplage":0,"templatecontent":"{\"title\":\"单位录入退付申请\",\"direction\":2,\"printHeadHeight\":50,\"printHead\":[{\"text\":\"资金退付书编号\",\"checked\":true,\"value\":\"RFD20190930000001\"},{\"text\":\"开具日期\",\"checked\":true,\"value\":\"2019-09-30 00:00:00\"},{\"text\":\"原缴款书编号\",\"checked\":true,\"value\":\"0011687662\"},{\"text\":\"执收单位\",\"checked\":true,\"value\":\"湖北省国土资源厅沙洋监狱管理局国土资源局\"},{\"text\":\"退款人名称\",\"checked\":true,\"value\":\"申雯凤\"},{\"text\":\"退款人账号\",\"checked\":true,\"value\":null},{\"text\":\"退款人开户行\",\"checked\":true,\"value\":null},{\"text\":\"收款人名称\",\"checked\":true,\"value\":\"农行沙洋县支行\"},{\"text\":\"收款人账号\",\"checked\":true,\"value\":\"1755 4101 0400 0353 1\"},{\"text\":\"收款人开户行\",\"checked\":true,\"value\":\"农行沙洋县支行\"},{\"text\":\"退付原因\",\"checked\":true,\"value\":\"沙洋县支行退付\"}],\"tableHead\":[{\"text\":\"收费项目编码\",\"key\":\"nontaxcode\",\"width\":\"200\",\"checked\":true},{\"text\":\"收费项目名称\",\"key\":\"nontaxname\",\"width\":\"200\",\"checked\":true},{\"text\":\"收费金额\",\"key\":\"amt\",\"width\":\"200\",\"checked\":true},{\"text\":\"退付金额\",\"key\":\"rfdamt\",\"width\":\"200\",\"checked\":true}],\"printFoot\":[{\"text\":\"制表人\",\"value\":\"王凤霞\",\"checked\":true},{\"text\":\"打印时间\",\"value\":\"2019/9/30 下午3:04:53\",\"checked\":true}]}","isdefault":0,"remark":null,"isenabled":1},{"guid":"8a8181846d80e0ea016d80ffbb0a0007","year":"2019","admdivcode":"420822","userid":"F77F3055AABCE8803C29DF683825B7BF","templatecode":"/czzsgl/fssrtfgl/dwlrtfsq/add","templatename":"333","isstandardtemplage":0,"templatecontent":"{\"title\":\"单位录入退付申请\",\"direction\":2,\"printHeadHeight\":50,\"printHead\":[{\"text\":\"资金退付书编号\",\"checked\":true,\"value\":\"RFD20190930000001\"},{\"text\":\"开具日期\",\"checked\":true,\"value\":\"2019-09-30 00:00:00\"},{\"text\":\"原缴款书编号\",\"checked\":true,\"value\":\"0011687662\"},{\"text\":\"执收单位\",\"checked\":true,\"value\":\"湖北省国土资源厅沙洋监狱管理局国土资源局\"},{\"text\":\"退款人名称\",\"checked\":true,\"value\":\"申雯凤\"},{\"text\":\"退款人账号\",\"checked\":true,\"value\":null},{\"text\":\"退款人开户行\",\"checked\":true,\"value\":null},{\"text\":\"收款人名称\",\"checked\":true,\"value\":\"农行沙洋县支行\"},{\"text\":\"收款人账号\",\"checked\":true,\"value\":\"1755 4101 0400 0353 1\"},{\"text\":\"收款人开户行\",\"checked\":true,\"value\":\"农行沙洋县支行\"},{\"text\":\"退付原因\",\"checked\":true,\"value\":\"沙洋县支行退付\"}],\"tableHead\":[{\"text\":\"收费项目编码\",\"key\":\"nontaxcode\",\"width\":\"200\",\"checked\":true},{\"text\":\"收费项目名称\",\"key\":\"nontaxname\",\"width\":\"200\",\"checked\":true},{\"text\":\"收费金额\",\"key\":\"amt\",\"width\":\"200\",\"checked\":true},{\"text\":\"退付金额\",\"key\":\"rfdamt\",\"width\":\"200\",\"checked\":true}],\"printFoot\":[{\"text\":\"制表人\",\"value\":\"王凤霞\",\"checked\":true},{\"text\":\"打印时间\",\"value\":\"2019/9/30 下午3:04:53\",\"checked\":true}]}","isdefault":1,"remark":null,"isenabled":1},{"guid":"8a8181846d80e0ea016d80fc8c600004","year":"2019","admdivcode":"420822","userid":null,"templatecode":"/czzsgl/fssrtfgl/dwlrtfsq/add","templatename":"标准模板","isstandardtemplage":1,"templatecontent":"{\"title\":\"单位录入退付申请\",\"direction\":2,\"printHeadHeight\":50,\"printHead\":[{\"text\":\"资金退付书编号\",\"checked\":true},{\"text\":\"开具日期\",\"checked\":true},{\"text\":\"原缴款书编号\",\"checked\":true},{\"text\":\"执收单位\",\"checked\":true},{\"text\":\"退款人名称\",\"checked\":true},{\"text\":\"退款人账号\",\"checked\":true},{\"text\":\"退款人开户行\",\"checked\":true},{\"text\":\"收款人名称\",\"checked\":true},{\"text\":\"收款人账号\",\"checked\":true},{\"text\":\"收款人开户行\",\"checked\":true},{\"text\":\"退付原因\",\"checked\":true}],\"tableHead\":[{\"text\":\"收费项目编码\",\"key\":\"nontaxcode\",\"width\":\"200\",\"checked\":true},{\"text\":\"收费项目名称\",\"key\":\"nontaxname\",\"width\":\"200\",\"checked\":true},{\"text\":\"收费金额\",\"key\":\"amt\",\"width\":\"200\",\"checked\":true},{\"text\":\"退付金额\",\"key\":\"rfdamt\",\"width\":\"200\",\"checked\":true}],\"printFoot\":[{\"text\":\"制表人\",\"value\":\"王凤霞\",\"checked\":true},{\"text\":\"打印时间\",\"value\":\"2019/9/30 下午3:04:53\",\"checked\":true}]}","isdefault":0,"remark":null,"isenabled":1},{"guid":"8a8181846d80e0ea016d80fd0c430005","year":"2019","admdivcode":"420822","userid":"F77F3055AABCE8803C29DF683825B7BF","templatecode":"/czzsgl/fssrtfgl/dwlrtfsq/add","templatename":"111","isstandardtemplage":0,"templatecontent":"{\"title\":\"单位录入退付申请\",\"direction\":2,\"printHeadHeight\":50,\"printHead\":[{\"text\":\"资金退付书编号\",\"checked\":true,\"value\":\"RFD20190930000001\"},{\"text\":\"开具日期\",\"checked\":true,\"value\":\"2019-09-30 00:00:00\"},{\"text\":\"原缴款书编号\",\"checked\":true,\"value\":\"0011687662\"},{\"text\":\"执收单位\",\"checked\":true,\"value\":\"湖北省国土资源厅沙洋监狱管理局国土资源局\"},{\"text\":\"退款人名称\",\"checked\":true,\"value\":\"申雯凤\"},{\"text\":\"退款人账号\",\"checked\":true,\"value\":null},{\"text\":\"退款人开户行\",\"checked\":true,\"value\":null},{\"text\":\"收款人名称\",\"checked\":true,\"value\":\"农行沙洋县支行\"},{\"text\":\"收款人账号\",\"checked\":true,\"value\":\"1755 4101 0400 0353 1\"},{\"text\":\"收款人开户行\",\"checked\":true,\"value\":\"农行沙洋县支行\"},{\"text\":\"退付原因\",\"checked\":true,\"value\":\"沙洋县支行退付\"}],\"tableHead\":[{\"text\":\"收费项目编码\",\"key\":\"nontaxcode\",\"width\":\"200\",\"checked\":true},{\"text\":\"收费项目名称\",\"key\":\"nontaxname\",\"width\":\"200\",\"checked\":true},{\"text\":\"收费金额\",\"key\":\"amt\",\"width\":\"200\",\"checked\":true},{\"text\":\"退付金额\",\"key\":\"rfdamt\",\"width\":\"200\",\"checked\":true}],\"printFoot\":[{\"text\":\"制表人\",\"value\":\"王凤霞\",\"checked\":true},{\"text\":\"打印时间\",\"value\":\"2019/9/30 下午3:04:53\",\"checked\":true}]}","isdefault":0,"remark":null,"isenabled":1}]}

引入模板组件：

    <tablePrintSetAdd
      :print-data="currentRow.details"
      :template-data="templateDataList"
      :form-print-data="formPrintData"
    />

调用的例子（结构）：

export default {
  components: {
    toolBar,
    layer,
    tablePrintSetAdd // 表格打印设置组件。add
  },
  data() {
    //数据...
  },
  computed: {
    // 注释 表单数据
    formPrintData() {
      return [
        {
          text: "资金退付书编号",
          value: this.currentRow.rfdbillno,
          checked: true
        },
        { text: "开具日期", value: this.currentRow.rfdbilldate, checked: true },
        {
          text: "原缴款书编号",
          value: this.currentRow.paybillno,
          checked: true
		...
      ];
    }
  },
  watch: {
    // 是否获取模板  打开这dialog时候，获取模板
    dialogTableVisible(n) {
      if (n) {
        this.whetherGetPrintTemplate();
      }
    }
  },
  created() {  //在渲染html前，给工具条绑定事件
    // 关闭
    Bus.$off("billClose");
    Bus.$on("billClose", () => {
      Bus.$emit("onSubmit");
      this.dialogTableVisible = false;
    });
    // 保存
    Bus.$off("billSave");
    Bus.$on("billSave", () => {
      this.save();
    });
    // 修改
    Bus.$off("billUpdate2");
    Bus.$on("billUpdate2", () => {
      this.billUpdate2();
    });
    // 取消
    Bus.$off("billAbolish");
    Bus.$on("billAbolish", () => {
      this.dialogTableVisible = false;
    });
    // 设置
    // 组件创建时，立即获取打印模板数据。
    // this.getPrintData()// add
    Bus.$off("getPrintDataAdd");
    Bus.$on("getPrintDataAdd", () => {
      this.getPrintData();
    });
    // 打印
    Bus.$off("getPrintDataAdd");
    Bus.$on("getPrintDataAdd", () => {
      this.getPrintData();
    });
  },
  mounted() {
    // console.log("挂载完成！");
  },
  updated() {},
  methods: {
    //各类操作方法
  }
};

watch 当中加载模板（模板毕竟只是开始加载一次）；

模板与数据：

点击工具类相关按钮的时候，先激发一个事件

这里addset改变一个变量；

在打印组件中：这个变量控制一个div

模板设置和打印输出用的是同一个页面。

但设置的时候，是不用显示数据的？

这里应用了class样式，页面上是不显示的，但给lodop的时候，lodop 是不知道这个class的，这样，通过lodop预览的时候，数据就显示出来了。

lodop打印:

   printSet() {
      this.LODOP = getLodop()
      this.LODOP.PRINT_INIT('表格预览')
      console.log(111,this.employTemplateData);
      this.LODOP.SET_PRINT_PAGESIZE(this.employTemplateData.templatecontent.direction, 0, 0, 'A4')
      // console.log('当前设置的高度是：', this.employTemplateData.templatecontent.printHeadHeight)
      var printHeadHeight = +this.employTemplateData.templatecontent.printHeadHeight
      var strStyle = '<style> table,td,th {border: 1px solid #000;border-collapse: collapse;}</style>'
      this.LODOP.ADD_PRINT_TABLE(`${printHeadHeight + 10}mm`, '5%', '95%', `90%`, strStyle + this.$refs.div2.innerHTML)
      this.LODOP.SET_PRINT_STYLEA(0, 'Vorient', 3)
      this.LODOP.SET_PRINT_STYLEA(0, 'Offset2Top', `${-printHeadHeight}mm`) // 表示从次页开始的上边距偏移量
      this.LODOP.ADD_PRINT_HTM('1%', '2%', '95%', `${printHeadHeight}mm`, this.$refs.div1.innerHTML)
      // this.LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) // 此行代码的作用是使得div1中的内容随着分页反复出现，相当于是页眉。
      this.LODOP.ADD_PRINT_HTM('2%', '0%', '95%', '10%', this.$refs.div3.innerHTML)
      this.LODOP.SET_PRINT_STYLEA(0, 'LinkedItem', 1) // 内容项与别人关联后，会紧跟被关联者之后打印，位置和区域大小随被关联项而定，此时其Top和left不再是上边距和左边距，而是与关联项的间隔空隙及左边距偏移。0表示自己，1表示第一个，-1表示自己的前一个。
    },

wh_xia_jun

关注

5
点赞
踩
29

收藏

觉得还不错? 一键收藏
5
评论
vue element UI 学习总结笔记（十一）_vue中打印模板设置

打印经常需要根据用户需求自定义，整个问题解决思路是：把打印内看成三个部分，头部、明细区、脚步；根据选中的元数据，输出界面内容： <ul class="print-head" style="margin:0;padding:0;height:100px;display: flex;justify-content:space-between;flex-flow...
复制链接

扫一扫

专栏目录