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),学名为高速响应 ...
随机推荐
- Candy (candy)
Description Due to its great contribution to the maintenance of world peace, Dzx was given an unlimi ...
- Linux最常用的命令大全
Linux最常用的命令大全 按功能索引 目录处理命令 ls mkdir pwd cd rmdir cp mv rm 文件处理命令 touch cat tac more less head tail l ...
- Mysql架构与内部模块-第二章
接上文,上文简述到了Mysql中的查询缓存和解析器,今日我们继续. 先来看一段SQL:SELECT * FROM `jianghuadong`; 先假设我们数据库中并没有一张名为jianghuadon ...
- hugo官方相关文档地址
+++ date="2020-10-17" title="hugo官方相关文档地址" tags=["hugo"] categories=[& ...
- ansible用get_url模块在受控机下载文件(ansible2.9.5)
一,ansible的get_url模块用途: get_url模块可以在受控机下载文件 可以理解成从受控端执行wget 下载的url支持:http | https | ftp 三种协议 说明:刘宏缔 ...
- python 安装matplotlib
下载minianaconda 安装 进入cmd下 conda create --name python37 python=3.7 创建python3.7环境 conda activate pytho ...
- centos6.8 配置 yum 仓库
挂载方式 mkdir /mnt/cdrom 加载光盘: mount /dev/cdrom /mnt/cdrom/ 挂载光盘到 /mnt/cdrom/ 挂载成功 cd /etc/yum.repos.d/ ...
- APP打开(二)—标准流程
APP打开是一个老生常谈的话题,在互联网时代,在APP遍地的时代,APP打开是每一个APP的必经之路,今天我想通过以下几点来阐述APP打开的标准流程,给这个话题写一点自己的见解. APP打开现状 标准 ...
- git学习(十) idea git reset 操作
git reset 是回滚操作,在 idea 中使用如下: Reset Type 有三种: Mixed 默认方式,只保留源码,回退 commit 和 index 信息 Soft 回退到某个版本,只回退 ...
- 使用Navicat远程连接阿里云ECS服务器上的MySQL数据库
一.必须给服务器的安全组规则设置端口放行规则,在管理控制台中设置: 之后填写配置,授权对象是授权的IP,其中0.0.0.0/0为所有IP授权,之后保存; 二.Navicat使用的配置 在编辑连接处,要 ...