提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、vue 项目中生成条形码（jsbarcode）二、vue中使用二维码插件1.使用方法2.贴心小提示三、vue的打印插件总结前言提示：这里可以...

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

文章目录

• 前言
• 一、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），具体样式在这个选择器下具体调整

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