前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue 项目中生成条形码（jsbarcode）

安装 cnpm install jsbarcode --save
引入 import JsBarcode from ‘jsbarcode’
容器支持三种形式，img/svg/canvas，根据自己的需要三选一即可

JsBarcode("#imgcode", "123", {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//设置条形码周围的空白边距
});

相关网址
GitHub：https://github.com/lindell/JsBarcode
条码生成器：http://lindell.me/JsBarcode/generator/
JsBarcode示例与设置：http://codepen.io/lindell/pen/mPvLXx?editors=1010
简单的JsBarcode演示：http://codepen.io/lindell/pen/eZKBdO?editors=1010

二、vue中使用二维码插件

1.使用方法

安装 cnpm install --save qrcodejs2

<template><div><div id="qrcode"></div> <!-- 创建一个div，并设置id为qrcode --></div>
</template><script>
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {name : 'test',mounted () {this.qrcode();},methods: {qrcode() {let qrcode = new QRCode('qrcode', {width: 132,  height: 132,text: 'https://www.baidu.com', // 二维码地址colorDark : "#000",colorLight : "#fff",})},}
}
</script>

2.贴心小提示

如果需要二维码有白边，通过css可以实现：

<style lang='less'>#qrcode {display: inline-block;img {width: 132px;height: 132px;background-color: #fff; //设置白色背景色padding: 6px; // 利用padding的特性，挤出白边}}
</style>

三、vue的打印插件

如果需要二维码有白边，通过css可以实现：

总结

安装 npm install vue-print-nb --save
引入  main.js
import Print from 'vue-print-nb'  Vue.user(Print)
用法（v-print指向目标dom）<div id="single-info"><el-form  label-width="160px"><el-row align="center" style="margin-top:30px;"><el-col :span="24" align="center"><el-button id="info-btn" v-print="'#single-info'"  @click="prints">打印</el-button></el-col></el-row></el-form></div>
打印设置
@media print {@page {margin: 0cm;padding: 0cm;size: portrait;//设置横（landscape）纵（portrait）向} //@media print可以设置打印时，dom的样式，但请注意一般浏览器有最小字体限制（谷歌浏览器为12px），具体样式在这个选择器下具体调整

例如：嘿嘿，大家有需要可以参照着用，我只是一只小菜鸟，有很多错误，望指正

vue条形码，二维码，打印总结分享相关推荐

【C#】最全单据打印（打印模板、条形码二维码、字体样式、项目源码）
系列文章 [C#]编号生成器(定义单号规则.固定字符.流水号.业务单号) 本文链接:https://blog.csdn.net/youcheng_ge/article/details/12912978 ...
vue实现二维码批量打印功能
vue实现二维码批量打印功能业务需求:客户需要给每个商品贴上二维码,为了更加高效的完成这项工作需要配合热敏打印机实现批量打印二维码的需求,因为是web项目后端会部署到服务器上,因此只能通过js的方式 ...
个人用户永久免费，可自动升级版Excel插件，使用VSTO开发，Excel催化剂功能第12波-快速生成、读取、导出条形码二维码...
根据指定的内容生成对应的条形码或二维码,在如今移动互联网时代,并不是一件什么新鲜事,随便百度一下,都能找到好多的软件或在线网站可以帮我们做到,但细想一下,如果很偶然地只是生成一个两这样的图形,百度一下 ...
条码条形码二维码检错系统供应
条码条形码二维码检错系统可防止因人为误操作.设备损坏等原因导致的错误,减少产品的退货返工,避免客户的投诉,提高工作效率.减少人力成本.适用于各种需要对条码进行检查的场合,如标签打印检查.装箱前对箱型 ...
vue生成二维码并下载
vue生成二维码图片,这里使用的是qrcode.js 这个插件 1.下载插件 npm install --save qrcodejs2 2.组件内使用 <template> <B ...
[原创]解决某物流企业二维码打印问题
[原创]解决某物流企业二维码打印问题参考文章: (1)[原创]解决某物流企业二维码打印问题 (2)https://www.cnblogs.com/ruochen/archive/2012/06/28 ...
java生成二维码打印到浏览器
java生成二维码打印到浏览器解决方法: pom.xml的依赖两个jar包: <!-- https://mvnrepository.com/artifact/com.google.zxing/ ...
原生Vue实现二维码扫一扫，兼容PC、安卓、IOS
原生Vue实现二维码扫一扫通过使用 vue-qrcode-reader 进行实现,必须是 Https 或 Localhost 文章目录原生Vue实现二维码扫一扫 vue-qrcode-reader ...
利用VUE生成二维码（两种方式）
利用Vue生成二维码 Author:kak vue有两种生成二维码的方式,qrcode.vue-qr(有icon): 1.qrcode npm ``install` `--save qrcodejs2 ...
GM65条形码二维码扫描识别模块与STM32学习
目录模块介绍: 简介: 原理介绍: 工作流程: 技术参数: 修改配置: 代码介绍: 串口函数: 主函数: 模块介绍: 简介: GM65 条形码二维码扫描识别模块是一种基于激光扫描头的识别设备原理介 ...

vue条形码，二维码，打印总结分享

文章目录

前言