Question

我有包含几个svg的html代码，并使用html标头中包含的外部css和js。我尝试使用PHP Mpdf库将其导出为pdf。

由于它不接受svg的所有属性，因此首先将其转换为img：

<script type="text/javascript">
function convierte_graficos() {

    // css manual
d3.selectAll('.bullet')
.style({
    "font": "10px sans-serif",
    "text-align": "left"
});
d3.selectAll('.bullet .marker')
.style({
    "stroke": "#000",
    "stroke-width": "2px"
});
d3.selectAll('.bullet .tick line')
.style({
    "stroke": "#666",
    "stroke-width": ".5px"
});
d3.selectAll('.bullet .range.s0')
.style({
    "fill": "#eee"
});
d3.selectAll('.bullet .range.s1')
.style({
    "fill": "#ddd"
});
d3.selectAll('.bullet .range.s2')
.style({
    "fill": "#ccc"
});
d3.selectAll('.bullet .measure.s0')
.style({
    "fill": "red"
});
d3.selectAll('.bullet .measure.s1')
.style({
    "fill": "blue"
});
d3.selectAll('.bullet .title')
.style({
    "font-size": "14px",
    "font-weight": "bold"
});
d3.selectAll('.bullet .subtitle')
.style({
    "fill": "#999"
});

    html = $('#graf_capitanias_ct').html();
    imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
    img = '<img src="'+imgsrc+'"';
    attributes = $('svg').prop("attributes");
    $.each(attributes, function() {
        img += ' '+this.name+'="'+this.value+'"';
    });
    img += '>';

    $('#graf_capitanias_ct').html(img); 
}
</script>

请注意，必须在重新转换之前添加css样式。最初是从外部CSS获取它们的。

图像看起来不错，并且在浏览器中看起来正确（字体样式和大小也是如此）。但是在生成pdf时，它看起来很糟糕。似乎会丢失字体样式（而不是颜色）和大小。附上三个阶段的图片：

库的初始化如下：

$this->pdf = new mPDF(    $mode= 'es-x', 
                                    $format='A4',
                                    $default_font_size=0,
                                    $default_font='',
                                    $mgl=12,$mgr=10,$mgt=14,$mgb=20,
                                    $mgh=0,$mgf=10, 
                                    $orientation='P')

'utf-8'模式的结果相同。

可能缺少什么？如果图像是img标签，为什么不能很好地显示字体？谢谢！

mPDF库：将svg转换为IMG src，字体问题

0 个答案: