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 相关文章推荐
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
详解vue路由
Aug 05 Javascript
在vue中axios设置timeout超时的操作
Sep 04 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安装问题
2006/10/09 PHP
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
python中from module import * 的一个坑
2014/07/20 Python
Python函数参数类型*、**的区别
2015/04/11 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
pytorch构建多模型实例
2020/01/15 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
电子信息专业自荐书
2014/02/04 职场文书
数学系毕业生求职信
2014/05/29 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
委托书格式要求
2015/01/28 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL