使用php或js生成条形码、二维码

最近要开发一个打印物品铭牌标签的页面，从DB里面调出信息，打印出带n个条形码（水平和竖直方向都有）的12*10cm的标签，这种应用以前接触的少，特意研究记录下。

要打印非标准纸张，首先需要在目标打印机上新建纸张类型，规格设置为12*10cm，步骤如下：

设置-设备-打印机和扫描仪-打印服务器属性-创建新纸张规格，新的规格设置完成后设置为默认规格。

可以使用js或者php生成：

1 使用php生成 

首先百度下找到了Download - Barcode Generator by Barcode Bakery  的php版本，支持显示文字信息，设置dpi，设置单个条码宽度，高度，选中角度等，功能很全面了，然而商用却需要购买授权

<?php
require __DIR__ . '/libs/barcodegen.1d-php.v6.0.1/autoload.php';

use BarcodeBakery\Common\BCGColor;
use BarcodeBakery\Common\BCGDrawing;
use BarcodeBakery\Common\BCGFontFile;
use BarcodeBakery\Common\BCGLabel;

$font = new BCGFontFile(__DIR__ . '/libs/barcodegen.1d-php.v6.0.1/font/Arial.ttf', 18);

$text = 'hello';
$dpi = 300;
$file_type = 'PNG';
$code = 'BCGcode128';
$rotate = '270';
$scale = 3;
$thickness = 25;

function convertText($text)
{
    $text = stripslashes($text);
    if (function_exists('mb_convert_encoding')) {
        $text = mb_convert_encoding($text, 'ISO-8859-1', 'UTF-8');
    }
    return $text;
}

$filetypes = array('PNG' => BCGDrawing::IMG_FORMAT_PNG, 'JPEG' => BCGDrawing::IMG_FORMAT_JPEG, 'GIF' => BCGDrawing::IMG_FORMAT_GIF);
$finalClassName = 'BarcodeBakery\\Barcode\\' . $code;

$drawException = null;
try {
    $color_black = new BCGColor(0, 0, 0);
    $color_white = new BCGColor(255, 255, 255);

    $code_generated = new $finalClassName();
    $code_generated->setScale($scale);
    $code_generated->setBackgroundColor($color_white);
    $code_generated->setForegroundColor($color_black);
    $code_generated->setThickness($thickness); // Thickness
    // $code_generated->setFont($font); // Font (or 0)
    $code_generated->setFont(0); // Font (or 0) 值为0-不显示文字信息，只显示条码

    if ($text !== '') {
        $text = convertText($text);
        $code_generated->parse($text);
    }
} catch (Exception $exception) {
    $drawException = $exception;
}

$drawing = new BCGDrawing('', $color_white);
if ($drawException) {
    $drawing->drawException($drawException);
} else {
    $drawing->setBarcode($code_generated);
    $drawing->setRotationAngle($rotate);
    $drawing->setDPI($dpi === 'NULL' ? null : max(72, min(300, intval($dpi))));
    $drawing->draw();
}

switch ($file_type) {
    case 'PNG':
        header('Content-Type: image/png');
        break;
    case 'JPEG':
        header('Content-Type: image/jpeg');
        break;
    case 'GIF':
        header('Content-Type: image/gif');
        break;
}

$drawing->finish($filetypes[$file_type]);

  

 然后偶然发现了以前使用的生成pdf文件的包TCPDF可以生成条形码和二维码，使用也很简单，GitHub - tecnickcom/TCPDF: Official clone of PHP library to generate PDF documents and barcodes

<?php
require './libs/tcpdf/vendor/autoload.php';

//条形码
$barcodeobj = new TCPDFBarcode('hello', 'C128');
echo $barcodeobj->getBarcodeHTML(2, 30, 'black');
// $barcodeobj->getBarcodeSVG(2, 30, 'black');
// $barcodeobj->getBarcodePNG(2, 30, array(0, 0, 0));

?>
<hr>
<?php
//二维码
$barcodeobj = new TCPDF2DBarcode('http://www.tcpdf.org', 'QRCODE,H');
echo $barcodeobj->getBarcodeHTML(6, 6, 'black');
// $barcodeobj->getBarcodePNG(6, 6, array(0, 0, 0));
// $barcodeobj->getBarcodeSVG(6, 6, 'black');

 

 2 使用JS生成

js生成条形码可以使用JsBarcode这个包

<script src="./plugins/JsBarcode-master/dist/JsBarcode.all.min.js"></script>
<img id="barcode2" />
<script>
    JsBarcode("#barcode2", "9780199532179", {
      format: "EAN13",
      displayValue: true,
      fontSize: 10,
      lineColor: "#0cc",
    });
</script>

 js生成二维码可以使用qrcodejs这个包

<script type="text/javascript" src="./plugins/qrcodejs-master/jquery.min.js"></script>
<script type="text/javascript" src="./plugins/qrcodejs-master/qrcode.min.js"></script>
<div id="qrcode" style="width: 100px; height: 100px; margin-top: 15px"></div>

<script type="text/javascript">
  var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 100,
    height: 100,
  });
  qrcode.makeCode("https://www.cnblogs.com/");
</script>

 

 

js打印页面的部分区域

<style>
  @media print {
    @page {
      size: 21cm 29.7cm;
      margin: 0;
      padding: 0;
    }
  }
</style>
<div id="print_area">content</div>
<button onclick="doPrint()">print</button>

<script>
  function doPrint() {
    let body = document.body.innerHTML;
    document.body.innerHTML = document.getElementById("print_area").innerHTML;
    window.print();
    setTimeout(location.reload(), 2000);
  }
</script>

 

使用print.js打印，'pdf', 'html', 'image' and 'json'

<script src="./plugins/print/print.min.js"></script>
<link rel="stylesheet" type="text/css" href="./plugins/print/print.min.css" />

<button type="button" onclick="printJS('./html-demos/files/example_015.pdf')">Print PDF</button>
<hr />

<table id="table">
  <tr>
    <th>col1</th>
    <th>col2</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>
<button type="button" onclick="printJS('table', 'html')">Print Html</button>
<hr />

<button type="button" onclick="printJS({ printable: 'images/1.jpg', type: 'image', header: 'My cool image header' })">Print Img</button>
<hr />

<script>
  let someJSONdata = [
    {
      name: "John Doe",
      email: "john@doe.com",
      phone: "111-111-1111",
    },
    {
      name: "Barry Allen",
      email: "barry@flash.com",
      phone: "222-222-2222",
    },
    {
      name: "Cool Dude",
      email: "cool@dude.com",
      phone: "333-333-3333",
    },
  ];
</script>
<button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">Print JSON Data</button>

 

使用css的media查询设置打印区域

<script src="./plugins/JsBarcode-master/dist/JsBarcode.all.min.js"></script>
<style media="print">
  @page {
    size: 12cm 10cm;
    margin: 0;
    padding: 0;
  }
  /* 打印时不显示 */
  button {
    display: none;
  }
</style>
<div>
  <img id="barcode2" />
  <script>
    JsBarcode("#barcode2", "9780199532179", {
      format: "EAN13",
      displayValue: true,
      fontSize: 10,
      lineColor: "#0cc",
    });
    //使默认水平显示的条形码旋转为竖直显示
    document.getElementById("barcode2").style.transform = "rotate(270deg)";
  </script>
</div>
<button onclick="window.print()">print</button>