一、带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的二维码/商品条形码/打印商品吊牌的更多相关文章

  1. vue生成带logo的二维码

    输入命令行下载 npm install vue_qrcodes <template> <div> <qrcode :url="></qrcode&g ...

  2. C#生成带logo的二维码

    带logo的二维码生成分为两步骤:首先根据输入的内容生成二维码图片,然后读取本地的logo图片,通过图片处理生成带logo的二维码. 生成的二维码效果如下: 下面直接贴出二维码生成类   QRCode ...

  3. .NET生成带Logo的二维码

    使用ThoughtWorks.QRCode生成,利用这个库来生成带Logo的二维码(就是中间嵌了一个图片的二维码),直接见代码: HttpContext context = HttpContext.C ...

  4. 制作、解析带logo的二维码

    用DecoderQRCode来解析带logo的二维码,发现报错,解析不了,于是便又查资料,找到了更强大的制作二维码 工具:GooleZXing 首先下GooleZXing的jar包. -------- ...

  5. C# ZXing.Net生成二维码、识别二维码、生成带Logo的二维码(二)

    1.使用ZXint.Net生成带logo的二维码 /// <summary> /// 生成带Logo的二维码 /// </summary> /// <param name ...

  6. 生成二维码、条形码、带logo的二维码

    Nuget安装ZXing.Net,帮助类: using System; using System.Collections.Generic; using System.Drawing; using Sy ...

  7. Java实现带logo的二维码

    Java实现带logo的二维码 二维码应用到生活的各个方面,会用代码实现二维码,我想一定是一项加分的技能.好了,我们来一起实现一下吧. 我们实现的二维码是基于QR Code的标准的,QR Code是由 ...

  8. jQuery-qrcode.js 生成带Logo 的二维码

    引入文件  jQuery-qrcode.js 地址:https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.js https:// ...

  9. 涛哥的Python脚本工具箱之生成带Logo的二维码

    近期须要在二维码上加Logo,网上没有找到好用的,于是自己用python写了一个. 须要安装qrcode,PIL库 二维码简称 QR Code(Quick Response Code),学名为高速响应 ...

随机推荐

  1. Candy (candy)

    Description Due to its great contribution to the maintenance of world peace, Dzx was given an unlimi ...

  2. Linux最常用的命令大全

    Linux最常用的命令大全 按功能索引 目录处理命令 ls mkdir pwd cd rmdir cp mv rm 文件处理命令 touch cat tac more less head tail l ...

  3. Mysql架构与内部模块-第二章

    接上文,上文简述到了Mysql中的查询缓存和解析器,今日我们继续. 先来看一段SQL:SELECT * FROM `jianghuadong`; 先假设我们数据库中并没有一张名为jianghuadon ...

  4. hugo官方相关文档地址

    +++ date="2020-10-17" title="hugo官方相关文档地址" tags=["hugo"] categories=[& ...

  5. ansible用get_url模块在受控机下载文件(ansible2.9.5)

    一,ansible的get_url模块用途: get_url模块可以在受控机下载文件 可以理解成从受控端执行wget 下载的url支持:http | https | ftp   三种协议 说明:刘宏缔 ...

  6. python 安装matplotlib

    下载minianaconda 安装 进入cmd下 conda create --name python37 python=3.7  创建python3.7环境 conda activate pytho ...

  7. centos6.8 配置 yum 仓库

    挂载方式 mkdir /mnt/cdrom 加载光盘: mount /dev/cdrom /mnt/cdrom/ 挂载光盘到 /mnt/cdrom/ 挂载成功 cd /etc/yum.repos.d/ ...

  8. APP打开(二)—标准流程

    APP打开是一个老生常谈的话题,在互联网时代,在APP遍地的时代,APP打开是每一个APP的必经之路,今天我想通过以下几点来阐述APP打开的标准流程,给这个话题写一点自己的见解. APP打开现状 标准 ...

  9. git学习(十) idea git reset 操作

    git reset 是回滚操作,在 idea 中使用如下: Reset Type 有三种: Mixed 默认方式,只保留源码,回退 commit 和 index 信息 Soft 回退到某个版本,只回退 ...

  10. 使用Navicat远程连接阿里云ECS服务器上的MySQL数据库

    一.必须给服务器的安全组规则设置端口放行规则,在管理控制台中设置: 之后填写配置,授权对象是授权的IP,其中0.0.0.0/0为所有IP授权,之后保存; 二.Navicat使用的配置 在编辑连接处,要 ...