精华内容
下载资源
问答
  • 自定义导航模板
  • vue自定义打印内容

    2021-02-16 13:09:31
    Vue里面定义自定义打印的组件 letter.vue (注意打印的样式是行内样式) <template> <div ref="letter"> <div style="margin: auto;width:100%;"> 打印标题 </div> <di.

    web前段自定义打印内容,网页部分内容或者是远程请求的pdf流,前段自行调浏览器打印功能打印。

    自定义打印的内容

    Vue里面定义自定义打印的组件

    letter.vue  (注意打印的样式是行内样式)

    <template>
        <div ref="letter">
            <div style="margin: auto;width:100%;">
                打印标题
            </div>
            <div style="margin: auto;width: 100%">
                打印内容,测试用的
            </div>
        </div>
    </template>
    
    <script>
    import {
        Vue,
    }
     export default class Letters extends Vue {
        getHtml() {
            return this.$refs.letter.innerHTML;
        }
    }
    
    </script>

     partent.vue   业务组件

    <template>
        <div>
           <button @click="toPoint('1'))">打印html</button>
           <button @click="toPoint('2')">打印远程pdf流</button>
        </div>
        <Letter v-show="letterShow" ref="letterCard"></Letter>
    </template>
    
    <script>
    import {
        Vue,
    }
    import Letter from './letter.vue'
     export default class Letters extends Vue {
    
        letterShow:Boolean = false
        
        iframe:any = null
        
    
        toPoint(type) {
            switch(type) {
                case '1':
                    const newHtml = this.$refs.letterCard.getHtml();
                    this.doPdfPoint('1', newHtml);
                    break;
                case '2';
                    this.getDownLoadBlob();
                    break;
                default:
                    break;
            }
        }
        // 打印的方法
        doPdfPoint(type, content?) {
            let blob;
            if (this.iframe) {
                (document.body as any).removeChild(this.iframe);
            }
            // 必须加上{type: 'text/html;charset=utf-8'} 自行打印html
            // 必须加上{type: 'application/pdf'} 远程的pdf流
            if (type === '1') { // 自行打印html
                blob = new Blob([content], {type: 'text/html;charset=utf-8'});
            } else { // 远程的pdf流
                blob = new Blob([content], {type: 'application/pdf'});
            }
            const data = (new Date()).getTime();
            this.iframe = (document.body as any).createElenment('iframe');
            this.iframe.style.display = 'none';
            this.iframe.style.pageBreakBefore = 'always';
            this.iframe.setAttribute('id', `printPdf${date}`);
            this.iframe.setAttribute('name', `printPdf${date}`);
            this.iframe.src = window.URL.creatObjectURL(blob);
            (document as any).body.appendChild(this.iframe);
            this.doPrint(`printPdf${date}`, this.iframe.src);
        }
        
        // 打印开始
        doPrint(val, pdfUrl) {
            const ordonnance = (document as any).getElementBuId(val).contentWindow;
            setTimeout(() => {
                ordonnance.print(); // 调用浏览器打印
                window.URL.revokeObjectURL(pdfUrl); // 释放URL对象
            });
        }
    
        // 获取远程打印pdf流
        async getDownLoadBlob() {
            const url = 'print.do';
            const params = {};
            const res = await ajax.fetchJson(
                url,
                params,
                { responseType: 'arraybuffer' }
            );
            this.doPdfPoint('2', res);
        }
        beforeDestory() { // 销毁前释放内存
            if (this.iframe) {
                (document.body as any).removeChild(this.iframe);
            }
    
        }
    }
    
    </script>

    其原理就是利用iframe重新打开窗口,直接调用浏览器打印功能。

     

    展开全文
  • 打印经常需要根据用户需求自定义,整个问题解决思路是: 把打印内看成三个部分,头部、明细区、脚步; 根据选中的元数据,输出界面内容: <ul class="print-head" style="margin:0;padding:0;height:100px;...

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

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

    根据选中的元数据,输出界面内容:

                <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:

    1. 这里var targetList = this.templateData.filter(item => +item.isdefault === 1)  “+“是类型转换,把字符串转换为int类型。
    2. 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表示自己的前一个。
        },

     

     

    展开全文
  • vue后台基础框架,根据导航联动Tab。可以参考学习一下vue,界面稍微有点丑,大家可以根据需求进行一些改进。长期维护地址:https://github.com/jack13163/vue-admin-custom
  • vue模板打印

    千次阅读 2019-02-19 14:14:45
    Vue是一套构建用户界面的渐进式框架。 它实现了数据双向的绑定。利用这个特性,可以比较容易将模板与数据分离。在应对不同的不同的打印需求时,我们只需要提供足够丰富的数据,不同模板按照需求获取相应的字段即可。...

    Vue是一套构建用户界面的渐进式框架。
    它实现了数据双向的绑定。利用这个特性,可以比较容易将模板与数据分离。在应对不同的不同的打印需求时,我们只需要提供足够丰富的数据,不同模板按照需求获取相应的字段即可。

    创建容器
    打印之前,需要把页面呈现在页面上。所以先创建一个隐藏的DOM节点,作为打印内容的容器。

    class="hidden" 在bootstrap框架中相当于style="display: none"

    获取模板
    根据需求选择对应的模板,向服务端发送ajax请求,获取空模板。 获取到空模版之后,利用Vue双向绑定的特性,向模板填充数据。然后将填充好的模板,填充上边创建的容器中。

    $.getJSON(‘ins_common.do?action=get_print_template’, {mbdm: ‘0003’}, function (res) {

        if (res.code === 'T') {
            var $print = $('#id_print');
            $print.html(res.message);
            //创建Vue对象与打印容器绑定
            new Vue({
                el: '#id_print',
                data: {
                    LRXM:'李四',
                    CH:'12'
                }
    
            });
        } else {
            wnform.toast(res.message);
        }
    
    })
    

    模板是静态的html,可以通过样式控制模板的大小,字体颜色等。 数据库中存储的模板内容如下:

    外出登记表

    老人姓名{{LRXM}}床位号{{CH}}
    外出时间{{WCSJ}}预期回院时间{{YJFHSJ}}
    单独或与家人{{WCLXMC}}
    外出事由SYSM
    审批人{{SPRYXM}}审批时间{{SPSJ}}
    {{LRXM}} 是Vue的模板语法,可以获取到Vue对象中data中对应的值。

    完整示例
    function printPage() {

    var mWindow = window.open('', 'PRINT', 'height=400,width=600');
    mWindow.document.title = '请假单打印';
    
    function writePrintPage() {
        //填充打印预览页面
        mWindow.document.write($('#id_print').html());
        mWindow.document.close(); // necessary for IE >= 10
        mWindow.focus(); // necessary for IE >= 10*/
    
        mWindow.print();
        mWindow.close();
    }
    
    $.when($.getJSON('ins_common.do?action=get_print_template', {mbdm: '0003'}, function (res) {
    
        if (res.code === 'T') {
            var $print = $('#id_print');
            $print.html(res.message);
            new Vue({
                el: '#id_print',
                data: $('#btn_print').data('info')
            });
        } else {
            wnform.toast(res.message);
        }
    
    })).then(function () {
        writePrintPage();
    });
    return true;
    

    }

    展开全文
  • 一般打印功能都有打印模板和数据源,利用Vue的动态组件,我们就可以为lodop添加打印模板,实现按需打印 1,编写一个html,在显示数据的地方用Vue语法替换例如:{{printData.UserName}},把这个html保存到数据库就是...

    lodop是目前最流行的打印Web打印组件,可以直接打印html

    如何为lodop添加打印模板

    一般打印功能都有打印模板和数据源,利用Vue的动态组件,我们就可以为lodop添加打印模板,实现按需打印
    1,编写一个html,在显示数据的地方用Vue语法替换例如:{{printData.UserName}},把这个html保存到数据库就是打印模板了
    2,界面定义一个div存放动态组件,把数据源Json加载到Vue中,加载打印模板生成组件,让lodop打印这个div就可以了

     <div id="previewdiv">
       <component :is="cprintername"></component>
     </div>
    

    打印模板的设计器

    这是一个打印模板的设计器: 以固定的Json对象作为数据源, 用Html+CSS+Vue来设计打印模板, 是一款适合开发人员的打印模板设计器
    利用Vue的component动态组件传入一个Json对象做数据源,根据数据源就可以手动设计组件的template, 可以实时预览设计效果, 并结合lodop打印出来

    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
      <style>
        .el-aside {
          background-color: #D3DCE6;
          color: #333;
          text-align: left;
          width: 200px;
          height: 600px;
        }
    
        .el-main {
          background-color: #E9EEF3;
          color: #333;
          text-align: left;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
    
        <el-container>
          <el-aside>
            <div>
              数据源:
              <div>
                {{strObj2}}
              </div>
            </div>
          </el-aside>
          <el-container>
            <el-main>
              <el-tabs value="design" @tab-click="createPrintComponent">
                <el-tab-pane label="模板设计" name="design">
                  <el-input type="textarea" :rows="10" placeholder="请输入内容" v-model="templateStr">
                  </el-input>
                </el-tab-pane>
                <el-tab-pane label="打印预览" name="preview">
                  <el-button @click="print">打印</el-button>
                  <div id="previewdiv">
                    <component :is="cprintername"></component>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </el-main>
          </el-container>
        </el-container>
    
      </div>
    
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <!-- LodopFuncs.js是lodop打印使用,需要先安装lodop打印服务才能使用 -->
      <script src="lib/LodopFuncs.js"></script>
      <script type="text/javascript">
        function prn1_preview() {
          var LODOP = getLodop();
          LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一");
          LODOP.SET_PRINT_STYLE("FontSize", 18);
          LODOP.SET_PRINT_STYLE("Bold", 1);
          LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印页面部分内容");
          LODOP.ADD_PRINT_HTM(88, 200, 350, 600, document.getElementById("previewdiv").innerHTML);
          LODOP.PREVIEW();
        };
    
        new Vue({
          el: '#app',
          methods: {
            //根据数据源和打印模板创建打印组件
            createPrintComponent: function (tab, event) {
              console.log(tab)
              if (tab.paneName === "preview") {
                let pobj = this.strObj2; //传入打印数据源
                let templateStr = this.templateStr; //传入打印模板
    
                //动态创建组件名
                var timestamp = (new Date()).valueOf();
                var componentName = 'printer' + timestamp;
    
                //创建组件
                Vue.component(componentName, {
                  data: function () {
                    return {
                      printobj: pobj, //传入打印数据源
                    }
                  },
                  template: '<div>' + templateStr + '</div>' //打印模板
                })
    
                //更新组件
                this.cprintername = componentName //显示打印组件
              }
            },
            print: function (event) {
              prn1_preview();
            }
          },
          data: function () {
            return {
              cprintername: '',
              //打印样式
              templateStr: 'name:  {{ printobj.name }} code: {{ printobj.code }}' +
                ' <table border="1" width="300" height="106" cellspacing="0" bgcolor="#CCFFFF"style="border-collapse:collapse;table-layout:fixed;border:solid 1px black;">' +
                '<tr><td width="66" height="16" style="border:solid 1px black"><font color="#0000FF">日期</font></td>' +
                '<td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">姓名</font></td>' +
                '<td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">地址</font></td></tr> ' +
                '<tr v-for="item in printobj.tableData">' +
                '<td width="66" height="16" style="border:solid 1px black">{{item.date}}</td>' +
                '<td width="80" height="12" style="border:solid 1px black">{{item.name}}</td>' +
                '<td width="51" height="12" style="border:solid 1px black">{{item.address}}</td></tr> </table>',
              //打印数据源
              strObj2: {
                "code": "MyCode",
                "name": "MyName",
                "tableData": [{
                    "date": "2016-05-02",
                    "name": "王一虎",
                    "address": "上海市普陀区金沙江路 1518 弄"
                  },
                  {
                    "date": "2016-05-04",
                    "name": "王二虎",
                    "address": "上海市普陀区金沙江路 1517 弄"
                  },
                  {
                    "date": "2016-05-01",
                    "name": "王三虎",
                    "address": "上海市普陀区金沙江路 1519 弄"
                  }
                ]
              }
            }
          }
        });
      </script>
    </body>
    
    </html>
    
    展开全文
  • vue 打印模板套打)

    万次阅读 2020-01-03 22:34:04
    vue 使用print-template生成pdf 打印 。支持生成二维码、条形码、文本、图片、线 安装 yarn add print-template 或 npm install print-template 内容类型 line 线条 barcode 条形码 qrcode ...
  • Vue中Pdf预览及打印(自定义组件)

    千次阅读 2020-12-31 16:58:46
    编写自定义组件PdfView.vue <template> <div> <pdf ref="myPdfComponent" hidden :src="this.url"></pdf> <!-- 第一种 pdf展示--> <!-- <div style="height: 800px;...
  • vscode Vue ts 自定义模板 首先打开vscode选择用户片段 选择vue.json { // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. ...
  • Vue 自带的指令无法满足开发需求,这时需要自定义一些指令。指令可以注册为全局指令或者局部指令。全局指令使用 Vue 对象下的 directive 方法定义,局部指令在 Vue 实例中设置 directives 属性。 如下代码所示: // ...
  • vue自定义指令

    2020-10-29 10:50:16
    vue自定义指令 当我们使用插件的时候,有时候会看到插件上使用v-xxx的用法,例如在使用图片懒加载时,我们可以看到他用了v-lazy的指令,这是怎么做的呢 ? 图片: 这是vue中的自定义指令,Vue-directive,我们可以...
  • 如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板。 一是通过 inject 选项,然后传递给定制的 HTML 文件。html-webpack-plugin 将会自动注入所有需要的 CSS, js, manifest 和 favicon 文件到标记中。 ...
  • 实践场景及注意事项 1:需要在管理系统中开通一个上传lodop代码的操作,以便拿到对应的lodop代码 2:打印不同模板的收据等等!!!! 3:当前打印硬件需要安装lodop插件 4:如果引用了图片,要保证图片存在和图片...
  • 最近一段时间一直在做自定义模板打印,考虑过几个方案 一、首先考虑在winform界面中添加一个容器,然后由用户向其中拖拽控件,插入横线等。最后识别容器中控件的位置然后通过GDI+绘制到printdocument上。光想想就...
  • vue自定义指令VNode详解

    万次阅读 2017-08-31 11:09:32
    1、自定义指令钩子函数Vue.directive('my-directive', { bind: function () { // 做绑定的准备工作 // 比如添加事件监听器,或是其他只需要执行一次的复杂操作 }, inserted: function (newValue, oldValue) { ...
  • Vue集成打印插件

    2021-01-20 15:58:01
    简介 此插件仅支持在Vue上...在需要打印Vue 或 Html5页面引入插件js。 import myPrint from '../../utils/print'; 第二步 将需要打印的内容加上【ref=print】属性。 <div id="printForm" ref="print"> 打印
  • 但是在Visual Studio Code 中我们可以自己创建vue.json文件进行自定义配置 下面是我配置的过程 打开vscode,在菜单栏中选择 文件 / 首选项 / 用户片段 这时就会打开搜索栏 新建全局代码片段 / 输入vue.json ...
  • <template> <div v-if="printVisible"> <div id="printBox"> <slot></slot> </div> </div> </template> <script> ... type:Boolean.
  • Vue 自定义富文本编辑器 tinymce 支持导入 word 模板

    万次阅读 热门讨论 2018-09-13 10:03:10
    自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目 前端 前端项目地址: https://github.com/haoxiaoyong1014/editor-ui 编辑器名称: tinymce 前端采用的 vue.js 至于Vue 中怎么集成 ...
  • 自定义模板 提示:首次写博客,请各位大佬指导 文章目录类自定义模板前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言一、自定义内容二、调用接口存入数据库1.后端提供接口(只接收并录入数据库的...
  • 常规的vue init template &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;project-name&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;脚手架不能满足需要 因此希望...
  • Vue自定义组件及组件的注册方法

    万次阅读 2018-05-16 15:16:42
    为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型:全局注册和局部注册。至此,我们的组件都只是通过Vue.component全局注册的:Vue.component('component-name', { // ... ...
  • VUE3.0,DAY28自定义指令案例需求示范1案例需求示范2总结 自定义指令 1.自定义指令,即DOM元素需要自己进行操作,比如v-show是内嵌指令,背后有个display的DOM操作是vue帮我们操作了,那么自定义就是不用vue,人工...
  • 自定义 loader 读取 *.vue 文件源码

    千次阅读 2020-12-11 01:57:37
    相关依赖版本: node v10.15.0 npm v6.4.1 yarn v1.22.10 vue-cli v4.5.9 ...通过 vue-loader 自定义块 功能,获取目标文件的文件路径,然后通过 fs 读取源码,再用 @vue/compiler-core 的 API basePa
  • (document.write、引用第三方图标、使用template模板打包) 初识 webpack  案例 (开发环境中使用 vconsole 和 利用 jsUri 解析 url ) 初识 webpack  案例  (vue执行多个并发请求)[转] 初识 webpack...
  • 不同的医院文书内容基本都不一样,如果定制开发会造成研发人员需要不停的修改不停的部署前端程序,可能目前市场上B/S版本手麻系统都会遇到同样的问题,之前C/S版本的都是实施在现场通过拖拽实现表单,文书的打印也...
  • 当我们给模板上的自定义事件添加额外参数的时候,我们的绑定函数就会被包裹上一层代码,function($event){xxx} 上述函数在子组件中emit的时候被调用,可以理解为 var dealName = function($event){xxx} dealName....
  • 二、vue自定义指令

    2020-10-30 17:20:36
    参考教女朋友学习 vue中的指令及其自定义指令 在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,开发人员仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 示例一、 注册一个 v-...
  • vue+print.js实现pdf打印预览效果,可实现图表打印效果 1、在utils中新建print.js文件 // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,160
精华内容 1,664
关键字:

vue自定义打印模板

vue 订阅