Mpdf-带有CSS的渲染表

Question

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

我已经隔离了问题并重现了问题，我创建了一个简单的示例来显示Im在其中面临的问题。

尝试呈现下表时：

<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正确呈现表格？

Answer 1

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