相应的文件大家去github上下载吧

https://github.com/lindell/JsBarcode

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8" />

  <title>条形码</title>

  <script type="text/javascript" src="./jquery-3.4.1.min.js"></script>

  <script type="text/javascript" src="./JsBarcode.all.js"></script>

  <style>

      body {

          margin: 0;

          padding: 0;

      }

      #pagination {

         width: 1190px;

         height: auto;

         position: relative;

         margin: 0 auto;

         padding: 0;

      }

      svg {

         margin-right: 12px;

      }

  </style>

 </head>

 <body>

 <div id="pagination">

  <!--可以选择的三种方式，大家可以试试-->

  <!--<svg id="svg"> </svg>-->

  <!--<canvas id="canvas"></canvas>-->

  <!--<img src="" alt="" id="img">-->

 </div>

  <script>

      function addZero(num, length) {

            return (Array(length).join('0') + num).slice(-length);

      }

       function addSvg(j) {

          let newSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

          newSvg.setAttribute("id", `S${j}`);

          newSvg.style["display"] = "inline-block" ;

          document.getElementById("pagination").appendChild(newSvg);

      }

      function toBarcode(ID, name) {

          JsBarcode(ID, name, {

          format: "CODE128",//选择要使用的条形码类型

          width: 2,//设置条之间的宽度

          height:40,//高度

          displayValue:true,//是否在条形码下方显示文字

          font:"Arial",//设置文本的字体

          textAlign:"center",//设置文本的水平对齐方式

          textPosition:"bottom",//设置文本的垂直位置

          textMargin:5,//设置条形码和文本之间的间距

          fontSize:15,//设置文本的大小

          background: "white",//设置条形码的背景

          lineColor: "black",//设置条和文本的颜色。

          margin:15//设置条形码周围的空白边距

        });

      }

       function addLength() {

          let obj = document.getElementsByTagName("text");

          for (let i = 0; i < obj.length; i++) {

                obj[i].setAttribute("textLength", "100px");

            }

       }

      for (let j = 1; j < 1001; j++) {

          for (let k = 1; k < 4; k++) {

              let numStr = "XXXXXX" + addZero(j, 4);

              addSvg(numStr);

              let ID = `#S${numStr}`;

              toBarcode(ID, numStr);

          }

      }

     addLength()

  </script>

 </body>

</html>

最后通过谷歌浏览器的打印功能打印成pdf 进行打印。

参数选择

js 打印条形码的更多相关文章

  1. js 打印

    关于js打印很简单的一段代码 function doPrint() { var newWindow = window.open("打印窗口", "_blank" ...

  2. js打印html中的内容

    js打印方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. js打印Iframe中的内容，并且不需要预览。

    js打印Iframe中的内容,并且不需要预览 js代码如下: <script type="text/javascript" language="Javascript ...

  4. js打印

    js打印,其实是打印当前页面的内容,是调用 系统的js方法,来弹出 打印设置窗口,用法很简单. window.print()就行,有的考虑到 浏览器兼容性问题,会用到document.execComm ...

  5. js打印保存用户输入的内容

    在用js打印局部页面时,遇到用户新输入的内容没能打印出来,经过观察,发现我采用的js打印方法是读取页面源代码,而用户输入的内容如果不将其写入到页面源代码中去,是打印不出来的,下面是我的解决方法: // ...

  6. 使用jquery.PrintArea.js打印网页的样式问题

    在使用jquery.PrintArea.js打印局部网页样式的时候,发现样式打印不出来,在网上找了好多资料,整理一下分享给大家 一.先看看css的引用文件方式 1.直接在内部的元素中使用”style” ...

  7. js打印页面指定区域，并去掉页眉上的时间和请求路径

    需要通过js打印指定页面的内容 <style media=print type="text/css"> .noprint{visibility:hidden} < ...

  8. 利用JS打印质数

    我爱撸码,撸码使我感到快乐!大家好,我是Counter,今天非常愉快,没有前几天的相对比较复杂的逻辑思维在里面,今天来写写,利用JS打印质数,基本上很多面试,会很经常的考到.那废话不多说,直接上代码: ...

  9. js生成条形码插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Echo团队Alpha冲刺随笔 - 第八天

    项目冲刺情况 进展 程序基本完成,根据实际,添加完善新接口 问题 根据功能对接出现的问题继续进行改进 心得 放假了放松下 今日会议内容 黄少勇 今日进展 测试小程序,添加异常和错误操作的处理 存在问题 ...

  2. Hive 内置函数

    原文见:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+UDF 1.内置运算符1.1关系运算符 运算符 类型 说明 A ...

  3. 【转】.NET Core 事件总线,分布式事务解决方案：CAP

    [转].NET Core 事件总线,分布式事务解决方案:CAP 背景 相信前面几篇关于微服务的文章也介绍了那么多了,在构建微服务的过程中确实需要这么一个东西,即便不是在构建微服务,那么在构建分布式应用 ...

  4. Learning Vector Quantization

    学习矢量量化. k近邻的缺点是你需要维持整个数据集的训练. 学习矢量量化算法(简称LVQ)是一种人工神经网络算法,它允许你选择要挂在多少个训练实例上,并精确地了解这些实例应该是什么样子. LVQ的表示 ...

  5. elasticsearch安装和部署

    1.可以在官网上下载不同版本的es,官网地址为:https://www.elastic.co/cn/downloads/past-releases#elasticsearch 2.解压elastics ...

  6. C# 监控网速

    主要有两个类,其一是NetworkAdapter,该类的作用是获取本机网络适配器列表,并且可以通过该类的属性获取当前网速数据:其二是NetworkMonitor,该类是通过.NET的Performan ...

  7. Android入门教程（五）

    关注我,每天都有优质技术文章推送,工作,学习累了的时候放松一下自己. 欢迎大家关注我的微信公众号:「醉翁猫咪」 字面量: 1.整数字面量为整型(int) 2.小数字面量为双精度浮点型(double) ...

  8. shell脚本编程基础知识点

    整数比较: -eq:测试两个整数是否相等:相等为真,不等为假 -ne:测试两个整数是否不等:不等为真,相等为假 -gt:测试一个数是否大于另一个数:大于为真,否则为假 -lt:测试一个数是否小于另一个 ...

  9. 使用JS计算前一天和后一天

    使用JS实现前一天和后一天 首先,我们先在html中写两个按钮来进行简单操作 <button onclick="Before()">前一天</button> ...

  10. 让你的shell更体贴

    使用shell的时候很多,特别是拉幕式终端,使用时更加方便,同时可以利用 echo "Did you know that:" ;whatis $(ls /bin | shuf -n ...