生成二维码，并且打印出来

加入依赖

//二维码依赖
npm install --save qrcodejs2
//打印依赖
npm install vue-print-nb --save

在mian文件夹中使用引入并使用，或者按需引入


//打印依赖
import Print from 'vue-print-nb'
Vue.use(Print)

本次二维码是按需引入
参考代码

<template><div><div><el-input size="mini" v-model="text" style="width:250px" clearable></el-input><el-button size="mini" @click="qrcode">生成</el-button><el-button type="primary" size="mini" v-print="printObj">打印</el-button><p style="display:flex;margin-bottom:20px">以下为打印内容：</p><div id="qrcodeAll" class="qrcodeAll"><table border="1" cellpadding="23"><tr><th>表头1</th><th>表头2</th></tr><tr><td>这是二维码</td><td><div ref="qrcode" id="qrcode"></div></td></tr></table></div></div></div>
</template>
<script>
// 按需引入
import QRCode from "qrcodejs2";
export default {data() {return {text: "",printObj: {id: "qrcodeAll"//其他配置项，}};},created() {},methods: {qrcode() {this.$refs.qrcode.innerHTML = "";//为了替换第一个二维码而准备let qrcode = new QRCode("qrcode", {width: 100,height: 100, // 高度text: this.text // 二维码内容// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）// background: '#f0f'// foreground: '#ff0'});}}
};
</script><style lang="scss" scoped>
.qrcodeAll {table {th {padding: 10px 20px;}td{padding: 10px;}}
}
</style>

效果图：

打印的效果图：

生成二维码，并且打印相关推荐

vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode
通过使用 qrcode 生成二维码, 使用 jszip 打包批量二维码文件, 使用 file-saver 下载打包好的zip文件, 使用 vue-print-nb 打印生成的二维码生成二维码: 打印 ...
Winform中实现Excel导入、表格展示、多选获取值、生成二维码、打印流程(附代码下载)
场景整体流程需求 1.导入Excel并获取Excel的数.. 2.将Excel的数据复制给DataGridView中进行显示并能实现多选. 3.根据选中的内容生成二维码. 4.将二维码打印. 整体效 ...
【工厂开发：使用扫码枪生成二维码并打印】使用扫码枪用JavaScript 生成二维码，并打印二维码
在厂里做erp,有要求写一个扫码枪扫描二维码生成的demo,并用打印机打印出来. 需求: 1. 使用扫码枪扫描二维码,获取内容 2. 把内容转成二维码显示到页面 3. 打印这个二维码使用扫码枪扫描二 ...
vue中使用qrcode生成二维码并实现打印功能
问题产生背景: 客户要求根据表格中选中的数据产生对应的二维码并可以利用打印机打印出来必要条件:vue.需要安装qrcode和vue-print-nb依赖(具体安装可自行百度) 实现思路: 当用户勾选 ...
delphi使用TDelphiZXingQRCode生成二维码条形码
使用TDelphiZXingQRCode控件生成二维码条形码打印到TBitmap位图中,可以把二维码保存到JPG图片中.使用简单,代码如下: 需要的单元: uses Graphics, Jpeg, D ...
java生成二维码并调用二维码打印机
自己折腾了好久,百度.google了半天,发现java生成二维码的文章倒是很多,但是调用二维码打印的就很少了,好多打印出来要么是二维码占用好几张纸,要么就是多出4.5张白纸,浪费了我不少的条码纸,最终 ...
java生成二维码打印到浏览器
java生成二维码打印到浏览器解决方法: pom.xml的依赖两个jar包: <!-- https://mvnrepository.com/artifact/com.google.zxing/ ...
springboot2整合二维码生成二维码图片及输出web端及打印
step1 导包 <dependency><groupId>com.google.zxing</groupId><arti ...
C#生成二维码和条形码并实现打印的功能
转载:https://www.cnblogs.com/xixim/p/4589078.html 下载地址:http://pan.baidu.com/s/1kTr3Vuf Step1:使用VS2010新 ...
vue生成条形码和二维码并打印
文章目录前言一.生成条形码二.生成二维码三.效果图四.打印前言最近有一个需求,需要将产品信息生成标签,每个信息生成一个条形码,拿到所有数据生成二维码,最后打印标签. 一.生成条形码使用 ...

生成二维码，并且打印

生成二维码，并且打印出来

效果图：

生成二维码，并且打印相关推荐

最新文章

热门文章