angularjs - javascript:window.print() not showing barcode for printing -
i making mean stack app in need print barcode, using angular js directive generating code 128 barcode, , generating well, when click print button (javascript:window.print()) not showing barcode in printing window neither in pdf, here directive,
.directive('barcodegenerator', [function() { var barcode = (function () { var barcode = { settings: { barwidth: 1, barheight: 50, modulesize: 5, showhri: false, addquietzone: true, marginhri: 5, bgcolor: "#ffffff", color: "#000000", fontsize: 10, posx: 0, posy: 0 }, intval: function(val) { var type = typeof(val); if ( type == 'string' ) { val = val.replace(/[^0-9-.]/g, ""); val = parseint(val * 1, 10); return isnan(val) || !isfinite(val)? 0: val; } return type == 'number' && isfinite(val)? math.floor(val): 0; }, code128: { encoding:[ "11011001100", "11001101100", "11001100110", "10010011000", "10010001100", "10001001100", "10011001000", "10011000100", "10001100100", "11001001000", "11001000100", "11000100100", "10110011100", "10011011100", "10011001110", "10111001100", "10011101100", "10011100110", "11001110010", "11001011100", "11001001110", "11011100100", "11001110100", "11101101110", "11101001100", "11100101100", "11100100110", "11101100100", "11100110100", "11100110010", "11011011000", "11011000110", "11000110110", "10100011000", "10001011000", "10001000110", "10110001000", "10001101000", "10001100010", "11010001000", "11000101000", "11000100010", "10110111000", "10110001110", "10001101110", "10111011000", "10111000110", "10001110110", "11101110110", "11010001110", "11000101110", "11011101000", "11011100010", "11011101110", "11101011000", "11101000110", "11100010110", "11101101000", "11101100010", "11100011010", "11101111010", "11001000010", "11110001010", "10100110000", "10100001100", "10010110000", "10010000110", "10000101100", "10000100110", "10110010000", "10110000100", "10011010000", "10011000010", "10000110100", "10000110010", "11000010010", "11001010000", "11110111010", "11000010100", "10001111010", "10100111100", "10010111100", "10010011110", "10111100100", "10011110100", "10011110010", "11110100100", "11110010100", "11110010010", "11011011110", "11011110110", "11110110110", "10101111000", "10100011110", "10001011110", "10111101000", "10111100010", "11110101000", "11110100010", "10111011110", "10111101110", "11101011110", "11110101110", "11010000100", "11010010000", "11010011100", "11000111010" ], getdigit: function(code) { var tableb = " !\"#$%&'()*+,-./0123456789:;<=>?@abcdefghijklmnopqrstuvwxyz[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~"; var result = ""; var sum = 0; var isum = 0; var = 0; var j = 0; var value = 0; // check each characters for(i=0; i<code.length; i++){ if (tableb.indexof(code.charat(i)) == -1){ return(""); } } // check firsts characters : start c table if enought numeric var tablecactivated = code.length > 1; var c = ''; (i=0; i<3 && i<code.length; i++) { c = code.charat(i); tablecactivated &= c >= '0' && c <= '9'; } sum = tablecactivated ? 105 : 104; // start : [105] : c table or [104] : b table result = this.encoding[ sum ]; = 0; while ( < code.length ) { if ( !tablecactivated) { j = 0; // check next character activate c table if interresting while ( (i + j < code.length) && (code.charat(i+j) >= '0') && (code.charat(i+j) <= '9') ) { j++; } // 6 min everywhere or 4 mini @ end tablecactivated = (j > 5) || ((i + j - 1 == code.length) && (j > 3)); if ( tablecactivated ){ result += this.encoding[ 99 ]; // c table sum += ++isum * 99; } // 2 min table c need table b } else if ( (i == code.length) || (code.charat(i) < '0') || (code.charat(i) > '9') || (code.charat(i+1) < '0') || (code.charat(i+1) > '9') ) { tablecactivated = false; result += this.encoding[ 100 ]; // b table sum += ++isum * 100; } if ( tablecactivated ) { value = barcode.intval(code.charat(i) + code.charat(i+1)); // add 2 characters (numeric) += 2; } else { value = tableb.indexof( code.charat(i) ); // add 1 character += 1; } result += this.encoding[ value ]; sum += ++isum * value; } result += this.encoding[sum % 103];// add crc result += this.encoding[106];// stop result += "11";// termination bar return(result); } }, bitstringto2darray: function( digit) {//convert bit string array of array of bit char var d = []; d[0] = []; ( var i=0; i<digit.length; i++) { d[0][i] = digit.charat(i); } return(d); }, digittocssrenderer: function( $container, settings, digit, hri, mw, mh, type) {// css barcode renderer var lines = digit.length; var columns = digit[0].length; var content = ""; var len, current; var bar0 = "<div class='w w%s' ></div>"; var bar1 = "<div class='b b%s' ></div>"; ( var y=0, x; y<lines; y++) { len = 0; current = digit[y][0]; ( x=0; x<columns; x++){ if ( current == digit[y][x] ) { len++; } else { content += (current == '0'? bar0: bar1).replace("%s", len * mw); current = digit[y][x]; len=1; } } if ( len > 0) { content += (current == '0'? bar0: bar1).replace("%s", len * mw); } } if ( settings.showhri) { content += "<div style=\"clear:both; width: 100%; background-color: " + settings.bgcolor + "; color: " + settings.color + "; text-align: center; font-size: " + settings.fontsize + "px; margin-top: " + settings.marginhri + "px;\">"+hri+"</div>"; } var div = document.createelement('div'); div.innerhtml = content; div.classname = 'barcode '+ type +' clearfix-child'; return div; }, digittocss: function($container, settings, digit, hri, type) {// css 1d barcode renderer var w = barcode.intval(settings.barwidth); var h = barcode.intval(settings.barheight); return this.digittocssrenderer($container, settings, this.bitstringto2darray(digit), hri, w, h, type); } }; var generate = function(datas, type, settings) { var digit = "", hri = "", code = "", crc = true, rect = false, b2d = false ; if ( typeof(datas) == "string") { code = datas; } else if (typeof(datas) == "object") { code = typeof(datas.code) == "string" ? datas.code : ""; crc = typeof(datas.crc) != "undefined" ? datas.crc : true; rect = typeof(datas.rect) != "undefined" ? datas.rect : false; } if (code == "") { return(false); } if (typeof(settings) == "undefined") { settings = []; } for( var name in barcode.settings) { if ( settings[name] == undefined) { settings[name] = barcode.settings[name]; } } switch (type) { case "std25": case "int25": { digit = barcode.i25.getdigit(code, crc, type); hri = barcode.i25.compute(code, crc, type); break; } case "ean8": case "ean13": { digit = barcode.ean.getdigit(code, type); hri = barcode.ean.compute(code, type); break; } case "upc": { digit = barcode.upc.getdigit(code); hri = barcode.upc.compute(code); break; } case "code11": { digit = barcode.code11.getdigit(code); hri = code; break; } case "code39": { digit = barcode.code39.getdigit(code); hri = code; break; } case "code93": { digit = barcode.code93.getdigit(code, crc); hri = code; break; } case "code128": { digit = barcode.code128.getdigit(code); hri = code; break; } case "codabar": { digit = barcode.codabar.getdigit(code); hri = code; break; } case "msi": { digit = barcode.msi.getdigit(code, crc); hri = barcode.msi.compute(code, crc); break; } case "datamatrix": { digit = barcode.datamatrix.getdigit(code, rect); hri = code; b2d = true; break; } } if ( digit.length == 0) { return this; } if ( !b2d && settings.addquietzone) { digit = "0000000000" + digit + "0000000000"; } var fname = 'digittocss' + (b2d ? '2d' : ''); return barcode[fname](this, settings, digit, hri, type); }; return generate; }()); return { link: function(scope, element, attrs) { attrs.$observe('barcodegenerator', function(value){ var code = barcode(value, "code128",{barwidth:2}), code_wrapper = angular.element("<div class='barcode code128'></div>") code_wrapper.append(code); angular.element(element).html('').append(code_wrapper); }); } } and here barcode generating code,
<div ng-model='myinput' barcode-generator="{{myinput}}" style="height:208px;"> </div> here screenshots it shows barcode on page
it's because browsers has turned off rendering background-color in print mode default. won't force users mess browser settings, can replace background-color border-width this:
<style type="text/css" media="print"> .barcode.code128 > div.b { border-style: solid !important; border-color: #000000 !important; } .barcode.code128 .b1 { width: 0px !important; border-width: 0px 0px 0px 1px !important; } .barcode.code128 .b2 { width: 0px !important; border-width: 0px 0px 0px 2px !important; } .barcode.code128 .b3 { width: 0px !important; border-width: 0px 0px 0px 3px !important; } .barcode.code128 .b4 { width: 0px !important; border-width: 0px 0px 0px 4px !important; } .barcode.code128 .b5 { width: 0px !important; border-width: 0px 0px 0px 5px !important; } .barcode.code128 .b6 { width: 0px !important; border-width: 0px 0px 0px 6px !important; } .barcode.code128 .b7 { width: 0px !important; border-width: 0px 0px 0px 7px !important; } .barcode.code128 .b8 { width: 0px !important; border-width: 0px 0px 0px 8px !important; } .barcode.code128 .b9 { width: 0px !important; border-width: 0px 0px 0px 9px !important; } .barcode.code128 .b10 { width: 0px !important; border-width: 0px 0px 0px 10px !important; }
Comments
Post a Comment