首页 > 其他分享> 文章详细

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

2021-03-29 16:01:56 阅读：652 来源： 互联网

标签：条形码 vue JsBarcode 二维码设置 qrcode 文本

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、vue 项目中生成条形码（jsbarcode）
二、vue中使用二维码插件
- 1.使用方法
- 2.贴心小提示
三、vue的打印插件
总结

前言

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

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

一、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,JsBarcode,二维码,设置,qrcode,文本
来源： https://blog.csdn.net/qq_41698692/article/details/115303067

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9