NReco 图像生成器无法正确写入条形码答案

【问题标题】：NReco imagegenerator doesn't write barcodes correctlyNReco 图像生成器无法正确写入条形码
【发布时间】：2018-04-05 07:23:42
【问题描述】：

我正在尝试将 HTML 代码转换为 JPEG 图像。它有点工作，但当我尝试使用条形码时它就不行了。

服务器端，我正在使用：

我正在使用 CODE128 协议对 EAN133 条形码进行编码，当我想在网页上显示它时它可以工作（我使用 HttpUtility.HtmlEncode(code_barre)，因此条形码可以很好地解释），然后我使用条形码字体显示条形码，这就是我的图像有问题的地方：

如您所见，它是格式良好的条形码“纯文本”，并带有以下 CSS：

@font-face { font-family: 'code_128regular'; src: url('/Assets/Fonts/code128-webfont.eot'); src: url('/Assets/Fonts/code128-webfont.eot?#iefix') format('embedded-opentype'), url('/Assets/Fonts/code128-webfont.woff2') format('woff2'), url('code128-webfont.woff') format('woff'), url('/Assets/Fonts/code128-webfont.ttf') format('truetype'), url('/Assets/Fonts/code128-webfont.svg#code_128regular') format('svg'); font-weight: normal; font-style: normal;} .test{font-family:'code_128regular'; font-size:70px;}

我应该变成这样：

但它没有，即使我使用相对路径导入 Bootstrap CSS，而当我尝试使用 IronPDF 生成 PDF 时它可以工作

感谢关注

编辑：这是生成的 HTML：

<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <link rel='stylesheet' type='text/css' href='Assets/Bootstrap/css/bootstrap.min.css'>
    <script type='text/javascript' src='Assets/Bootstrap/js/bootstrap.min.js'></script>
</head>
<style>
    @font-face {
        font-family: 'code_128regular';
        src: url('/Assets/Fonts/code128-webfont.eot');
        src: url('/Assets/Fonts/code128-webfont.eot?#iefix') format('embedded-opentype'), url('/Assets/Fonts/code128-webfont.woff2') format('woff2'), url('code128-webfont.woff') format('woff'), url('/Assets/Fonts/code128-webfont.ttf') format('truetype'), url('/Assets/Fonts/code128-webfont.svg#code_128regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    .test {
        font-family: 'code_128regular';
        font-size: 70px;
    }
</style>
<center><p class='test'>&#204;MXCUTGRIP305-07D&#206;</p><p>MXCUTGRIP305-07</p></center>
</html>

【问题讨论】：

生成的html是什么样子的？
我会编辑给你看，但是阅读起来有点困难，因为它是在服务器端生成的
您的代码在我尝试时有效。您能否检查扩展名.eot、.woff 和.woff2 是否允许在 IIS 中使用 mime 类型？如果不是，文件将不会提供给浏览器，您将看到 404。
如何检查？（顺便说一句，我在本地运行它）
start > run > inetmgr.exe，在sites 中访问您的网站并找到MIME-types，它们应该列在那里才能正常工作。

标签： html css asp.net twitter-bootstrap nreco

【解决方案1】：

NReco ImageGenerator 在内部使用 wkhtmltoimage 命令行工具，因此实际上您可以期待相同的行为。在您的情况下，wkhtmltoimage 似乎出于某种原因忽略了您的自定义字体；首先尝试使用 woff、woff2 或 ttf 字体文件而不是 eot。如果您使用接受 HTML 作为 .NET 字符串的“GenerateImage”方法，所有外部引用都应该是绝对的。

以下 HTML 模板对我来说很好用（我使用了来自 google 字体的“Libre Barcode 128”）：

<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Barcode+128&amp;lang=en" />  
</head>
<style>
    .test {
        font-family: 'Libre Barcode 128';
        font-size: 70px;
    }
</style>
<center><p class='test'>&#204;MXCUTGRIP305-07D&#206;</p><p>MXCUTGRIP305-07</p></center>
</html>

【讨论】：

这不是我想要的，因为它使用外部资源，但它有效，所以我将其标记为解决方案
@alexay68 只需打开 google fonts url (fonts.googleapis.com/…)，您会发现这是通常的“font-face”定义（在本例中为 woff2）。本地文件也应该可以正常工作。
我看到了...也许我的字体在本地没有被 NReco 识别，因为他找不到它们（例如缺少一些服务器映射属性），但不用担心，只要它有效，如果我没有掌握我所有的资源也没关系（那是谷歌字体，明天不会移动）