javascript - 当前用于将 html + svg + css 转换为 pdf 的库

Question

虽然有几个此类问题，而且是一个常见问题，但我想更新最新的库以获得更好的结果。

我有 html 代码(div 的内容)，它有几个 svg，并使用外部 css 和 js，包含在 html header 中。我正在寻找如何将它导出为 pdf，它可以是 PHP 或 javascript。

尝试这些替代方案，但效果不佳:

• jspdf (javascript):结果是 pdf(重量级)，单页，质量低。

• Html2Pdf (php): 不支持svg标签。

• mPDF (php):mpdf\classes\svg.php 中的转换错误

您还推荐哪些其他替代方案？

感谢您的贡献。

[编辑 03-06]

为了继续使用mpdf，我尝试将svg标签转为img。我可以使用两种不同类型的图形，而且质量很好。

在第三种情况下，它不生成图像。一些代码来理解所使用的方法:

HTML

<span id="graf_capitanias_ct"></span>

图形D3代

<script type="text/javascript">
var margin = {top: 20, right: 160, bottom: 35, left: 30};
var width = 300 - margin.left - margin.right,
    height = 150 - margin.top - margin.bottom;

var svg = d3.select("#graf_capitanias_ct")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

/* Data in strings like it would be if imported from a csv */
var data = [
    { year: "2018", ct: "4", capitanias: "2"},
    { year: "2017", ct: "1", capitanias: "1"},
    { year: "2016", ct: "3", capitanias: "0"},
];

var parse = d3.time.format("%Y").parse;

// Transpose the data into layers
var dataset = d3.layout.stack()(["ct", "capitanias"].map(function(valor) {
  return data.map(function(d) {
    return {x: parse(d.year), y: +d[valor]};
  });
}));

// Set x, y and colors
var x = d3.scale.ordinal()
  .domain(dataset[0].map(function(d) { return d.x; }))
  .rangeRoundBands([10, width-10], 0.02);

var y = d3.scale.linear()
  .domain([0, d3.max(dataset, function(d) {  return d3.max(d, function(d) { return d.y0 + d.y; });  })])
  .range([height, 0]);

var colors = ["#d25c4d", "#f2b447"];

// Define and draw axes
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickFormat(d3.format(",d"))
  .tickSize(-width, 0, 0)

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickFormat(d3.time.format("%Y"));

svg.append("g")
  .attr("class", "y cap_ct_axis")
  .call(yAxis);

svg.append("g")
  .attr("class", "x cap_ct_axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")    
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-65)");

// Create groups for each series, rects for each segment 
var groups = svg.selectAll("g.cost")
  .data(dataset)
  .enter().append("g")
  .attr("class", "cost")
  .style("fill", function(d, i) { return colors[i]; });

var rect = groups.selectAll("rect")
  .data(function(d) { return d; })
  .enter()
  .append("rect")
  .attr("x", function(d) { return x(d.x); })
  .attr("y", function(d) { return y(d.y0 + d.y); })
  .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
  .attr("width", x.rangeBand())
  .on("mouseover", function() { tooltip.style("display", null); })
  .on("mouseout", function() { tooltip.style("display", "none"); })
  .on("mousemove", function(d) {
    var xPosition = d3.mouse(this)[0] - 15;
    var yPosition = d3.mouse(this)[1] - 25;
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
    tooltip.select("text").text(d.y);
  });

 // Draw legend
var legend = svg.selectAll(".legend")
  .data(colors)
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });

legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", function(d, i) {return colors.slice().reverse()[i];});

legend.append("text")
  .attr("x", width + 5)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "start")
  .text(function(d, i) { 
    switch (i) {
      case 0: return "Capitan\u00edas";
      case 1: return "Cuerpos t\u00e9cnicos";
    }
  });

// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
  .attr("class", "tooltip")
  .style("display", "none");

tooltip.append("rect")
  .attr("width", 30)
  .attr("height", 20)
  .attr("fill", "white")
  .style("opacity", 0.5);

tooltip.append("text")
  .attr("x", 15)
  .attr("dy", "1.2em")
  .style("text-anchor", "middle")
  .attr("font-size", "12px")
  .attr("font-weight", "bold");
</script>   

svg转img

<script type="text/javascript">
function convierte_graficos_cap_ct() {
    var html = '';
    var imgscr = '';
    var img = '';
    var attributes = '';

    // css manual
    d3.selectAll('#graf_capitanias_ct svg')
    .style({
        "font": "10px sans-serif",
        "shape-rendering": "crispEdges"
    });
    d3.selectAll('.cap_ct_axis path, .cap_ct_axis line')
    .style({
        "fill": "none",
        "stroke": "#000"
    });
    d3.selectAll('.cap_ct_axis path.domain')
    .style({
        "stroke": "none"
    });
    d3.selectAll('.cap_ct_axis.y .tick line')
    .style({
        "stroke": "#ddd"
    });

    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 中获取它们。

因此，显示“损坏”的标签 img 不会转换 svg。它中断是因为图中有 UTF-8 文本(图例)。在转换之前应该如何更改该文本？谢谢

Answer 1

对于 PDF 生成，我们目前使用 Snappy ，它是 WKHTMLTOPDF 的包装器.
我们使用 SVG 将图表嵌入到 HTML 中并进行渲染。
尽管我们在尺寸和位置方面确实存在一些问题。
我们最终将 SVG 转换为图像，然后将其编码为 base64。
然后将 Base64 添加到 <img src="[Base64String]">

Composer可以很好地降低这些依赖性。

{
"require":{
"knplabs/knp-snappy": "^0.4.3",
"h4cc/wkhtmltopdf-amd64": "0.12.x",
"h4cc/wkhtmltoimage-amd64": "0.12.x",
"h4cc/wkhtmltopdf-i386": "0.12.x",
"h4cc/wkhtmltoimage-i386": "0.12.x",
"wemersonjanuario/wkhtmltopdf-windows": "0.12.x"
}
}

其他一些选项是:

• > FPDF - FPDF 是一个 PHP 类，它允许使用纯 PHP 生成 PDF 文件，也就是说不使用 PDFlib 库。 FPDF 中的 F 代表免费:您可以将其用于任何类型的用途，并根据您的需要对其进行修改。
• > mPDF - mPDF 是一个 PHP 库，可从 UTF-8 编码的 HTML 生成 PDF 文件。它基于 FPDF 和 HTML2FPDF，并进行了大量增强。
• > dompdf - dompdf 是一个 HTML 到 PDF 的转换器。从本质上讲，dompdf(主要)是用 PHP 编写的符合 CSS 2.1 的 HTML 布局和渲染引擎。它是一个样式驱动的渲染器:它将下载和读取外部样式表、内联样式标签和单个 HTML 元素的样式属性。它还支持大多数表示性 HTML 属性。
• > TCPDF - TCPDF 是一个 PHP 库，用于轻松地即时生成 PDF 文档，只需几行。当您创建 PDF 文件时，它支持自定义和许多关键功能。