Mpdf - 使用 css 渲染表格答案

【问题标题】：Mpdf - Render table with cssMpdf - 使用 css 渲染表格
【发布时间】：2018-08-09 22:16:02
【问题描述】：

我一直在尝试使用 mpdf 创建一个 mediawiki 页面的 pdf，并且一切都很好，除了所有未正确呈现的表格。

我已经隔离了问题并重现它，我创建了一个简单的示例来显示我在那里面临的问题..

尝试渲染下表时：

<style>
   .wikitable tbody tr th, table.jquery-tablesorter thead tr th.headerSort, .header-cell {
   background: #009999;
   color: white;
   font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
   font-weight: bold;
   font-size: 13pt;
   }
   .wikitable, table.jquery-tablesorter {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   }
   .tabela, .wikitable {
   border: 1px solid #A2A9B1;
   border-collapse: collapse; 
   }
   .tabela tbody tr td, .wikitable tbody tr td {
   padding: 5px 10px 5px 10px;
   border: 1px solid #A2A9B1;
   border-collapse: collapse;
   }
   .config-value {
   font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
   font-size:13pt; 
   background: white; 
   font-weight: bold;
   }
</style>
<table class="wikitable tabela">
   <tr>
      <th colspan="4"> SAP</th>
   </tr>
   <tr>
      <td style="text-align: center;"> Servidor SAP </td>
      <td class="config-value" colspan="3"> 10.18.254.71</td>
   </tr>
   <tr>
      <td style="text-align: center;"> Instance Number</td>
      <td class="config-value"> 00 </td>
      <td style="text-align: center;"> System ID</td>
      <td class="config-value"> 500</td>
   </tr>
   <tr>
      <td style="text-align: center;"> Usuário</td>
      <td class="config-value"> 234234  </td>
      <td style="text-align: center;"> Senha</td>
      <td class="config-value"> dev@2543</td>
   </tr>
   <tr>
      <td style="text-align: center;"> Depósito</td>
      <td class="config-value"> AWS </td>
      <td style="text-align: center;">  Centro </td>
      <td class="config-value">  001</td>
   </tr>
   <tr>
      <td style="text-align: center;"> Sistema de Depósito</td>
      <td colspan="3" class="config-value">  WHY</td>
   </tr>
   <tr>
      <td style="text-align: center;">SAP Router</td>
      <td colspan="3" style="&quot;text-align:left;" class="config-value"></td>
   </tr>
</table>

我们得到以下结果： mpdf output

当浏览器呈现为：

Table rendered by browser php代码为：

<?php
   
require_once __DIR__ . '/mpdf/vendor/autoload.php'; 
 
$mpdf =new \Mpdf\Mpdf([
	'mode' => 'utf-8' 
]); 
$mpdf->shrink_tables_to_fit = 0;
$mpdf->keep_table_proportions = true;
 
$html = file_get_contents('c:\TMP\html.html');

$mpdf->WriteHTML( $html );
$mpdf->Output( 'saida.pdf', 'F' );

如何让mpdf正确渲染表格？

【问题讨论】：

标签： mpdf

【解决方案1】：

我解决了我使用 https://github.com/MyIntervals/emogrifier 应用内联样式的问题。

【讨论】：