Question

我的页面上有一些SVG，我想从中生成PDF。对于这个范围，我使用Flying Saucer with OpenPDF，并且使用以下命令将SVG转换为图像：

var $body_clone = $('#pdf_container').clone();

var $svgs  = $body_clone.find('svg');
var $svg;
var xml;
var data;
var $img;

for (var i=0; i<$svgs.length; i++) {
    var $svg = $svgs.eq(i);
    xml = new XMLSerializer().serializeToString($svg[0]);
    data = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(xml)));
    $img  = $(new Image());
    $img.attr('src', data);
    $img.width($svg.outerWidth(true));
    $img.height($svg.outerHeight(true));
    $svg.replaceWith($img[0].outerHTML);
}

我尝试删除clone()并提交，并且可以正常工作：页面中的SVG被替换为（丑陋的）图像。

还原clone()并提交表单，我将$body_clone的html发送到服务器上，并使用Mustache添加到pdf的临时模板中。然后，我用jsoup将html转换为xhtml进行消毒，然后用Flying Saucer对其进行转换并将其发送到http响应。

我得到的是仅包含文本的pdf。不存在转换为图像的SVG。

我也按照此SO answer的建议添加了-Djava.protocol.handler.pkgs=org.xhtmlrenderer.protocols，但没有添加。我怀疑问题是src的图像不是data:image/png，而是data:image/svg+xml。

无论如何，我尝试使用浏览器（Firefox）打印整个页面，并将其打印为PDF（Lubuntu）文件。不仅显示图像，而且非常完美。 Lubuntu用什么来打印成pdf？可以将其用作外部转换器吗？如果没有，它是如何工作的，并且有一种方法可以模拟打印到文件？

Answer 1

我最终以这种方式使用SaveSvgAsPng：

function downloadPdf() {
    "use strict";

    //  get the graphics global container
    var $body_clone = $('#pdf_container');
    // get the SVGs
    var $svgs = $('.graph_container svg');
    var $svg;
    var promises = [];

    for (var i=0; i<$svgs.length; i++) {
        $svg = $svgs.eq(i);

        // convert the SVGs to images srcs
        promises.push(svgAsPngUri($svg[0]));
    }

    $.when.apply(null, promises).then(function() {
    var img_scrs = Array.prototype.slice.call(arguments);
    var $img;

        for (var i=0; i<$svgs.length; i++) {
            $svg = $svgs.eq(i);
            $img = $(new Image());
            $img.attr("src", img_scrs[i]);
            // substitute the SVGs with the image
            $svg.replaceWith(imgs[i]);
        }

        var $body_clone = $('#pdf_container');
        var body = $body_clone[0].outerHTML;
        $('#pdfBody').val(body);

        // send to the server the HTML of the container of all images
        $('#pdfForm').submit();

        // get all images
        var $imgs = $('.graph_container img:not(.waiting)');
        var $img;

        for (var i=0; i<$imgs.length; i++) {
            $img = $imgs.eq(i);
            // replace image with empty svg
            $img.replaceWith('<svg></svg>');
        }

        // repopulate the graphs as you did at the page load
        grafic();
    });
}

或者，您可以将chromium用作pdf converter：

chromium-browser --headless --print-to-pdf=path/to/file.pdf https://example.com

或

chromium-browser --headless --print-to-pdf=path/to/file.pdf file:/path/to/file.html

结果是完美的。

如何将带有SVG的HTML下载为PDF？

1 个答案: