vue实现lodop打印功能的示例


Posted in Javascript onNovember 11, 2020

1.官网下载

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

vue实现lodop打印功能的示例

2.解压安装运行

vue实现lodop打印功能的示例

3.vue部分实现

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

vue实现lodop打印功能的示例

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实现lodop打印功能的示例的详细内容,更多关于vue实现打印功能的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript之解决IE下不渲染的bug
Jun 29 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
js实现菜单跳转效果
Dec 11 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 #Javascript
vue mvvm数据响应实现
Nov 11 #Javascript
Js数组扁平化实现方法代码总汇
Nov 11 #Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 #Javascript
Vue3 响应式侦听与计算的实现
Nov 11 #Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 #Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 #Javascript
You might like
使用PHP编写的SVN类
2013/07/18 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
python简单的函数定义和用法实例
2015/05/07 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
python字符串与url编码的转换实例
2018/05/10 Python
python读取文件名并改名字的实例
2019/01/07 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
思想汇报范文
2013/11/04 职场文书
市场营销专业求职信
2014/06/17 职场文书
班级课外活动总结
2014/07/09 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
升学宴学生答谢词
2015/01/05 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js