CSS не работает с DOMPDF
Я использую DOMPDF (v 0.5.2) для преобразования html-страницы в pdf-файл.
Файл pdf появляется после запуска PHP-скрипта (как и ожидалось), но ни к одному содержимому не применяются стили. Насколько я могу судить, свойство float не работает с DOMPDF, поэтому мне нужно проделать некоторую работу, чтобы обойти это, но даже стили шрифтов не применяются.
Я испробовал все три метода включения стилей: прикрепление таблицы стилей,
<link href="styles.css" rel="stylesheet" type="text/css">
Стили письма в заголовок,
<style>...</style>
И встроенные стили.
<div class="..." style="...">
php-файл для создания pdf выглядит следующим образом...
<?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');
?>
В содержимом есть изображение, которое загружается нормально и отображается правильно при открытии pdf-файла, но по-прежнему без стилей.
Заранее спасибо!
Правка № 1: Теги выше должны были быть "стиль", а не "стили". Исправили опечатку.
3 answers
Dompdf v0.5.x не поддерживает поплавки. v0.6.0 делает, хотя это все еще экспериментальная функция, которую необходимо включить в конфигурации. После тестирования вашего документа я могу сказать, что dompdf не очень хорошо с ним справляется. Если вы хотите придерживаться dompdf, вы можете рассмотреть таблицы, так как ваш документ несколько табличный по своей природе.
Внутренняя таблица стилей может быть создана путем включения стилей между элементом <style>, а не элементом <styles>.
Ниже stmt неверно:
<styles>...</styles>
Это должно быть:
<style> ... </style>
И встроенные стили должны быть указаны, как показано ниже:
<div class="className" style="color:red;text-align: left;">
И внешняя таблица стилей должны быть включены, как показано ниже:
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
Если внешняя таблица стилей не работает, проверьте путь к исходному файлу.
Простое решение заключается в том, чтобы поместить css в отдельный (.php) или любой другой файл сценариев сервера и включить его в свой pdf-файл. напр.. У вас есть pdf.blade.php файл для pdf
<!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>Предположим, у вас есть файл css style.css, поэтому следующий шаг - скопировать содержимое файла css и вставить его в новый style.blade.php И ты почти закончил!!
Теперь включите его в свой PDF-файл , например.
<style>
@include('style')
</style> Вот так просто трюк сработал для меня.