基于 SVG (可缩放矢量图形) 的静态报告

• 下载 SVGReports - 1.3 MB
• 下载 PayAdviceSVGTemplate - 14.5 KB

引言

现在有许多可用于生成美观、智能、静态和动态报告的技术和框架。在这里，我将展示另一种使用 SVG 文件打印静态报告（如工资单、送货单、证书等）的技术。

使用的技术

• SVG - 可缩放矢量图形
• Inkscape - SVG 编辑器
• SVG 渲染库 2.1.0

背景

下图显示了这项技术背后的主要思想。让我们详细看看。

 

SVG 文件 - 可缩放矢量图形

SVG 文件是一种矢量文件格式，可以组织为 XML。在这项技术中，我使用此 SVG 文件作为报告的模板。我手动在 SVG 中设计报告的外观，并放置具有唯一名称的 SVG 文本元素来保存报告数据。

从 SVG 模板中提取 XML

现在，我有一个 SVG 报告模板，我们必须将此 SVG 文件读取为 XML，为此，我使用了 SVG 渲染库。

使用报告数据修改 XML

现在我们有了 SVG 模板文件的 XML 字符串。在这个 XML 字符串中，我们必须使用我们的报告数据替换唯一的占位符。例如，如果我们需要在报告中显示公司名称，只需向 SVG 文档中添加一个 SVG 文本元素，并为此 SVG 文本元素提供唯一内容（如 #CompanyName），以便在 XML 中找到该元素。

所以我们的 XML 字符串包含 #CompanyName。 将此 #CompanyName 替换为我们的实际数据。 像这样，我们可以将报告数据添加到 SVG 模板文件。

重写 SVG 文件和打印 PDF 报告

在将报告数据添加到 SVG 模板的 XML 字符串后，我们必须将此 XML 字符串写入 SVG 文件。 在写入 SVG 文件后，我们可以使用 Inkscape 命令将其转换为 PDF。

分步说明

在继续之前，请在您的计算机上安装 Inkscape。

1. 创建 SVG 模板

使用 Inkscape 创建报告模板，根据您的需要进行设计。 在本例中，我创建了工资单或工资通知单报告。 查看下图

此图像是工资通知单报告的 SVG 模板文件的示例。 您可以按照您想要的方式设计它。 但是您必须小心插入占位符（SVG 文本元素）并为其提供唯一的名称。 根据上图，#EmployeeName、#EmployeeId、#GrossSalary、#OtherIncomes、#Deductions、#TotalSalary是 SVG 文本元素，它们将是占位符。 为 SVG 元素提供唯一的标识名称在代码中处理这些元素时非常有帮助。

2. 创建和设置项目

在 Visual Studio (Windows Forms 或 WPF) 中创建一个 C# 项目，并使用以下 Nuget 命令将 SVG 渲染库添加到项目中。

    Install-Package Svg

3. 创建演示应用程序

创建一个如上图所示的窗口，并为“打印工资通知单按钮”添加事件。

4. 从 SVG 模板读取 XML

    //Opening svg template document into mySvgDocument
    SvgDocument mySvgDocument = SvgDocument.Open(svgFile);

    //Getting xml string from mySvgDocument
    string StringToReplace = mySvgDocument.GetXML();

• SvgDocument.Open(string path) - 它从指定的文件路径打开 SVG 文件。
• GetXML() - 它获取提供的 SVG 文档的 XML string。

5. 使用数据替换占位符

//Replacing placeholders with value
string ReplacedString = StringToReplace.Replace("#EmployeeName", txtEmpName.Text.Trim())
                                       .Replace("#EmployeeId", txtEmpID.Text.Trim())
                                       .Replace("#GrossSalary", txtGrossSalary.Text.Trim())
                                       .Replace("#OtherIncomes", txtOtherIncomes.Text.Trim())
                                       .Replace("#Deductions", txtDeductions.Text.Trim())
                                       .Replace("#TotalSalary", txtSalaryPayable.Text.Trim());

从上面的代码中，从 #EmployeeName 到 #TotalSalary 的占位符已被用户提供的数据替换。

6. 将 XML 写回 SVG 文件

    StreamWriter objStreamWriter = File.AppendText(svgFileName);
    objStreamWriter.Write(ReplacedString);
    objStreamWriter.Close();

上面的代码行将修改后的 XML 字符串写入 SVG 文件。

7. 打印 PDF 报告

现在，我们已经使用用户提供的数据创建了报告。 现在是时候打印 PDF 报告了。 要从 SVG 文件打印 PDF 报告，我在这里只使用 Inkscape 命令，这里是命令

    inkscape -f input_file.svg -A output_file.pdf

通过使用上述命令，我们可以将 SVG 文件转换为 PDF 文件。 请注意，在使用此命令之前，Windows 命令提示符的工作目录应指向 Inkscape 安装目录。 默认的 Inkscape 安装目录是 C:\Program Files\Inkscape。

以下代码将 SVG 文件转换为 PDF 文件的过程自动化。

    //Inkscape SVG to PDF command: inkscape -f in.svg -A out.pdf
    string Command = string.Format("inkscape -f {0} -A {1}", 
    objSaveFileDialog.FileName, 
    objSaveFileDialog.FileName.Replace(".svg", ".pdf")); //Preparing the command
    System.Diagnostics.ProcessStartInfo startInfo = 
    new System.Diagnostics.ProcessStartInfo("cmd", "/c " + Command);
    startInfo.WorkingDirectory = @"C:\Program Files\Inkscape\";
    startInfo.UseShellExecute = false;
    startInfo.CreateNoWindow = true;

    System.Diagnostics.Process process = new System.Diagnostics.Process();
    process.StartInfo = startInfo;
    process.Start();

8. 示例输出

历史

• 初始版本