35.vue中使用Lodop


 
1 把官方提供的LodopFuncs.js文件保存到某个目录下,
如myProject\src\assets\LodopFuncs.js。

2 修改LodopFuncs.js文件, 在文件最底部添加一行代码
export { getLodop }; //导出getLodop
把该文件中的getLodop函数 export 出来。

3 在打印事件处理函数所在文件里 import 该 module
在打印事件函数中调用getLodop获取LODOP对象变量,
按照官方教程书写自己的打印函数,通过 PRINT、PREVIEW、PRINT_DESIGN进行输出。
如下代码所示 myProject\src\components\Print.vue

<template>
    <div class="Print">
        <button class="print-btn" v-on:click="btnClickPrint">
            <span>{{msg}}</span>
        </button>
    </div>
</template>
<script>
import { getLodop } from '../assets/LodopFuncs' //导入模块
export default {
    name: 'Print',
    data () {
     return {
        msg: '点击按钮打印'
        }
    },
methods: {
    btnClickPrint: function () {
        let LODOP = getLodop()//调用getLodop获取LODOP对象
        LODOP.PRINT_INIT("")
        LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印内容")
        LODOP.PREVIEW()
          }
     }
  }
</script>