angular2 生成一维码

你需要的源码demo放在这里了：https://gitee.com/zxyuns/Swiper

效果图展示（参照一维码生成Test项目运行即可）

数字转成一维码.gif

重点来了（参照：angular2 生成一维码barCode.js）

该项目界面无法运行，可以不用去管它，毕竟是好久前的demo了，咱们只管往angular4.x里面引入就行了

具体操作步骤：

1.首先把JsBarcode.all.js放在assets文件夹下
2.然后在index.html中引入
3.最后在用到的组件中声明：declare var JsBarcode: any;

Html

<div id="print-section">
  <div *ngFor="let bc of barcodeList;let i=index" style="float:left;width:33%;margin-top:10px">
    <div style="text-align:center">{{barcodeTitle}}</div>
    <div style="text-align:center"> <img id="bc_{{i}}"/></div>
  </div>
</div>

ts

import { Component, OnInit } from '@angular/core';
declare var JsBarcode: any;

const STRINGLIST: string[] = ["14221345", "1543253452", "312542345", "3154346543", "14221345", "1543253452", "312542345", "3154346543"];

@Component({
  selector: 'print-page',
  templateUrl: './print-page.component.html',
  styleUrls: ['./print-page.component.css']
})
export class PrintPageComponent implements OnInit {

  public barcodeList: string[] = STRINGLIST;
  public barcodeTitle:string="图书馆";

  constructor() { }

  ngOnInit() {
    setTimeout(() => {
      for (var i = 0; i < this.barcodeList.length; i++) {
        this.generateBarcode("bc_" + i, this.barcodeList[i]);
      }
    }, 1000);
  }


  /* 生成条形码 */
  generateBarcode(id: string, code: string) {
    var barcode = document.getElementById(id),
      options = {
        format: "CODE128",
        displayValue: true,
        fontSize: 18,
        height: 100
      };
    JsBarcode(barcode, code, options);
  }
}

最后可以参考这篇写得很好的博客，ng2 生成一维码：
作者：Francis-李鑫超
来源：CSDN
原文：https://blog.csdn.net/Francis123580/article/details/78616864
https://blog.csdn.net/Francis123580/article/details/78616864?utm_source=blogxgwz3

参考博客：条形码插件-JsBarcode的使用 、jquery-barcode:js实现的条码打印 、JSBarcode