vue实现带logo的二维码/商品条形码/打印商品吊牌
一、带logo的二维码
1.安装
npm install vue-qr --save
2.在页面或组件中使用
<template>
<div id="qrcode">
<vue-qr
:size="qrcodeVue.size"
:text="qrcodeVue.value"
:colorLight="qrcodeVue.bgColor"
:colorDark="qrcodeVue.fgColor"
:logoSrc="qrcodeVue.logo"
:logoScale="qrcodeVue.logoSize"
>
</vue-qr>
</div>
</template> <script>
import vueQr from 'vue-qr'
export default {
components: {
vueQr
},
data() {
return {
// 二维码
qrcodeVue: {
size: 512,
bgColor: '#ffffff',
fgColor: '#000000',
// 二维码地址
value: 'https://www.baidu.com',
// logo图片
logo: 'https://static.paipaiyin.cn/test/pxKGTpymnX1586327945737.png',
logoSize: 0.20,
},
}
}
}
</script>
3.下载带logo的二维码
// 下载二维码
downloadQrcode() {
// 获取base64的图片节点
let img = document.getElementById('qrcode').getElementsByTagName('img')[0];
// 构建画布
let canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;
canvas.getContext('2d').drawImage(img, 0, 0);
// 构造url
let url = canvas.toDataURL('image/png');
// 构造a标签并模拟点击
let downloadLink = document.createElement('a');
downloadLink.setAttribute('href', url);
downloadLink.setAttribute('download', '二维码.png');
downloadLink.click();
},
4.详细参数介绍
官方GitHub地址介绍:https://www.npmjs.com/package/vue-qr
二、商品条形码
1.安装
npm install @xkeshi/vue-barcode
2.在页面或组件中使用
html
<barcode :value="barcode" :options="barcode_option" tag="svg"></barcode>
引入
import VueBarcode from '@xkeshi/vue-barcode';
import Vue from 'vue';
Vue.component('barcode', VueBarcode);
数据
// 条形码数据
barcode: 'W20SST0010000138',
barcode_option: {
displayValue: true,
background: 'transparent',
width: '1px',
height: '38px',
fontSize: '10px'
}
3.参数详情介绍
选择要使用的条形码类型 | format: "CODE39" |
设置条之间的宽度 | width:3 |
高度 | height:100 | 是否在条形码下方显示文字 | displayValue: true |
覆盖显示的文本 | text: "456" |
使文字加粗体或变斜体 | fontOptions: "bold italic" |
设置文本的字体 | font: "fantasy" |
设置文本的水平对齐方式 | textAlign: "left" |
设置文本的垂直位置 | textPosition: "top" |
设置条形码和文本之间的间距 | textMargin:5 |
设置文本的大小 | fontSize:15 | 设置条形码的背景 | background: "#eee" |
设置条和文本的颜色 | lineColor: "#2196f3" |
设置条形码周围的空白边距 | margin:15 |
三、打印商品吊牌
1.安装
npm install vue-print-nb --save
2.在页面或组件中使用
引入
import Print from 'vue-print-nb';
import Vue from 'vue';
Vue.use(Print);
在页面中使用
<template>
<div>
<div class="export-labelbox" id="productLabelDoc">
<div class="labelbox-p">
<p class="p1">【twzdB】女装 优质长绒棉宽松长衬衫(长袖)418415 优衣库UNIQLO</p>
<p class="p2">规格:红色/S</p>
</div>
<div class="labelbox-barcode">
<barcode :value="barcode" :options="barcode_option" tag="svg"></barcode>
</div>
</div>
<Button class="exportBtn" type="primary" width="120px" v-print="'#productLabelDoc'">打印</Button>
</div>
</template>
vue实现带logo的二维码/商品条形码/打印商品吊牌的更多相关文章
- vue生成带logo的二维码
输入命令行下载 npm install vue_qrcodes <template> <div> <qrcode :url="></qrcode&g ...
- C#生成带logo的二维码
带logo的二维码生成分为两步骤:首先根据输入的内容生成二维码图片,然后读取本地的logo图片,通过图片处理生成带logo的二维码. 生成的二维码效果如下: 下面直接贴出二维码生成类 QRCode ...
- .NET生成带Logo的二维码
使用ThoughtWorks.QRCode生成,利用这个库来生成带Logo的二维码(就是中间嵌了一个图片的二维码),直接见代码: HttpContext context = HttpContext.C ...
- 制作、解析带logo的二维码
用DecoderQRCode来解析带logo的二维码,发现报错,解析不了,于是便又查资料,找到了更强大的制作二维码 工具:GooleZXing 首先下GooleZXing的jar包. -------- ...
- C# ZXing.Net生成二维码、识别二维码、生成带Logo的二维码(二)
1.使用ZXint.Net生成带logo的二维码 /// <summary> /// 生成带Logo的二维码 /// </summary> /// <param name ...
- 生成二维码、条形码、带logo的二维码
Nuget安装ZXing.Net,帮助类: using System; using System.Collections.Generic; using System.Drawing; using Sy ...
- Java实现带logo的二维码
Java实现带logo的二维码 二维码应用到生活的各个方面,会用代码实现二维码,我想一定是一项加分的技能.好了,我们来一起实现一下吧. 我们实现的二维码是基于QR Code的标准的,QR Code是由 ...
- jQuery-qrcode.js 生成带Logo 的二维码
引入文件 jQuery-qrcode.js 地址:https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.js https:// ...
- 涛哥的Python脚本工具箱之生成带Logo的二维码
近期须要在二维码上加Logo,网上没有找到好用的,于是自己用python写了一个. 须要安装qrcode,PIL库 二维码简称 QR Code(Quick Response Code),学名为高速响应 ...
随机推荐
- JavaScript返回当前的时分秒
要求: 封装一个函数返回当前的时分秒 格式 08:08:08 代码实现: function getTimer() { var time = new Date(); var h = time.getHo ...
- windows上启动docker容器报错:standard_init_linux.go:211: exec user process caused “no such file or directory” - Docker
解决方案: standard_init_linux.go:190: exec user process caused "no such file or directory" - D ...
- lua 1.0 源码分析 -- 总结
读完 lua1.0 的源码感触:1. 把复杂的代码写简单2. pack 的内存回收3. hash 实现简单,但是应该可以改进,看高版本的代码怎么实现4. lua 初始化环境做了什么,就是一组全局变量初 ...
- docker 和 k8s 调研总结
一. docker简介 环境配置 软件开发最大的麻烦事之一,就是环境配置.用户计算机的环境都不相同,你怎么知道自家的软件,能在那些机器跑起来? 用户必须保证两件事:操作系统的设置,各种库和组件的安装. ...
- 初试Python
01 Python简介 Python是一种跨平台的计算机程序设计语言.于1989年开发的语言,创始人范罗苏姆(Guido van Rossum),别称:龟叔(Guido). python具有非常多并且 ...
- 1-1Java概述
001_Java语言发展史 Sun公司:Stanford University Network 002Java跨平台原理 平台:指的是操作系统Windows,Mac,Linux等. 总结:在需要运行 ...
- mysql复制一个表到其他数据库
db1为原数据库,db2为要导出到的数据库,fromtable 是要导出的表名1.方法一:登录导出到的数据库,执行create table fromtable select * from db1.fr ...
- 用node.js给C#写一个数据表的实体类生成工具
虽然微软提供了T4模板,但是我感觉非常难用.哪儿比得上直接用脚本来写模板来的爽. 因为要给一个老项目做周边的工具,需要连接到数据库. 我习惯性用EntityFrameworkCore来做,因为毕竟从出 ...
- 通过两行代码即可调整苹果电脑 Launchpad 图标大小
之前用 13 寸 Mac 的时候我还没觉得,后来换了 16 寸就发现有点不对劲了.因为 Mac 的高分辨率,当你进入 Launchpad 界面,应用图标的大小可能会让你怀疑:这特么是苹果的设计吗?有点 ...
- 显示器类型对美乐威NDI IP转换器延时影响测试
背景 用户在选择用网络传输视频时,传输延迟通常是他们非常关心的数据.集成商在探究如何降低视频传输延时,往往专注于网络本身和视频编码的优化,容易忽略视频解码和播出也是整个视频传输过程中非常重要的环节.本 ...