从 PDF 中删除了 FabricJS 项目符号

Question

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

我见过几种使用 TCPDF 创建项目符号的方法，但是其中 none 解决了 SVG 文件中的项目符号。非常感谢任何帮助！

Canvas截图（所有字体都有项目符号）

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 文件的片段。如果字体系列是 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>

Answer 1

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

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

可能的解决方案

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

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

其他可能的解决方案

您可以将缺失的字符添加到您嵌入的字体中，这样您就可以保证每个字符的外观。这是我以前用过的解决方案，不过可以time-consuming.
您可以将文本转换为路径，因此不需要在 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');

从 PDF 中删除了 FabricJS 项目符号

FabricJS Bullets Removed from PDF

canvas

tcpdf

fabricjs

可能的解决方案

其他可能的解决方案

例子