barcodegoogle-chrome-headlesshtml-to-pdf

CLI Print Google Barcode Font to PDF

I have HTML that includes a barcode based on Google Font Libre Barcode 128 Text. When I open the HTML it looks great. However, when attempting to use headless chrome or edge to print to PDF it drops the barcode and only prints the numbers. I've installed that font locally on the machine this runs on, but that didn't fix it. I've seen a solution where you need to embed the font into the PDF, but I cannot find any notes on how to do that programmatically. I dont really have any code to include, but I've tried the CLI commands for Headless Chrome and Edge, as well as HTMLDOC:

htmldoc C:\Users\Me\Desktop\ASN_Label_Carton.html -f C:\Users\Me\Desktop\ASN_Label_Carton.pdf -t pdf --webpage

Solution

  • To command line convert HTML to PDF in Windows you simply call MSEdge.lnk --headless.

    So that part is easy. we can also use the browser to test the result.

    msedge.lnk --headless --print-to-pdf="%cd%\Code128.pdf" "%cd%\code128.html"

    enter image description here

    Now how to make that work is not so easy, as it needs encoding and decoding via Google Fonts and their encoder/decoder module. Let us start with that sample page where you can cut the body down to just the single line. <div class="code128-encoder_display">ÌstackoverflowcÎ</div>. The key point is the code just before Ì and after the text cÎ, are uniquely part of the coding. They may not always be similar for each text.

    <!DOCTYPE html>
<html lang="en">
  <head>  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Libre Barcode Code 128</title>
  <script src="code128encoder.mjs" type="module"></script>
  <link rel="preconnect" href="https://fonts.gstatic.com">
<style>
html { font-family: sans-serif; font-size: 12px; }
body { max-width: 35em; margin: 0 auto; padding: 1.5em; min-height: 100%; }
.code128-encoder_display { font-family: 'Libre Barcode 128 Text', cursive; font-size: 4em; text-align: center;  white-space: pre; }
.code128-encoder_output { display: block; margin: .5em auto; width: 90%; font-family: monospace; }
</style>
  </head>
  <body>
    <h1 id="code-128">Code 128 Sample</h1>
    <p>To use these fonts you have to use an encoder. It is an optimizing encoder, that means, it produces the shortest barcode that
    can encode the input. For this the encoder, if necessary or shorter, switches between the three available Code Sets (list from Wikipedia):</p>
    <ul>
      <li>128A <strong>Code Set A</strong> – ASCII characters 00 to 95 (0–9, A–Z and control codes), special characters, and FNC 1–4</li>
      <li>128B <strong>Code Set B</strong> – ASCII characters 32 to 127 (0–9, A–Z, a–z), special characters, and FNC 1–4</li>
      <li>128C <strong>Code Set C</strong> – 00–99 (encodes two digits with a single code point) and FNC1</li>
    </ul>
    <p>The other task of the encoder is to calculate the checksum symbol, that must be included before the stop symbol.</p>
    <p>See the <a href="https://en.wikipedia.org/wiki/Code_128">Wikipedia Code 128 page</a> for more detailed info.</p>
    <h2 id="code-128-encoder"><a name="code128encoder">Code 128 Encoder Samples</a></h2>
    <p>If it can be encoded corectly with Code 128 you will see a scannable barcode,
rendered with the <strong>Libre Barcode 128 Text</strong> font.</p>

  <div class="code128-encoder_display">ÌstackoverflowcÎ</div>

  <footer>
   <hr />
    <p>For questions or bug reports please use the <a href="https://github.com/graphicore/librebarcode/issues">issue tracker</a>.</p>
    <p><a title="Atem-Project on GitHub" class="connect github" target="_blank" href="https://github.com/graphicore/librebarcode">Libre Barcode on GitHub</a> The Libre Barcode fonts can be downloaded on the <a href="https://github.com/graphicore/librebarcode/releases">releases page</a> or are available via <a href="https://fonts.google.com/?query=Libre+Barcode">Google Fonts</a>.</p>
  </footer>
 </body>
</html>

    There are 2 more parts to the puzzle and that is you need:
    script src="code128encoder.mjs" which in turn needs encoder.mjs

    Both are in the latest source code .zip from https://github.com/graphicore/librebarcode/releases drill down and copy out from here version 1.008

    1. librebarcode-1.###\app\lib\code128Encoder\encoder.mjs
    2. librebarcode-1.###\web_assets\js\code128encoder.mjs

    and place in the current work folder. enter image description here

    NOTE you need to edit second line in code128encoder.mjs from
    import encode from '../../app/lib/code128Encoder/encoder.mjs'; to
    import encode from 'encoder.mjs';

    So that covers the answer to how to convert HTML to PDF with Google Code128 fonts. The more complex part is those three little letters and how to calculate (which was done in the online sampler) or I show using other tools in https://stackoverflow.com/a/77070735/10802527.

    Answer use the Online encoder for small quantities https://graphicore.github.io/librebarcode/