vue实现lodop打印功能的示例

 更新时间:2020年11月11日 09:16:42   作者:亲爸爸  
这篇文章主要介绍了vue实现lodop打印功能的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下

1.官网下载

http://www.lodop.net/download.html

2.解压安装运行

3.vue部分实现

  3.1将lodopDuncs.js文件放入工程中,具体操作可见:http://www.lodop.net/faq/pp35.html

3.2 编写代码

<template>
 <div class="hello">
  <button class="print-btn" v-on:click="btnClickPrint">
   <span>{{ msg }}</span>
  </button>
 </div>
</template>

<script>
import { getLodop } from "../assets/LodopFuncs"; //导入模块
export default {
 name: "HelloWorld",
 data() {
  return {
   msg: "点击打印按钮",
  };
 },
 methods: {
  // btnClickPrint: function () {
  //  let LODOP = getLodop(); //调用getLodop获取LODOP对象
  //  LODOP.PRINT_INIT("");
  //  LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印内容");
  //  LODOP.PREVIEW();
  // },
  btnClickPrint() {
   let LODOP = getLodop(); //调用getLodop获取LODOP对象
   LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_整页缩放打印输出");
   LODOP.ADD_PRINT_BARCODE(15, 15, 300, 300, "QRCode", "xxxxxxxxxxxxx");
   LODOP.SET_PRINT_STYLEA(0, "Stretch", 1); //(可变形)扩展缩放模式
   LODOP.PREVIEW(); //预览(预览打印无脚标)
   // LODOP.PRINT(); //打印
  },
 },
};
</script>

效果如下:

以上就是vue实现lodop打印功能的示例的详细内容,更多关于vue实现打印功能的资料请关注脚本之家其它相关文章!

相关文章

  • Vue+ElementUI table实现表格分页

    Vue+ElementUI table实现表格分页

    这篇文章主要为大家详细介绍了Vue+ElementUI table实现表格分页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • vue打包后出现空白页的原因及解决方式详解

    vue打包后出现空白页的原因及解决方式详解

    在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览,根据官网打包出来的html直接打开是显示空白,下面这篇文章主要给大家介绍了关于vue打包后出现空白页的原因及解决方式的相关资料,需要的朋友可以参考下
    2022-07-07
  • Vuex进行Echarts数据页面初始化后如何更新dom

    Vuex进行Echarts数据页面初始化后如何更新dom

    这篇文章主要为大家详细介绍了使用Vuex做Echarts数据时,当页面初始化后如何更新dom,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
    2023-11-11
  • Vue使用mind-map实现在线思维导图

    Vue使用mind-map实现在线思维导图

    Vue中的Mind-Map通常是指使用Vue.js这个前端框架构建的思维导图组件或库,它可以帮助开发者在Web应用中创建动态、交互式的思维导图,让用户可以直观地组织信息和结构化数据,本文介绍了Vue使用mind-map实现在线思维导图,需要的朋友可以参考下
    2024-07-07
  • 解决VUE-Router 同一页面第二次进入不刷新的问题

    解决VUE-Router 同一页面第二次进入不刷新的问题

    这篇文章主要介绍了解决VUE-Router 同一页面第二次进入不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue使用pinia管理数据pinia持久化存储问题

    Vue使用pinia管理数据pinia持久化存储问题

    这篇文章主要介绍了Vue使用pinia管理数据pinia持久化存储问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue组件开发初探

    Vue组件开发初探

    本篇文章主要介绍了Vue组件开发初探,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • Vue 先初始化父组件再初始化子组件的方法(自定义父子组件mounted执行顺序)

    Vue 先初始化父组件再初始化子组件的方法(自定义父子组件mounted执行顺序)

    这篇文章主要介绍了Vue 先初始化父组件再初始化子组件的方法(自定义父子组件mounted执行顺序),本篇内容内容主要讲述了,在使用 Konva 进行开发过程中遇到的一些问题,需要的朋友可以参考下
    2024-07-07
  • vue中$emit的用法详解

    vue中$emit的用法详解

    这篇文章主要介绍了vue中$emit的用法详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 详解vue2.0 transition 多个元素嵌套使用过渡

    详解vue2.0 transition 多个元素嵌套使用过渡

    这篇文章主要介绍了详解vue2.0 transition 多个元素嵌套使用过渡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论