本教程详细阐述了在yii2框架下使用mpdf库生成pdf文件时，如何正确地应用css样式。文章分析了直接引用web路径的常见问题，并提供了多种解决方案，包括内联样式、通过文件系统绝对路径引用外部css，以及利用`kartik-v/yii2-mpdf`扩展的`cssfile`选项。通过具体代码示例和注意事项，旨在帮助开发者高效解决pdf样式不生效的问题。
1. 理解Yii2与MPDF中CSS样式加载的挑战
在Yii2应用中，当使用MPDF库生成PDF文件时，开发者经常会遇到CSS样式无法正确应用的问题。这通常是由于MPDF在处理HTML内容时，其运行环境与浏览器环境存在差异，尤其是在解析外部资源路径方面。
原始代码示例中，尝试通过以下方式引入CSS：
$stylesheet = '<head><link rel="stylesheet" type="text/css" href="'.Yii::getAlias('@web').'\css\exam_report.css'.'"/></head>';
$mpdf->WriteHTML($stylesheet, \Mpdf\HTMLParserMode::HEADER_CSS);这里的问题在于Yii::getAlias('@web')解析的是一个Web URL（例如/web/css/exam_report.css），而MPDF在服务器端生成PDF时，需要的是一个可访问的文件系统路径，而不是一个HTTP URL。MPDF无法通过Web服务器去请求这个CSS文件，它需要直接读取本地文件。
2. 解决方案一：直接嵌入CSS样式
对于简单或少量的样式，最直接有效的方法是将CSS样式直接嵌入到HTML内容中，通过zuojiankuohaophpcnstyle>标签或者元素的style属性。
立即学习“前端免费学习笔记（深入）”；
2.1 使用<style>标签嵌入
将CSS规则直接放在HTML的<head>部分（或<body>内的<style>标签中，虽然不推荐，但MPDF也能解析），作为HTML内容的一部分传递给MPDF。
<?php
use yii\helpers\Html;
?>
<!DOCTYPE html>
<html>
<head>
<style>
.rightleft {
height: 150px;
float: left;
border-style: dotted dashed solid double;
}
.rightpan {
height: 150px;
float: right;
border-style: dotted dashed solid double;
}
.container {
width: 100%;
/* 其他容器样式 */
}
</style>
</head>
<body>
<div class="container">
<div class="rightleft">Left Pan</div>
<div class="rightpan">Right Pan</div>
</div>
</body>
</html>在控制器中，将整个HTML内容（包含<style>标签）传递给$mpdf->WriteHTML()：
// ...
$htmlContent = $this->renderPartial('_report', [
'model' => $model,
'total_subjects' => $total_subjects,
'examReportData' => $examReportData
]);
$mpdf->WriteHTML($htmlContent, \Mpdf\HTMLParserMode::HTML_BODY);
// ...2.2 使用style属性内联样式
直接在HTML元素的style属性中定义样式。这种方法优先级最高，但会使HTML结构变得臃肿，难以维护，适用于极少数特定情况。
<div class="container" style="width: 100%"> <div class="leftpan" style="height: 150px; float: left; border-style: dotted dashed solid double;">Left Pan</div> <div class="rightpan" style="height: 150px; float: right; border-style: dotted dashed solid double;">Right Pan</div> </div>
3. 解决方案二：通过文件系统路径引用外部CSS
如果希望保持CSS文件的独立性，可以通过提供CSS文件的绝对文件系统路径来解决。Yii::getAlias('@webroot')可以帮助我们获取到Web根目录的物理路径。
public function actionPrintReport($student_id, $exam_id, $total_subjects, $exam_date)
{
// ... (其他代码保持不变)
// 获取CSS文件的绝对文件系统路径
$cssFilePath = Yii::getAlias('@webroot') . DIRECTORY_SEPARATOR . 'css' . DIRECTORY_SEPARATOR . 'exam_report.css';
// 检查文件是否存在，防止路径错误导致PHP报错
if (!file_exists($cssFilePath)) {
throw new \yii\web\NotFoundHttpException("CSS file not found at: " . $cssFilePath);
}
// 读取CSS文件内容
$stylesheetContent = file_get_contents($cssFilePath);
// 将CSS内容直接写入MPDF，使用HEADER_CSS模式
$mpdf->WriteHTML($stylesheetContent, \Mpdf\HTMLParserMode::HEADER_CSS);
// 写入HTML主体内容
$mpdf->WriteHTML($htmlContent, \Mpdf\HTMLParserMode::HTML_BODY);
$mpdf->Output($pathfile, 'I');
}注意事项：
- DIRECTORY_SEPARATOR用于确保跨操作系统的路径分隔符兼容性。
- file_exists()检查是良好的实践，可以帮助调试路径问题。
- \Mpdf\HTMLParserMode::HEADER_CSS模式用于解析CSS内容。
4. 解决方案三：利用kartik-v/yii2-mpdf扩展的cssFile选项 (推荐)
在Yii2生态中，kartik-v/yii2-mpdf是一个非常流行的MPDF封装扩展，它提供了更便捷的方式来配置MPDF，包括直接指定外部CSS文件。如果你的项目允许引入第三方扩展，这通常是更推荐的解决方案。
首先，确保你已经通过Composer安装了该扩展：
composer require kartik-v/yii2-mpdf
然后，在控制器中可以这样使用：
use kartik\mpdf\Pdf;
use Yii; // 确保引入Yii
public function actionPrintReport($student_id, $exam_id, $total_subjects, $exam_date)
{
$model = new Results();
$examReportData = $model->getExamReport($student_id, $exam_id, $exam_date);
$htmlContent = $this->renderPartial('_report', [
'model' => $model,
'total_subjects' => $total_subjects,
'examReportData' => $examReportData
]);
$pathfile = "Student_exam_report";
// 使用kartik-v/yii2-mpdf扩展
$pdf = new Pdf([
'mode' => Pdf::MODE_UTF8, // 确保支持中文
'format' => Pdf::FORMAT_A4_LANDSCAPE, // 与MPDF的A4-L对应
'orientation' => Pdf::ORIENT_LANDSCAPE,
'destination' => Pdf::DEST_BROWSER, // 直接在浏览器中显示
'content' => $htmlContent,
// 指定CSS文件，路径相对于web根目录
'cssFile' => Yii::getAlias('@webroot') . '/css/exam_report.css',
// 也可以添加内联CSS
// 'cssInline' => '.heading{font-size:18px}',
'options' => ['title' => '学生考试报告'],
'methods' => [
'SetHeader' => ['学生考试报告||生成日期: ' . date("Y-m-d")],
'SetFooter' => ['{PAGENO}'],
],
// 配置MPDF实例的参数
'mpdf' => [
'tempDir' => Yii::getAlias('@runtime') . '/mpdf2/tmp',
'margin_right' => 5,
'margin_left' => 5,
'defaultFont' => 'Calibri', // 确保字体已配置或可用
],
]);
// 生成并输出PDF
return $pdf->render();
}cssFile选项的路径解析：kartik-v/yii2-mpdf的cssFile选项通常需要一个文件系统路径。Yii::getAlias('@webroot') . '/css/exam_report.css'是一个可靠的写法，它会解析为Web根目录下的css/exam_report.css的绝对文件系统路径。
5. 关键注意事项与故障排除
- 路径解析的准确性： 始终牢记MPDF在服务器端操作文件系统，而不是通过HTTP请求资源。因此，任何对外部资源的引用（如CSS、图片）都必须是绝对文件系统路径，而不是Web URL。@web通常用于生成浏览器可访问的URL，而@webroot用于获取文件系统的根路径。
- MPDF对CSS的支持： MPDF是一个将HTML转换为PDF的工具，它有自己的渲染引擎，并非完全支持所有现代CSS特性（如Flexbox、Grid布局、某些高级选择器或动画）。在设计用于MPDF的样式时，应尽量使用基础且兼容性好的CSS属性（如float、position、display: block/inline-block、margin、padding、border、font等）。
- 字体配置： 如果你的PDF需要使用非标准字体（如Calibri），你需要确保这些字体已正确配置到MPDF中。通常这意味着将字体文件放置在MPDF的font目录下，并在MPDF配置中声明它们。否则，MPDF会使用默认字体替代。
-
调试技巧：
- 检查HTML内容： 在$mpdf->WriteHTML()之前，将$htmlContent打印出来，确保所有CSS链接或内联样式都已正确生成。
- 检查CSS文件路径： 在控制器中，打印出$cssFilePath（或cssFile选项的值），然后手动检查该路径下文件是否存在且可读。
- MPDF日志： 启用MPDF的调试模式或检查其临时目录，有时可以找到错误报告或部分渲染的HTML文件，帮助定位问题。
- 逐步简化： 如果样式仍然不生效，尝试从最简单的内联样式开始，逐步引入外部CSS，以隔离问题。
总结
在Yii2中使用MPDF生成带有样式的PDF文件时，核心在于正确处理CSS文件的引用路径。避免使用Web URL路径，转而使用文件系统绝对路径是解决问题的关键。对于简单的样式，直接嵌入HTML内容是可靠的方法；对于复杂的样式管理，通过file_get_contents读取CSS文件或利用kartik-v/yii2-mpdf扩展的cssFile选项，并确保提供正确的文件系统路径，是更为推荐和专业的实践。同时，了解MPDF对CSS的兼容性限制以及正确的字体配置，将有助于创建出高质量的PDF报告。
