我的 HTML 包含基于 Google Font Libre Barcode 128 Text 的条形码。 当我打开 HTML 时,它看起来很棒。 但是,当尝试使用无头镶边或边缘打印到 PDF 时,它会丢弃条形码并仅打印数字。我已在运行该字体的计算机上本地安装了该字体,但这并没有解决问题。 我见过一个解决方案,您需要将字体嵌入到 PDF 中,但我找不到任何关于如何以编程方式执行此操作的注释。 我实际上没有任何代码要包含,但我已经尝试过 Headless Chrome 和 Edge 的 CLI 命令以及 HTMLDOC:
htmldoc C:\Users\Me\Desktop\ASN_Label_Carton.html -f C:\Users\Me\Desktop\ASN_Label_Carton.pdf -t pdf --webpage
要在 Windows 中通过命令行将 HTML 转换为 PDF,您只需调用 MSEdge.lnk --headless。
所以这部分很简单。我们也可以使用浏览器来测试结果。
msedge.lnk --headless --print-to-pdf="%cd%\Code128.pdf" "%cd%\code128.html"
现在如何做到这一点并不那么容易,因为它需要通过 Google Fonts 及其编码器/解码器模块进行编码和解码。让我们从示例页面开始,您可以将正文缩减为单行。
<div class="code128-encoder_display">ÌstackoverflowcÎ</div>
。关键点是 Ì
之前和文本 cÎ
之后的代码是编码的独特部分。每个文本的它们可能并不总是相似。
<!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>
拼图还有 2 个部分,这是您需要的:
script src="code128encoder.mjs"
又需要 encoder.mjs
两者都包含在来自 https://github.com/graphicore/librebarcode/releases 的最新源代码 .zip 中向下钻取并从此处复制出版本 1.008