• vue实现打印的两种方法
  • vue实现批量打印二维码 (需安装二维码插件qrcodejs2)

一、vue-print-nb插件

1、安装: npm i vue-print-nb -S

2、全局注册(main.js):

import Print from 'vue-print-nb'
Vue.use(Print)

3、使用:

<div id="printTest" >
  <p>锄禾日当午</p>
  <p>汗滴禾下土 </p>
  <p>谁知盘中餐</p>
  <p>粒粒皆辛苦</p>
</div>
<button v-print="'#printTest'">打印</button>

二、手动下载插件到本地

插件地址:https://github.com/xyl66/vuePlugs_printjs

1、在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下

2、全局注册(main.js):

import Print from './plugins/print'
Vue.use(Print) // 注册

3、使用

<div ref="print" >
  <p>打印内容</p>
  <p class="no-print">不要打印我</p>
</div>
<button @click="handlePrintText">打印</button>
<!--no-print样式类 为不打印区域-->
methods:{
handlePrintText(){
this.$print(this.$refs.print)
}
}

实现批量打印二维码

1、安装二维码插件

npm i qrcodejs2 -S

2、导入插件

import QRCode from 'qrcodejs2';

3、使用

<!--设置打印内容在页面上不可见-->
<div style="display:none;">
<div ref="print" id="printStyle">
 <div class="item" v-for="(item,index) in this.goodsData" :key="index">
<h2>{{item.name}}</h2>
<div class="qrcode-pic" ref=codeItem></div>
</div>
</div>
</div>
<button @click="handleBatchPrintCode">批量打印</button>
//假设需要批量打印的数组为goodsData:[{name:'商品1', code:'123'},{name:'商品2', code:'456'}]
methods:{
handleBatchPrintCode(){
//必须要等到页面加载完成,不然会报错
this.$nexTick(()=>{
this.goodsData.forEach((item,index)=>{
let code = item.code;
this.$refs.codeItem[index].innerHTML="";
new QRCode(this.$refs.codeItem[index], {
text: code, //二维码内容
width: 200,
height: 200,
// colorDark: "#333333", //二维码颜色
// colorLight: "#ffffff", //二维码背景色
})
})
setTimeout(()=>{
this.$print(this.$refs.print);
},200)
})
}
}

4、样式问题

//打印样式放在这个里面就可以了
@media print{
#printStyle .item{
margin: 10px;
}
#printStyle h2{
font-size: 30px;
} }

5、效果图

这两种方法效果一样,点击按钮弹出一个打印弹窗,唯一不同的是调用方法不一样,看个人需求选择使用哪种

ps:功能算是实现了,具体还没连打印机,所以没法测试,有问题后面再补充

vue常用插件之打印功能、二维码插件、批量打印二维码的更多相关文章

  1. 使用那各VUE的打印功能(print.js)出现多打印一个空白页的问题

    最近这段时间,用VUE写东西,有个打印功能. 百度了一下,铺天盖地的VUE打印的两种实现方法. 很感激这些千篇一律的帖子,虽然不知道他们是否真的用过,还是只是复制粘贴. 至少这些帖子告诉我,是有两个可 ...

  2. vue html页面打印功能vue-print

    vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 使用方式 安装 npm install vue-print-nb --save ...

  3. 使用FastReport.net 报表在网页上实现打印功能

    这些年的工作当中,最早是在8年前接触到FastReport这个报表工具,从名字上来看,直译过来就是快速报表,正所谓天下武功,唯快不破,FastReport报表早些年确实是制作报表的不二之选,8年前的工 ...

  4. layer系列之table导出+打印功能总结

    1.关于layui导出方式,直接使用layui(版本2.4.5及以上)自带的导出方法即可: layui官网地址:https://www.layui.com/ 源码如下: <!DOCTYPE ht ...

  5. 前端打印功能实现及css设置

    首先是使用下边代码,实现js局部打印功能.参数dom为需要打印的节点,为了保证页面功能的单一性,最好弹出一个新的预览页面完成打印功能. function print(dom){ var body = ...

  6. LODOP打印控件进行批量打印

    Lodop打印控件批量打印的方式:1.批量打印每页内容相同的:(1)批量打印相同内容的很多纸张,可以设置打印份数,把该内容打印出多份.2.批量打印每页不同内容的:(1)通过在一个任务中分页,循环添加页 ...

  7. python 批量打印PDF

    有一批PDF文件,好几百个,每个只打印第2,3页,双面打印. 网上搜索一波,方案如下: 安装Ghostscript,GhostView,使用gsprint命令打印pdf文件. gsprint命令参数说 ...

  8. vue生成二维码插件qrcodejs2

    1.页面 <div id="qrCode" ref="qrCodeDiv"></div> 2.导入插件 import QRCode fr ...

  9. (转: daifubing的博客 )Delphi二维码中文支持、分组、批量打印经验小结

    一直也没接触到什么复杂的报表,都是一些简单的报表,在DelphI下使用QuickReport一般也就能满足需要了,由于公司现在需求的变化,对条码扫描提出了新的要求,主要是扫码要包含更多地内容,以前的一 ...

随机推荐

  1. 云服务器centos系统安装python

    1.查看python的版本 $ cd /usr/bin/$ ls python* $ ls -al python* //查看依赖关系 2.如果版本不合适可以卸载python再重新安装 # rpm -q ...

  2. python pandas合并多个excel(xls和xlsx)文件(弹窗选择文件夹和保存文件)

    # python pandas合并多个excel(xls和xlsx)文件(弹窗选择文件夹和保存文件) import tkinter as tk from tkinter import filedial ...

  3. 从零开始学习MySQL全文索引

    目录 一.为什么要用全文索引 二.什么是全文索引 三.如何创建全文索引 四.创建测试数据 五.查询-使用自然语言模式 六.查询-使用布尔模式(强大的语法) 语法 示例 七.查询-使用扩展模式 八.注意 ...

  4. Happycorp:1 Vulnhub Walkthrough

    靶机链接: https://www.vulnhub.com/entry/happycorp-1,296/ 网络主机扫描::: 主机端口扫描: NFS文件系统,尝试挂载试试 mount -t nfs 1 ...

  5. 简单的试了试async和await处理异步的方式

    今天无意中就来试了试,感觉这个新的方法还是非常行的通的,接下来我们上代码 这段代码想都不用想输出顺序肯定是//null null 233,当然出现这个问题还是因为它是同步,接下来我们就进行异步方式来处 ...

  6. webpack打包进行丑化压缩遇到(TypeError Cannot read property 'compilation' of undefined)问题

    今天再重新配置老项目node打包环境的时候遇到了一个问题. 在打包的时候报: TypeError: Cannot read property 'compilation' of undefined 错误 ...

  7. Linux ps和pstree命令

    1. 查看所有进程 ps -eF -e: Select all processes.-F: Extra full format. PSR (Processor)显示进程所在的CPU. 2. 查看所有进 ...

  8. vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)

    vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...

  9. 《自拍教程18》adb_Android设备debug连接工具

    adb命令介绍 做Android App测试,Android手机系统测试, 还有很多Android终端产品(手表,车载,智能电视,智能手表等) 都必须用adb命令,通过USB接口,与Android设备 ...

  10. CSS 如何实现当鼠标放在上面时整行变色呢?

    摘要:下文讲述css中实现鼠标放在指定行上面时,整行变色的方法分享,如下所示: 实现思路:使用:hover伪类,实现当鼠标指向时,其背景色发生相应的变化,如下例所示: 例: 下文中的div,当鼠标放上 ...