【问题标题】:FabricJS Bullets Removed from PDFfabricjs bullet删除了pdf
【发布时间】:2018-08-25 21:58:00
【问题描述】:

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

我见过几种使用 TCPDF 创建项目符号的方法,但是它们都没有处理 SVG 文件中的项目符号。非常感谢任何帮助!

画布屏幕截图(所有字体都有项目符号)

PDF 输出(去掉大部分项目符号)


另外,这里是生成 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 文件的 sn-p。如果字体系列是 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> 

【问题讨论】:

  • this discussion 中,开发人员声明不支持某些“高级文本”功能。但是,自 2012 年以来,这可能已经发生了变化。您能否发布一个触发该问题的 SVG 源代码的小示例?
  • 我在问题中添加了一个 sn-p。

标签: canvas fabricjs tcpdf


【解决方案1】:

需要更多的研究来确定问题的确切根源,但是,我认为这个答案应该对您有所帮助。

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

可能的解决方案

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

注意: TCPDF 似乎不会覆盖它创建的字体文件,因此您可能需要删除每种字体的以下文件,以便重新创建它们:lobster.ctg.z, lobster.php, lobster.z

其他可能的解决方案

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

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

示例

示例 SVG
<svg width="500" height="500">
    <text
      font-family="Lobster"
      font-size="24">
      <tspan x="50" y="100">• Demo Text</tspan></text>
</svg>
示例 PHP
<?php
require_once('tcpdf_include.php');
$pdf = new TCPDF();
// Leave $fonttype blank, so TCPDF will autodetect it.
// May need to delete font files already generated.
TCPDF_FONTS::addTTFfont('../fonts/Lobster.ttf');
$pdf->AddPage();
$pdf->ImageSVG("images/example.svg", $x=0, $y=0, $w=200, $h=200);
$pdf->Output("example.pdf", 'I');

【讨论】:

  • 我尝试了您的第一个解决方案,它确实纠正了项目符号问题,但现在似乎出现了一个新问题。我们正在使用的几种字体的字母间距有很大偏差,有些字体根本无法正确渲染。但是,只有少数字体存在此问题,因此我们可能会暂时删除这些字体。非常感谢您的帮助!
猜你喜欢
  • 1970-01-01
  • 2012-12-19
  • 1970-01-01
  • 2015-07-29
  • 2017-04-08
  • 2017-11-15
  • 2017-03-08
  • 2018-05-11
  • 1970-01-01
相关资源
最近更新 更多