Question

我正在创建一个打印机友好的pdf版本的网页，并且在尝试添加Google areachart时也遇到了一些困难。

使用JavaScript生成areachart并在页面上呈现为svg，我尝试了许多不同的方法来添加图表，包括为包含图表的div导入html（到目前为止我使用这种方法的所有内容）是图表的标题，而不是实际的图表），我已经研究过将svg转换为图像格式（png，jpeg，gif等），然后保存图像并将pdf添加为图像。

有没有人对如何实现这个有任何想法？

非常感谢任何建议。

Answer 1

使用jQuery和https://github.com/vvvv/SVG我假设你正在使用MVC

使用Javascript：

$("#makePdf").click(function (e) {
    $.ajax({
        type: 'POST',
        url: '/GeneratePdf',
        dataType: 'json',
        data: JSON.stringify({ svgXml: $("<div />").append($("#chart svg").clone()).html() }),
        contentType: 'application/json;charset=utf-8',
        success: function (data) {
            window.open('/GetPdf?pdfId=' + data.pdfId, '_blank');
        }
    });
    e.preventDefault();
});

$("<div />").append($("#chart svg").clone()).html()是必需的，因为无法获取当前元素的xml源，这是我能找到的最优雅的方法，将其附加到新的div并获取其内容的HTML。

C＃：

using System;
using System.IO;
using System.Drawing.Imaging;
using iTextSharp.text;
using iTextSharp.text.pdf;
using Svg;

// ...

public static MemoryStream PngFromSvg(string svgXml)
{
    MemoryStream pngStream = new MemoryStream();
    if (!string.IsNullOrWhiteSpace(svgXml))
    {
        byte[] byteArray = Encoding.ASCII.GetBytes(svgXml);
        using (MemoryStream stream = new MemoryStream(byteArray))
        {
            SvgDocument svgDocument = SvgDocument.Open(stream);
            System.Drawing.Bitmap bitmap = svgDocument.Draw();
            bitmap.Save(pngStream, System.Drawing.Imaging.ImageFormat.Png);
        }
    }
}

public static MemoryStream GeneratePdf(MemoryStream pngStream)
{
    MemoryStream pdfStream = new MemoryStream();

    using (Document document = new Document(PageSize.A4, 20, 20, 20, 20))
    {
        PdfWriter pdfWriter = PdfWriter.GetInstance(document, pdfStream);

        // ...
        Image chartImage = Image.GetInstance(System.Drawing.Image.FromStream(pngStream), ImageFormat.Png);
        PdfPCell chartCell = new PdfPCell(chartImage, true);
        chartCell.Border = Rectangle.NO_BORDER;
        //...

        document.Close();
        pdfWriter.Close();
    }

    return pdfStream;
}

public class SvgData
{
    public string svgXml { get; set; }
}
public class PdfData
{
    public string pdfId { get; set; }
}

public JsonResult GeneratePdf(SvgData data)
{
    byte[] pdfBytes = GeneratePdf(PngFromSvg(data.svgXml)).ToArray();

    // ...
    // Either:
    //  :: Store PDF in database as blob and return unique ID
    //  :: Store as file and return path to file

    return Json(new PdfData{pdfId = pdf.id}, JsonRequestBehavior.AllowGet);
}

public ActionResult GetPdf(Int64 pdfId)
{   
    // retrieve pdf from database
    byte[] pdfBytes = pdf.raw;

    return File(pdfBytes, "application/pdf");
}

这段代码很糟糕，但应该是自我解释的。这让我在过去的两周内头疼，所以我知道你在寻找一个“有效”的解决方案时的痛苦。在我看来，发送要解析的svg数据是不好的！但除了模仿网络浏览器的渲染引擎外，我无法想到其他方法！

注意：在样式属性中设置样式时，字体可能会正确呈现，您需要解析这些字体并使用font-属性设置字体，例如

$chartSvg.find("text").each(function () {
    var $this = $(this);
    $this.attr("font-size", $this.css("font-size"));
    $this.css("font-size", "");

    $this.attr("font-style", $this.css("font-style"));
    $this.css("font-style", "");

    $this.attr("font-variant", $this.css("font-variant"));
    $this.css("font-variant", "");

    $this.attr("font-weight", $this.css("font-weight"));
    $this.css("font-weight", "");

    $this.attr("font-family", $this.css("font-family"));
    $this.css("font-family", "");
});

png的质量可能很差，所以我所做的是将svg缩放到两倍大小然后发送到服务器：

var $chartSvg = $("#chart").find("svg");
var $chartSvgClone = $chartSvg.clone().attr("height", $chartSvg.height() * 2).attr("width", $chartSvg.width() * 2).css("transform", "scale(2)");
var $svgXml = $("<div />").append($chartSvgClone).html();
// ...

另一个警告，svg库似乎没有正确设置字体系列，所以在你的C＃代码中传递你的SvgDocument：

public void SetFonts(SvgElement parent)
{
    try
    {
        SvgText svgText = (SvgText)parent;
        svgText.Font = new System.Drawing.Font("Arial", svgText.FontSize.Value);
    }
    catch
    {
    }

    if(parent.HasChildren())
    {
        foreach(SvgElement child in parent.Children)
        {
            SetFonts(child);
        }
    }
}

使用ITextSharp将谷歌可视化areachart svg添加到pdf

1 个答案: