Question

我有一个应用程序，使用每列的图像（ p.png ）打印条形码，并且间距（b.png）的条形码打印如下：

<img src="imagens/p.png" width="1" height="50" border="0">
<img src="imagens/b.png" width="1" height="50" border="0">
<img src="imagens/p.png" width="1" height="50" border="0">
<img src="imagens/b.png" width="2" height="50" border="0">
<img src="imagens/p.png" width="2" height="50" border="0">
[...]

我没有使用任何css来更改@media print中的img。

问题是：Chrome不会打印一些imgs（p.png）。

1。原始条形码

WSAIoctl

2。在Chrome中打印

第3。在Firefox中打印

Answer 1

替代解决方案：使用javascript画布解决此问题。

我在codePen中创建了一个代码，用于所有浏览器：

https://codepen.io/eltonsrc/pen/OpXyrQ

<强> HTML ：

<div style="width: 600px">
  <canvas id="barcode" class="barcode">
    Code for browsers without canvas support. For example:
    <img src="blackBar.gif" width="1" height="50">
    <img src="whiteBar.gif" width="1" height="50">
  </canvas>
</div>

<强> CSS ：

.barcode {
  width: 100%;
  height: 50px;
}

<强>的Javascript ：

var barCode = (function (){
  this.WHITE = 'rgb(255, 255, 255)';
  this.BLACK = 'rgb(0, 0, 0)';
  this.THIN_BAR = 1;
  this.THICK_BAR = 3;

  this.lastPixel = 0;

  this.drawBar = function (barWidth, color) {
    this.ctx.fillStyle = color;
    this.ctx.fillRect(this.lastPixel, 0, barWidth, this.canvas.height);
    this.lastPixel += barWidth;
  };

  this.draw2of5BarCode = function (barcodeNumber) {
    var barCodes = ['00110', '10001', '01001', '11000', '00101', '10100', '01100', '00011', '10010', '01010'];

    for (var f1 = 9; f1 >= 0; f1--) {
      for (var f2 = 9; f2 >= 0; f2--) {
        var f = f1 * 10 + f2;
        var texto = '';
        for (var i = 0; i < 5; i++) {
          texto += barCodes[f1].substr(i, 1) + barCodes[f2].substr(i, 1);
        }
        barCodes[f] = texto;
      }
    }

    // begin of barcode
    this.drawBar(this.THIN_BAR, this.BLACK);
    this.drawBar(this.THIN_BAR, this.WHITE);
    this.drawBar(this.THIN_BAR, this.BLACK);
    this.drawBar(this.THIN_BAR, this.WHITE);

    if (barcodeNumber.length % 2 != 0) {
      barcodeNumber = '0' + barcodeNumber;
    }

    do {
      var i = Number(barcodeNumber.substr(0, 2));
      if (barcodeNumber.length == 2) {
        barcodeNumber = '';
      } else {
        barcodeNumber = barcodeNumber.substr(2, barcodeNumber.length - 2);
      }

      var f = barCodes[i];

      for (i = 0; i < 10; i += 2) {
        if (f.substr(i, 1) == '0') {
          this.drawBar(this.THIN_BAR, this.BLACK);
        } else {
          this.drawBar(this.THICK_BAR, this.BLACK);
        }

        if (f.substr(i + 1, 1) == '0') {
          this.drawBar(this.THIN_BAR, this.WHITE);
        } else {
          this.drawBar(this.THICK_BAR, this.WHITE);
        }
      }
    } while(barcodeNumber.length > 0);

    this.drawBar(this.THICK_BAR, this.BLACK);
    this.drawBar(this.THIN_BAR, this.WHITE);
    this.drawBar(this.THIN_BAR, this.BLACK);
  }

  this.drawBarcode = function (canvasId, barcodeNumber) {
    this.canvas = document.getElementById(canvasId);

    // verify canvas support
    if (!this.canvas.getContext) {
      return;
    }

    this.lastPixel = 0;
    this.ctx = this.canvas.getContext('2d');
    this.draw2of5BarCode(barcodeNumber);
  };

  return this;
})();

barCode.drawBarcode('barcode', '856000000005227702201707619934651263800000000003');

Answer 2

替代解决方案：使用SVG生成条形码！

我找到了一个库，可以创建没有错误的“ITF”条形码：https://github.com/kreativekorp/barcode

include 'barcode.php';

$generator = new barcode_generator();

/* Generate SVG markup. */
$symbology = 'itf';
$data = '23790198019000000053081017674607670300000001000';
$options['w'] = '50';
$options['p'] = '2';
$svg = $generator->render_svg($symbology, $data, $options);
echo $svg;

非常感谢@kreativekorp这个非常棒的php库。

使用谷歌浏览器在媒体打印中不显示图像

2 个答案: