【Angular2】生成条形码并打印网页
来源:互联网 发布:jsp登录模板代码源码 编辑:程序博客网 时间:2024/05/18 00:02
引言
项目中要用到生成一系列的条形码,并在网页中打印
前端用的是Angular2,在实现的过程中查找了许多资料,以下是相关总结
步骤
1.下载JsBarcode.all.js
下载地址:http://download.csdn.net/download/francis123580/10130270
2.把JsBarcode引入到项目
首先把js放在assets文件夹下;
然后在index.html中引入;
最后在用到的组件中声明:declare var JsBarcode: any;
参考博客:如何在Angular2中使用jQuery及其插件的方法
、 Angular2中如何使用jquery 、 在 Angular 2 Component 中使用第三方 JS 库
3.编写生成条形码的代码
html code
<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 code
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); }}
参考博客:条形码插件-JsBarcode的使用 、jquery-barcode:js实现的条码打印 、JSBarcode
4.编写打印页面的代码
html code
<div style="width: 100%;float: left;text-align: center;margin-top: 30px;"> <button style="font-size:20px" (click)="print()">打印</button></div>
ts code
/* 打印 */ print(): void { let printContents, popupWin; printContents = document.getElementById('print-section').innerHTML; popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto'); popupWin.document.open(); popupWin.document.write(` <html> <head> <title>Print Page</title> <style> //........Customized style....... </style> </head> <body onload="window.print();window.close()">${printContents}</body> </html>` ); popupWin.document.close(); }
小结
因为这是一个测试组件,所以用的数据是const假数据,相关的数据格式和内容需要根据自己的后端接口返回的数据来重新编写
另外需要注意一下异步的问题,不然会报getContext的问题,建议返回数据之后再做页面的渲染,渲染完成之后再生成条形码
阅读全文
0 0
- 【Angular2】生成条形码并打印网页
- ASP.NET关于条形码的生成问题兼网页打印
- 字符串生成条形码图片并插入到Excel!并打印出来后可以扫描!
- 在网页上生成条形码
- 网页制作java 生成条形码
- C#利用zxing.net生成二维码和条形码并实现打印的功能
- C#利用Zxing.net生成条形码和二维码并实现打印的功能
- C#利用Zxing.net生成二维码和条形码并实现打印的功能
- 条形码二维条形码生成打印控件Barcode Professional介绍
- .net实现生成及打印条形码功能
- .net实现生成及打印条形码功能
- .net实现生成及打印条形码功能
- .net实现生成及打印条形码功能
- 条形码和二维码 生成以及打印
- 动态生成条形码并将条形码插入进excel中
- 打印条形码
- 打印条形码
- 条形码 java生成条形码
- Openresty最佳案例 | 汇总
- 【Scikit-Learn 中文文档】集成方法
- POJ 1837.Balance
- 微信小程序wx.getlocation相邻两个页面连着的时候第二个页面一直显示定位中
- html总结
- 【Angular2】生成条形码并打印网页
- JEECG架构讲解及使用
- mysqldump导出包含存储过程(SP)的数据库文件
- tcpcopy
- scala使用par并行集合设置的线程池未关闭导致的内存占用问题
- Python读取txt、csv文件
- 深度学习系列7(总结)
- java的书写格式
- VM虚拟机不能上网的问题解决