相应的文件大家去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. 项目Beta冲刺 - 凡事预则立

    课程: 软件工程1916|W(福州大学) 作业要求: 项目Beta冲刺 团队名称: 火鸡堂 作业目标: 尽力交付 火鸡堂 队员学号 队员姓名 博客地址 备注 221600111 彼术向 http:// ...

  2. C++中优先队列的使用

    既然是队列那么先要包含头文件#include <queue> 优先队列具有队列的所有特性,包括基本操作,只是在这基础上添加了内部的一个排序,它本质是一个堆实现的 .定义:priority_ ...

  3. django-列表分页和排序

    视图函数views.py # 种类id 页码 排序方式 # restful api -> 请求一种资源 # /list?type_id=种类id&page=页码&sort=排序方 ...

  4. Python萌新笔记

    Mychael上了大学,对Python产生了浓厚的兴趣,便开始了Python的学习 学习的时候,感觉Python确实比以往学的C++表达简洁很多,而又不失强大 以后的学习笔记就记在这啦 变量 Pyth ...

  5. LeetCode 1130. Minimum Cost Tree From Leaf Values

    原题链接在这里:https://leetcode.com/problems/minimum-cost-tree-from-leaf-values/ 题目: Given an array arr of ...

  6. 简易配置中心Confd入手

    改成动态更新配置文件,如下每五秒重新生成配置文件 confd与etcd的使用 Add keys This guide assumes you have a working etcd, or consu ...

  7. 洛谷 P3388 【模板】割点（割顶）题解

    今天学了割点,就A了这道板子,比较难理解的地方就在于如果是根节点就要找两个点来满足low[y]>=dfn[x],如果不是就只需找一个点来满足.Tarjan(i,i)中第一个i是开始搜索的点而第 ...

  8. Android入门教程（五）

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

  9. select count(1)和 select count(*)

    ),其实就是计算一共有多少符合条件的行. 1并不是表示第一个字段,而是表示一个固定值. 其实就可以想成表中有这么一个字段,这个字段就是固定值1,),就是计算一共有多少个1. 同理,),也可以,得到的值 ...

  10. inotify 监控文件系统操作

    path0=path1=########################################################dir2watch1=/home/nanjing2/GridON ...