TCPDF将内联SVG与html转换为PDF - TCPDF convert inline SVG with html into PDF

我使用TCPDF将html转换为PDF。

    $pdf = new TCPDF();
    $pdf->SetPrintHeader(false);
    $pdf->SetPrintFooter(false);
    $pdf->AddPage();       
    $html  = '<div>Some random html </div>';        
    $pdf->writeHTML($html, true, false, true, false, '');
    $pdf->Output('/pdf/output.pdf','F');

真是妙不可言。

但我有一个情况下(动态)html有SVG内联代码也。我需要把这个有SVG的html转换成PDF。但这行不通。下面是我的代码。

    $pdf = new TCPDF();
    $pdf->SetPrintHeader(false);
    $pdf->SetPrintFooter(false);
    $pdf->AddPage();       
    $html  = '<div>Some random html <div style="width: 100px;"><svg viewBox="10 0 80 80">
    <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
    <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
    <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
    Sorry, your browser does not support inline SVG. 
    </svg></div> </div>';        
    $pdf->writeHTML($html, true, false, true, false, '');
    $pdf->Output('/pdf/output.pdf','F');

在这种情况下，生成的PDF包含了PDF格式的所有html，但是在SVG的位置显示"对不起，您的浏览器不支持内联SVG"。

是否有任何可能的方法从包含SVG的html生成PDF ?

更新我发现http://www.pdfy.net/这个网站可以转换基于html的svg为PDF。知道他们是怎么做的吗?

编辑1:

ok现在我发现mPDF支持内联SVG。它得到了很大的支持。但是 mPDF有它自己的问题，对基本css的支持很少。如。位置绝对，浮动不支持很好。

所以我又回到了同样的问题与额外的要求。一个支持将html与内联svg转换为PDF的库，它也支持所有基本的CSS。

解决方案#1-将svg保存到文件

您可以将svg部分的HTML保存到一个文件中。然后你可以用$pdf->ImageSVG()函数将svg图像添加到PDF中，就像这里所说的。

$pdf->ImageSVG($file='path/to/testsvg.svg', $x=15, $y=30, $w='', $h='', $link='http://www.tcpdf.org', $align='', $palign='', $border=1, $fitonpage=false);
$pdf->Write(0, $txt='', '', 0, 'L', true, 0, false, false, 0);

解决方案# 2 -添加内联svg

您可以将您的内联svg存储到一个变量中(例如$svgString):

$svgString = '<svg viewBox="10 0 80 80">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
Sorry, your browser does not support inline SVG. 
</svg>';

然后你可以像这样添加你的$svgString变量到PDF:

$pdf->ImageSVG('@' . $svgString, $x=15, $y=30, $w='', $h='', $link='http://www.tcpdf.org', $align='', $palign='', $border=1, $fitonpage=false);
$pdf->Write(0, $txt='', '', 0, 'L', true, 0, false, false, 0);

@Soroush

你错过了只有一个语句，我在你的代码中添加，希望这将有助于，我测试和它的工作100%。

    $svgString = '<svg viewBox="10 0 80 80">
    <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
    <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
    <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
    Sorry, your browser does not support inline SVG. 
    </svg>';
    $pdf->ImageSVG('@' . $svgString, $x=15, $y=30, $w='', $h='',         $link='http://www.tcpdf.org', $align='', $palign='', $border=1, $fitonpage=false);  
    $pdf->Write(0, $txt='', '', 0, 'L', true, 0, false, false, 0);
    $pdf->Output('networth-and-cashflow-document.pdf', 'D'); // This will download PDF

我认为最好的方法是在HTML代码中使用ImageSVG，使用tcpdf方法TAG。

对于SVG，下面是一个示例:

 // Create the SVG on a string
$svgString .= "<svg width='"100'" height='"100'">";
$svgString .= "<circle cx='"50'" cy='"50'" r='"40'" stroke='"green'" stroke-width='"4'" fill='"yellow'" />";
$svgString .= "</svg>";
// Prepare the parameters for the function
$params = $pdf->serializeTCPDFtagParameters(array('@' . $svgString, $x='', $y='', $w='', $h='', $link='http://www.tcpdf.org', $align='', $palign='', $border=1, $fitonpage=false));
// Declare the tag with the name of the function yu want to call and add the parameters
$tcpdf_start1 .= '<tcpdf method="ImageSVG" params="'.$params.'" />';
 // Prepare your HTML code inside of which you just insert the special TAG
$code_html  = "";
$code_html .= "<h1>My first SVG</h1>";
$code_html .= "<table border='"1'">";
$code_html .= "<tr><td style='"text-align: center;'">Top</td></tr>";
$code_html .= "<tr><td>".$tcpdf_start1."</td></tr>";
$code_html .= "</table>";
// Basicly produce your PDF with the parameters of your choice.
$pdf->writeHTML($code_html, $ln, $fill, $reseth, $cell, '');

TCPDF的一个解决方案是，可以将svg作为源属性内联到HTML中。

如果你看看TCPDF的例子06，这就是svg如何内联在$writeHTML:https://github.com/tecnickcom/TCPDF/blob/95c5938aafe4b20df1454dbddb3e5005c0b26f64/examples/example_006.php L112

这样你就可以解析你的html字符串，或者修改源代码以匹配在浏览器和pdf中都能工作的语法(参见https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web#The_quick_way_)。

图像中SVG设置为src的示例:

$iconSpecialNeedsWhite = '/system/modules/assets/images/wheelchair-white.svg';
$pdf->writeHTMLCell($w[$i], $h, '', '', '<table cellpadding="6"><tr><td align="center"><img src="'.$iconSpecialNeedsWhite.'" height="12"/></td></tr></table>', 1, 0, 1, true, 'C', true);