php CSS 不适用于 DOMPDF

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18008637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-25 16:47:33  来源:igfitidea点击:

CSS not working with DOMPDF

phpcssstylesstylesheetdompdf

提问by Michael

I am using DOMPDF (v 0.5.2) to convert an html page to a pdf file.

我正在使用 DOMPDF (v 0.5.2) 将 html 页面转换为 pdf 文件。

The pdf file appears after the PHP script has run (as expected), but no styles are applied to any of the content. As far as I can find, the float property does not work with DOMPDF, so I have to do some work to get around that, but not even the font styles are being applied.

pdf 文件在 PHP 脚本运行后出现(如预期),但没有样式应用于任何内容。据我所知, float 属性不适用于 DOMPDF,所以我必须做一些工作来解决这个问题,但甚至没有应用字体样式。

I have tried all three methods of including styles: attaching a style sheet,

我已经尝试了所有三种包含样式的方法:附加样式表,

<link href="styles.css" rel="stylesheet" type="text/css">

writing styles in the header,

在标题中书写样式,

<style>...</style>

and inline styles.

和内联样式。

<div class="..." style="...">

The php file to create the pdf looks like this...

用于创建 pdf 的 php 文件如下所示...

<?php 
ob_start(); 
?>
<html>
<head>

<link href="flhaha.css" rel="stylesheet" type="text/css">

</head>

<body>
... content (divs, etc) 
</body>
</html>
<?php 
require_once("../../scripts/dompdf/dompdf_config.inc.php"); 
$dompdf = new DOMPDF(); 
$dompdf->load_html(ob_get_clean()); 
$dompdf->render(); 
$dompdf->stream('test.pdf');
?>

There is an image within the content that loads fine and is displayed properly when the pdf opens, but still no styles.

内容中有一个图像可以正常加载并在 pdf 打开时正确显示,但仍然没有样式。

Thanks in advance!

提前致谢!

Edit #1: The tags above were meant to be "style", not "styles". Have fixed the typo.

编辑#1:上面的标签是“样式”,而不是“样式”。已修正错字。

采纳答案by BrianS

dompdf v0.5.x does not support floats. v0.6.0 does, though it is still an experimental feature that has to be enabled in the configuration. After testing your document I can say that dompdf doesn't handle it very well. If you want to stick with dompdf you might consider tables since your document is somewhat tabular in nature.

dompdf v0.5.x 不支持浮点数。v0.6.0 确实如此,但它仍然是一个必须在配置中启用的实验性功能。在测试您的文档后,我可以说 dompdf 不能很好地处理它。如果您想坚持使用 dompdf,您可以考虑使用表格,因为您的文档本质上有点表格化。

回答by Introvert

Simple solution is, Put your css in separate (.php) or any other server scripting file and include it in your pdf file. eg. You have pdf.blade.php file for pdf

简单的解决方案是,将您的 css 放在单独的 (.php) 或任何其他服务器脚本文件中,并将其包含在您的 pdf 文件中。例如。你有pdf的pdf.blade.php文件

<!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">
    <meta name="description" content="">
    <meta name="author" content="">
    {{-- <link rel="icon" href="/favicon.ico"> --}}

    <title>Starter Template for Bootstrap</title>
<style type="text/css">
@include('pdf.style')
</style>
  </head>
  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->
  </body>
</html>

Suppose you have css file style.css, So next step is to copy your css file content and paste it in new style.blade.php And you almost done!!

假设你有css文件style.css,那么下一步就是复制你的css文件内容并粘贴到新的style.blade.php中,你就快完成了!!

Now include it in your pdf file eg.

现在将其包含在您的 pdf 文件中,例如。

<style>
  @include('style')
</style>    

thats the simple trick worked for me.

这就是对我有用的简单技巧。

回答by web2008

Internal stylesheet can be created by including the styles in between <style>element not <styles>element.

可以通过在<style>元素而不是<styles>元素之间包含样式来创建内部样式表。

below stmt is wrong:

下面的stmt是错误的:

<styles>...</styles>

It should be :

它应该是 :

<style> ... </style>

and inline styles should given as shown below:

和内联样式应如下所示:

<div class="className" style="color:red;text-align: left;">

and external style sheet should be included as shown below:

和外部样式表应包括如下所示:

<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />

If external style sheet is not working then check the source file path.

如果外部样式表不起作用,请检查源文件路径。