Laravel中使用Dompdf转换HTML到PDF时如何保留CSS样式？

核心问题修正 #

1. 修复无效的Flex布局属性
   你的.invoice_header使用了display: flexbox，这是无效的CSS属性，正确值应为display: flex。PDF渲染引擎对无效CSS的容错性远低于浏览器，这是头部布局错乱的直接原因。修改后：

   .invoice_header {
       display: flex; /* 替换flexbox */
       justify-content: space-between;
       width: 100%;
       background: #1f1f7a;
       align-items: center; /* 新增：确保内容垂直居中，匹配浏览器表现 */
   }
   

2. 替换Tailwind类为内嵌CSS
   外层容器使用的py-12、max-w-7xl等Tailwind类，多数PDF转换工具（如wkhtmltopdf、dompdf）支持不完善，建议直接转为内嵌CSS：

   /* 替换外层容器的Tailwind类 */
   .outer_container {
       padding-top: 48px;
       padding-bottom: 48px;
       width: 100%;
       max-width: 1280px;
       margin-left: auto;
       margin-right: auto;
       padding-left: 24px;
       padding-right: 24px;
   }
   

   同时将HTML外层的<div class="py-12 w-full">替换为<div class="outer_container">。

PDF适配优化 #

1. 添加Print媒体查询
   针对PDF打印场景，补充专门的样式规则，确保尺寸、边距与浏览器一致：

   @media print {
       body {
           margin: 0;
           padding: 0;
           width: 210mm; /* A4标准宽度 */
           height: 297mm; /* A4标准高度 */
       }
       .invoice_container {
           page-break-inside: avoid; /* 避免容器被分页截断 */
       }
       .item_table {
           border-collapse: collapse; /* 合并边框，避免重复线条 */
       }
   }
   

2. 优化表格渲染
   PDF对表格边框的处理容易出现偏差，统一使用border-collapse: collapse确保样式一致：

   .item_table {
       width: 100%;
       text-align: left;
       border-collapse: collapse; /* 新增 */
       border: 1px solid black;
   }
   .item_table td, .item_table th {
       padding: 5px 10px;
       border: 1px solid black;
   }
   

3. 限制图片尺寸
   避免图片在PDF中超出容器范围，添加宽度限制：

   .img_container img {
       height: 100px;
       max-width: 100%; /* 新增 */
   }
   

其他注意事项 #

• text-shadow在部分PDF工具中渲染效果不稳定，若不是必须可考虑移除；
• 确保使用的字体（如Arial）在转换工具环境中可用，自定义字体需额外配置；
• 优先使用最新版的PDF转换工具（如wkhtmltopdf、Headless Chrome），旧版本对现代CSS支持较差。

内容的提问来源于stack exchange，提问作者Ismail9403