Question

我使用Dompdf将HTML页面导出为PDF。我正在使用HTML文件本身中显示的一些Font Awesome图标，但在生成的PDF中，有问号而不是图标。

以下是HTML代码的一部分：

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Some title</title>
    <!-- Latest compiled and minified CSS - Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">        
<link href="http://domain.com/public/assets/css/font-awesome-4.6.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>
<!-- -->

<div id="wrapper" >        <div id="page-wrapper">        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-10 col-xs-offset-1">
                    <div class="panel panel-default panel-table">
                        <div class="panel-heading">
    <div class="row">
        <div class="col-xs-12">
            <div class="bs-callout bs-callout-primary">
                <h4>Contact name</h4>
                <ul>
                    <li><span class="fa fa-envelope"></span> <strong>Email</strong>: some@mail.com</li>
                    <li><span class="fa fa-phone"></span> <strong>Telephone</strong>: 0000-0000</li>
                    <li><span class="fa fa-location-arrow"></span> <strong>Location</strong>: Address</li>
                </ul>
            </div>
        </div>
            </div>
</div>
<div class="panel-body">

<!-- A table goes here -->


    </div>                                                                                                </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- .wrapper -->


</body>
</html>

这些图标不会显示，只会在PDF中显示问号：

<li><span class="fa fa-envelope"></span> <strong>Email</strong>: some@mail.com</li>
                    <li><span class="fa fa-phone"></span> <strong>Telephone</strong>: 0000-0000</li>
                    <li><span class="fa fa-location-arrow"></span> <strong>Location</strong>: Address</li>

我该如何解决这个问题？

Answer 1

Dompdf无法正确解析FontAwesome样式表，导致它无法正确读取字体系列（为什么不post a bug report？）。

现在可以通过在包含FontAwesome样式表后重新定义fa类来解决此问题。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  <style type="text/css">
  .fa {
    display: inline;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 1;
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  </style>
</head>
<body>
  <p><span class="fa fa-envelope"></span> envelope</p>
</body>
</html>

如果您将此样式与官方样式进行比较，您会注意到我更改了显示类型。直到并包括dompdf 0.7.0自动计算的宽度不受支持，并且任何块元素（块，内联块）都被赋予其容器的100％宽度。我改变了显示样式，但你可以给它一个固定的宽度，例如width: 1.25em;。我还没有做足够的测试，知道哪一个导致最少的不利影响。

Answer 2

我已经弄清楚并得出结论。这是一行语句，您可以使用它来显示dompdf中的字体真棒图标。

protected function validator(array $data){ $messages = array('email.regex' => 'Your email id is not valid.'); return Validator::make($data, [ 'name' => 'required|max:255', 'email' => 'required|email|max:255|unique:users|regex:/(.*)\.myemail\.com$/i', 'password' => 'required|min:6|confirmed', /*'usertype' => 'required',*/ ], $messages);}

Answer 3

我使用puppeteer进行html到pdf的转换。我也遇到过同样的问题，即字体图标无法上传到pdf。因此，当我使用slowMo：时，它就像一种魅力！

const browser = await htmltopdf.launch({headless: true, slowMo: 150});

使用Dompdf将HTML导出为PDF时，不会显示字体真棒图标

3 个答案: