TCPDF将带有html的嵌入式SVG转换为PDF [英] TCPDF convert inline SVG with html into PDF

问题描述

我正在使用TCPDF将html转换为PDF.

I am using TCPDF to convert html into 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');

它就像一种魅力.

但是我有一种情况，当(Dynamic)html也具有SVG内联代码时.因此，我需要将具有SVG的html转换为PDF.但这是行不通的.下面是我的代码.

But I have a case when (Dynamic) html has SVG inline code also. So I need to convert this html which has SVG into PDF. But it does not work. Below is my code.

    $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的所有html都以pdf打印，但代替SVG时显示为抱歉，您的浏览器不支持嵌入式SVG".

So in this case the generated PDF has all the html printed in pdf but in place of SVG it says "Sorry, your browser does not support inline SVG".

是否有可能从包含SVG的html生成PDF?

Is there any possible way to generate PDF from html containing SVG?

我发现 http://www.pdfy.net/的更新，该网站可以将基于html的svg转换为PDF.知道他们如何做吗?

Update I found http://www.pdfy.net/ this website can convert html based svg into PDF. Any idea how they are doing it?

好的，现在我发现 mPDF 支持内联SVG.它对此确实有很大的支持. 但是 mPDF本身就有一个问题，即对基本CSS的支持很少.例如绝对位置，浮动不很好支持.

Okay Now I found that mPDF have supports for inline SVG. And it has really great support for it. But mPDF have it's own problem of very less support for basic css. For Eg. Position absolute, float are not supported very well.

因此，我再次遇到相同的问题，但有其他要求.一个支持内联svg的html到PDF转换的库，它还支持所有基本的CSS.

So again I am back with the same problem with additional requirement. A library which supports conversion of html with inline svg to PDF and it also supports all basic CSS.

推荐答案

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

Solution #1- Save svg to file

您可以将HTML的svg部分保存到文件中.然后，您可以使用$pdf->ImageSVG()函数将svg图片添加到PDF中，如此处.

You can save your svg part of your HTML into a file. Then you can add the svg image into your PDF with $pdf->ImageSVG() function as it says here.

$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

Solution #2- Add inline svg

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

You can store your inline svg into a variable (for example $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:

Then you can add your $svgString variable to PDF like this:

$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);

这篇关于TCPDF将带有html的嵌入式SVG转换为PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！