2. 程式人生 > >Jquery生成條形碼到網頁以及列印條形碼

Jquery生成條形碼到網頁以及列印條形碼

阿新 • • 發佈：2019-01-25

背景

最新一個專案上涉及到生成條形碼，並打印出來，個人經常寫java，但是用後端去處理這個反而挺麻煩的。使用js是比較方便的，這裡就簡單地介紹一下。
在網上查了很多關於生成條形碼的內容，就屬JsBarcode用的最好，github地址：https://github.com/lindell/JsBarcode。對於生成條形碼的延申，也可以好好檢視。

使用環境

這個JsBarcode 的js外掛式依賴於jquery庫，你需要先把這個匯入，然後再匯入JsBarcode庫。否則會出問題。

程式碼詳解

<!DOCTYPE html>
<html>
<head
 
>
    <title></title>
</head>
<script type="text/javascript" src="js/jquery2.1.4.min.js"></script>
<script type="text/javascript" src="js/JsBarcode.all.min.js"></script>
<script type="text/javascript">
    function myprint(){ 
      //直接呼叫瀏覽器列印功能
       bdhtml=window.document.body.innerHTML; 
       //定義列印區域起始字元，根據這個擷取網頁區域性內容     
 

       sprnstr="<!--startprint-->"; //列印區域開始的標記
       eprnstr="<!--endprint-->";   //列印區域結束的標記  
       prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);      
       prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));     
       window.document.body.innerHTML=prnhtml;   
       //開始列印
       window.print();
       //還原網頁內容     
 

       window.document.body.innerHTML=bdhtml; 
    }
    function barcodeGen(){
        var barvalue=$("#barcodeValue").val();
        if(barvalue==""){
            alert("請輸入條形碼字串！！")
        }else{
            $("#bcode").JsBarcode(barvalue);
        }
    }
</script>
<body>
    <hr>
    請輸入要轉成條形碼的數字：<input type="text"  id="barcodeValue"> &nbsp;<a href="#" onClick="barcodeGen();" ><span> 生成條形碼</span></a><br>
    <!--startprint-->
    <img id="bcode"/>
    <!--endprint-->
    <hr>
    <a href="#" onClick="myprint();" ><span> 打  印</span></a><br>
</body>
</html>

效果演示

這裡寫圖片描述

相關推薦

Jquery生成條形碼到網頁以及列印條形碼

背景 最新一個專案上涉及到生成條形碼，並打印出來，個人經常寫java，但是用後端去處理這個反而挺麻煩的。使用js是比較方便的，這裡就簡單地介紹一下。 在網上查了很多關於生成條形碼的內容，就屬JsBarcode用的最好，github地址：https://git

jquery生成條形碼外掛

以前用過很多二維碼的外掛，最近需要一款生成條形碼的外掛，這裡介紹一款簡單實用的生成條形碼的外掛jquery-barcode.js，非常的簡單實用方便，可以去https://github.com/leileibrother/jquery-barcode下載文件，本文參考其他文章

JAVA實現QRCode的二維碼生成以及列印(轉)

不說廢話了直接上程式碼 注意使用QRCode是需要zxing的核心jar包，這裡給大家提供下載地址 https://download.csdn.net/download/dsn727455218/10515340 下載 1.二維碼的工具類   public class QR_Cod

前端動態生成二維碼與條形碼

二維碼 1.匯入qrcode.js vue專案：在main.js中引入匯入的qrcode.js檔案 import '../static/js/qrcode.js' 在需要顯示二維碼的頁面 <div>      &n

Android 生成條形碼 生成下方帶文字的條形碼

可以使用Zxing來獲得條形碼的bitmap. 1.繪製帶有文字的條形碼 由於直接不能繪製出帶有文字的條形碼. 我想到的解決方案是 需要繪製的條形碼的高度的 3/4給條形碼 1/4給文字. 先繪製條形碼 得到bitmap 在建立bitmap 在底部繪製文字,合併兩個bitma

Android 生成豎直方向的條形碼

有橫向的條形碼,也有豎直方向的條形碼. 怎麼把條形碼豎起來呢? 1.旋轉裝著條形碼的view 此方法不可行 因為view的寬高和二維碼的bitmap的寬高是相反的啊.這樣的話即使旋轉了,view裡顯示的圖形會非常小.不行. 2.生成條形碼的bitmap的時候,就要

Jquery Jqprint—藉助Jquery Jqprint實現網頁列印功能

        今天利用閒餘時間研究了一下Jquery Jqprint外掛，使用該Jquery指令碼可以輕而易舉的實現列印網頁指定區域內容的功能：        例子一：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric

Jquery 動態生成li標籤以及單擊事件的繫結

$("#rightRes").append("<li margin-top:3px;margin-left:10px; value="+i+">名稱:" +"<br/>電話:"+"</li>");//動態生成 $('div').chi

Zxing 生成二維碼和條形碼去掉白邊

原始碼下載： 需求：根據輸入內容，生成條形碼或者二維碼。 我們大多數會選擇Zxing。因為jar包較小。且使用簡單。根據內容生成二維碼的工具類也是一搜一大堆。上面的原始碼裡面也提供了一個。但是我們仔細看了下。會發現。不管生成的是條形碼還是二維碼都會有一部分的白邊。如圖

WEB頁面列印條形碼的函式

public string bar_code(object str, int ch, int cw, int type_code){string strTmp=str.ToString();string code=strTmp;strTmp=strTmp.ToLower();

利用JQuery在網頁上列印PDF

專案需求是這樣的，在HTML網頁上點選列印，然後彈出chrome列印視窗，視窗中是後臺生成的PDF檔案。其中PDF檔案是由後臺servlet生成的。 第一種想法是，點選列印時，彈出一個新的視窗 window.open(url,"_blank");//url為

Jquery 生成二維碼圖片 並且區域性列印

一：匯入jquery外掛 <script src="js/jquery.min.js"></script> <script src="js/jquery.qrcode.m

如何生成嵌入網頁直播的HTML代碼

在線直播 視頻播放 播放器 html嵌入網頁直播 800li media server 當今的直播業務發展日新月異的大環境下，若企業、機構、政府、學校官方網站甚至是個人的網站主頁，要是沒有個直播版塊或視頻點播版塊，應該都不好意思說是官網吧。 難為了管理網站的技術人員，購買第三方的直播點播雲

免費生成https證書以及配置

usr 幫我 有效期 note ssl 查詢 att acm sha http升級到https需要在nginx的配置中加入證書信息,查詢資料後確定生成證書兩種方案 第一種:自簽名證書,然後開啟 CloudFlare 的 CDN 服務 //確定是否安裝open

jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持問題的解決

query scroll ani 應該 以及 jquery 方法 jquer ref $("body"）.animate({"scrollTop":top})： 只被chrome支持，而不被Firefox支持 $("html").animate({"scrollTop":t

python3 用requests 保存網頁以及BeautifulSoup保存圖片，並且在本地可以正常顯示文章的內容和圖片

-s bs4 圖片保存 ins date xml解析 站點 mkdir post 用requests 模塊做了個簡單的爬蟲小程序，將博客的一篇文章以及圖片保存到本地，文章格式存為‘.html‘。當文章保存到本地後，圖片的連接可能是目標站點的絕對或者相對路徑，所以要是想在本地

jquery綁定事件以及js綁定事件

以及 捕獲 cancel cti 兼容 alert nts var 什麽 jquery綁定事件: <div id="click1">bind事件</div><!--如果有動態元素，不能觸發--> <div id="click2

js,JQuery 生成二維碼

IT apps http 取值 har char html com url 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

freemark生成靜態網頁亂碼問題

rpath prope spa eem meta code BE 生成 puts 輸出流問題：修改Writer如下： OutputStreamWriter writer = new OutputStreamWriter(new FileOutputStream(dir),

註冊的網頁以及驗證碼的js代碼

背景色 and 點擊 gist lec bubuko margin clas posit 註冊界面實現效果如圖： 自己做的新媒體中心註冊網頁代碼如下： <!DOCTYPE html><html> <head> &l