vue实现带logo的二维码/商品条形码/打印商品吊牌
- 2020 年 11 月 12 日
- 筆記
- javascript, vue.js
一、带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: '//www.baidu.com', // logo图片 logo: '//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地址介绍：//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>
