FabricJS项目符号已从PDF中删除

时间:2018-03-16 18:30:23

标签: canvas fabricjs tcpdf

我有一个使用canvas和FabricJS构建的图形编辑器。我正在向服务器输出SVG,然后使用TCPDF库使用SVG文件创建PDF。但是,大多数项目符号都是从PDF中删除的,尽管它们出现在SVG中(参见下面的屏幕截图)。我一直在寻找解决方案的时间,但我能想到的是它正在删除子弹,因为它不是UTF8字符,并且不包含在我们正在使用的自定义字体系列中。子弹似乎只适用于标准字体系列。

我已经看到了几种使用TCPDF创建项目符号的方法,但是它们都没有解决SVG文件中的项目符号。非常感谢任何帮助!

Canvas屏幕截图(所有字体都有子弹) enter image description here

PDF输出(大多数子弹剥离) enter image description here

此外,这是生成PDF的PHP代码:

require(PATH TO TCPDF."/tcpdf.php");

$width = $brochure_data["total_width_inches"];  
$height = $brochure_data["total_height_inches"]; 
$orientation = ($height>$width) ? 'P' : 'L';  

$page_size = array($width, $height);

$pdf = new TCPDF($orientation, "in", $page_size, true, 'UTF-8', false);

//Import custom fonts
$fonts=get_fonts();
foreach($fonts AS $font){ 
    if($font["font_source"]){
        TCPDF_FONTS::addTTFfont(PATH TO FONTS."/".$font["font_source"], 'TrueType', '', 32);
    }
}

// remove default header/footer
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);

// set margins
$pdf->SetMargins(0, 0, 0, true);

// set auto page breaks false
$pdf->SetAutoPageBreak(false, 0);

//Loop through each SVG and create a new page for each
foreach($svg_images AS $svg_image){

    // add a page
    $pdf->AddPage($orientation, $page_size);

    $pdf->ImageSVG($svg_image, $x=0, $y=0, $w=$brochure_data["total_width_inches"]*300, $h=$brochure_data["total_height_inches"]*300, $link='', $align='', $palign='', $border=0, $fitonpage=true);

}

//Close and output PDF document
$pdf_filename=BROCHURE FILENAME.".pdf";
$pdf->Output($pdf_filename, 'F');

以下是SVG文件的摘录。如果字体系列是Arial或标准字体,但是没有指定的字体,子弹将起作用。

<g transform="translate(714 287.2896)"> <text font-family="Lobster" font-size="24" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(51,51,51); fill-rule: nonzero; opacity: 1;" > <tspan x="-63.61" y="-8.17" fill="#333333">• Demo Text</tspan> <tspan x="0" y="23.29" fill="#333333"></tspan> </text> </g> 

1 个答案:

答案 0 :(得分:2)

需要更多的研究来确定问题的确切来源,但是,我认为这个答案可以帮助你。

正如您所说,问题与TCPDF如何处理不在字体中的字符有关。 • (U+2022)不是龙虾字体中的字符,因此在浏览器中查看SVG时会使用后备字体。但是,在PDF查看器中显示PDF时不会发生这种情况。

可能的解决方案

我在测试它时不知道它的工作原理,但如果允许TCPDF自动检测字体类型,它会将其添加为TrueTypeUnicode字体。这导致后备字体用于丢失字符。这样做的缺点是您依赖于每个PDF查看器附带的字体。这些字体可能不一致,因此您无法保证PDF的外观。在多个PDF查看器和多台计算机上测试文件是个不错的主意。

注意: TCPDF似乎没有覆盖它创建的字体文件,因此您可能需要为每种字体删除以下文件,以便重新创建它们:{{1} }

其他可能的解决方案

  • 您可以将缺少的字符添加到要嵌入的字体中,以便保证每个字符的外观。这是我过去使用的解决方案,但这可能非常耗时。

  • 您可以将文本转换为路径,因此不需要在PDF中嵌入字体。这只是一个我没有测试过的想法,它有自己的缺点。

实施例

示例SVG
lobster.ctg.z, lobster.php, lobster.z
示例PHP
<svg width="500" height="500">
    <text
      font-family="Lobster"
      font-size="24">
      <tspan x="50" y="100">• Demo Text</tspan></text>
</svg>